AIFor.ms usa un tema oscuro con fondo azul medianoche profundo, cyan brillante como color principal, y coral suave como acento.
Tokens principales
| Token | Hex | ¿Para qué se usa? |
|---|
primary | #00B4D8 | Color de acción principal — botones, links, estados activos |
primaryDark | #0096B7 | Estado presionado/hover del primario |
accent | #FF6B6B | Énfasis, atención, CTA secundario |
background | #0A1628 | Fondo de la app (azul medianoche profundo) |
surface | #132240 | Fondo de tarjetas/superficies |
surfaceLight | #1A2D50 | Superficie elevada |
surfaceHighlight | #223A60 | Superficie resaltada/hover |
text | #F0F4F8 | Texto principal |
textSecondary | #8BA4C4 | Texto secundario/de apoyo |
textMuted | #5A7399 | Texto deshabilitado/atenuado |
border | #1E3355 | Líneas de borde |
Tokens semánticos
| Token | Hex | ¿Para qué se usa? |
|---|
success | #4ADE80 | Retroalimentación de éxito |
warning | #FBBF24 | Retroalimentación de advertencia |
error | #F87171 | Retroalimentación de error |
recording | #FF4757 | Indicador de grabación activa |
recordingGlow | rgba(255, 71, 87, 0.3) | Resplandor del indicador de grabación |
Rampas de color OKLCH
Cada color principal tiene una escala de tonos perceptualmente uniforme (50–950) generada en el espacio de color OKLCH. OKLCH asegura que el mismo valor de luminosidad produce el mismo brillo percibido en todos los tonos.
Rampa del primario
| Tono | Hex | OKLCH |
|---|
| 50 | #B2FFFF | oklch(97.0% 0.085 219.0) |
| 100 | #A1F7FF | oklch(93.0% 0.090 219.0) |
| 200 | #7FDDF9 | oklch(85.0% 0.098 219.0) |
| 300 | #50BEDC | oklch(75.0% 0.108 219.0) |
| 400 | #009FC0 | oklch(65.0% 0.118 219.0) |
| 500 | #0081A4 | oklch(55.0% 0.129 219.0) |
| 600 | #006381 | oklch(45.0% 0.118 219.0) |
| 700 | #004560 | oklch(35.0% 0.108 219.0) |
| 800 | #002A41 | oklch(25.0% 0.098 219.0) |
| 900 | #00172C | oklch(18.0% 0.091 219.0) |
| 950 | #00081B | oklch(12.0% 0.084 219.0) |
Guía de uso de rampas
- 50–200: Fondos teñidos, rellenos sutiles, estados hover en tema claro
- 300–400: Elementos secundarios, bordes, estados deshabilitados
- 500: Tono base — el más cercano al color original de la marca
- 600–700: Variantes oscurecidas para estados presionados, elementos activos
- 800–950: Fondos profundos, superficies en tema oscuro
Mapeo en tema oscuro
| Token de la app | Tono de rampa recomendado |
|---|
background | neutral-950 o neutral-900 |
surface | neutral-800 |
surfaceLight | neutral-700 |
primary | primary-500 |
accent | accent-400 |
Archivos fuente
- Definiciones de color:
constants/colors.ts
- Propiedades CSS personalizadas y equivalentes OKLCH disponibles para uso fuera de React Native.