FoundationEstable
Colores
Color expresivo con roles semánticos y contraste comprobable.
Estado del sistemaEstable
Paleta base comprobada en Figma: coral, lila, turquesa, amarillo, azul y naranja; fondo #FDF2E9 y tinta #1A1A1A. Roles semánticos adaptados y verificados en claro y oscuro.
Estado actual
Decisiones que ya existen y pueden observarse en el producto.
La paleta vive en tokens/colors.json; genera CSS, registro y matriz de contraste.
Primario coral; secundario lila; acento turquesa. Las superficies de color siempre llevan su foreground asociado.
El coral es marca y acción principal; el error usa su propio rojo en ambos temas y el progreso usa menta. Sobre pasteles el texto es pastel-foreground.
Los enlaces tienen un token propio más oscuro en claro y más claro en oscuro. No se usa coral como texto sobre crema.
Los pares declarados alcanzan 4.5:1 para texto normal. No aplica a combinaciones arbitrarias del consumidor.
Coral
#FF6B6BPurple
#A388EETeal
#4ECDC4Yellow
#FFE66DBlue
#45B7D1Orange
#F7A072Background
#FDF2E9Foreground
#1A1A1ATokens actuales
Valores presentes hoy; documentarlos no significa que todos sean definitivos.
| Token | Valor | Uso actual |
|---|---|---|
| Ink | #1a1a1a | Primitivo de paleta; usa roles semánticos en componentes. |
| cream | #fdf2e9 | Primitivo de paleta; usa roles semánticos en componentes. |
| purple | #a388ee | Primitivo de paleta; usa roles semánticos en componentes. |
| yellow | #ffe66d | Primitivo de paleta; usa roles semánticos en componentes. |
| mint | #c4f0ad | Primitivo de paleta; usa roles semánticos en componentes. |
| sky | #b9e6f6 | Primitivo de paleta; usa roles semánticos en componentes. |
| coral | #ff6b6b | Primitivo de paleta; usa roles semánticos en componentes. |
| teal | #4ecdc4 | Primitivo de paleta; usa roles semánticos en componentes. |
| blue | #45b7d1 | Primitivo de paleta; usa roles semánticos en componentes. |
| orange | #f7a072 | Primitivo de paleta; usa roles semánticos en componentes. |
Matriz de contraste
Pares de fondo y texto aprobados y verificados desde la fuente de tokens.
WCAG 2.2 AA · Mínimo 4.5:1 para texto normal y 3:1 para texto grande o elementos gráficos significativos.
Tema claro
| Par aprobado | Valores | Contraste | Texto normal | Texto grande / UI |
|---|---|---|---|---|
background / foreground | #fdf2e9#1a1a1a | 15.79:1 | Cumple AA | Cumple AA |
card / card-foreground | #ffffff#1a1a1a | 17.40:1 | Cumple AA | Cumple AA |
popover / popover-foreground | #ffffff#1a1a1a | 17.40:1 | Cumple AA | Cumple AA |
primary / primary-foreground | #ff6b6b#1a1a1a | 6.27:1 | Cumple AA | Cumple AA |
secondary / secondary-foreground | #a388ee#1a1a1a | 6.06:1 | Cumple AA | Cumple AA |
muted / muted-foreground | #eee5dc#615954 | 5.51:1 | Cumple AA | Cumple AA |
accent / accent-foreground | #4ecdc4#1a1a1a | 9.00:1 | Cumple AA | Cumple AA |
destructive / destructive-foreground | #b42318#ffffff | 6.57:1 | Cumple AA | Cumple AA |
success / success-foreground | #c4f0ad#1a1a1a | 13.60:1 | Cumple AA | Cumple AA |
warning / warning-foreground | #ffe66d#1a1a1a | 13.92:1 | Cumple AA | Cumple AA |
info / info-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
background / link | #fdf2e9#6041a6 | 6.80:1 | Cumple AA | Cumple AA |
card / link | #ffffff#6041a6 | 7.49:1 | Cumple AA | Cumple AA |
blue / blue-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
orange / orange-foreground | #f7a072#1a1a1a | 8.48:1 | Cumple AA | Cumple AA |
mint / pastel-foreground | #c4f0ad#1a1a1a | 13.60:1 | Cumple AA | Cumple AA |
sky / pastel-foreground | #b9e6f6#1a1a1a | 13.02:1 | Cumple AA | Cumple AA |
purple / pastel-foreground | #a388ee#1a1a1a | 6.06:1 | Cumple AA | Cumple AA |
yellow / pastel-foreground | #ffe66d#1a1a1a | 13.92:1 | Cumple AA | Cumple AA |
coral / pastel-foreground | #ff6b6b#1a1a1a | 6.27:1 | Cumple AA | Cumple AA |
teal / pastel-foreground | #4ecdc4#1a1a1a | 9.00:1 | Cumple AA | Cumple AA |
blue / pastel-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
orange / pastel-foreground | #f7a072#1a1a1a | 8.48:1 | Cumple AA | Cumple AA |
background / destructive | #fdf2e9#b42318 | 5.97:1 | Cumple AA | Cumple AA |
card / destructive | #ffffff#b42318 | 6.57:1 | Cumple AA | Cumple AA |
background / grammar-coral | #fdf2e9#b42347 | 5.82:1 | Cumple AA | Cumple AA |
card / grammar-coral | #ffffff#b42347 | 6.42:1 | Cumple AA | Cumple AA |
background / grammar-green | #fdf2e9#156b43 | 5.92:1 | Cumple AA | Cumple AA |
card / grammar-green | #ffffff#156b43 | 6.53:1 | Cumple AA | Cumple AA |
background / grammar-blue | #fdf2e9#1d5fbf | 5.54:1 | Cumple AA | Cumple AA |
card / grammar-blue | #ffffff#1d5fbf | 6.10:1 | Cumple AA | Cumple AA |
background / grammar-violet | #fdf2e9#7441a8 | 6.22:1 | Cumple AA | Cumple AA |
card / grammar-violet | #ffffff#7441a8 | 6.85:1 | Cumple AA | Cumple AA |
background / grammar-amber | #fdf2e9#805800 | 5.75:1 | Cumple AA | Cumple AA |
card / grammar-amber | #ffffff#805800 | 6.34:1 | Cumple AA | Cumple AA |
background / grammar-teal | #fdf2e9#086b78 | 5.63:1 | Cumple AA | Cumple AA |
card / grammar-teal | #ffffff#086b78 | 6.20:1 | Cumple AA | Cumple AA |
background / grammar-orange | #fdf2e9#9a4b15 | 5.62:1 | Cumple AA | Cumple AA |
card / grammar-orange | #ffffff#9a4b15 | 6.19:1 | Cumple AA | Cumple AA |
Tema oscuro
| Par aprobado | Valores | Contraste | Texto normal | Texto grande / UI |
|---|---|---|---|---|
background / foreground | #191919#fffdf8 | 17.30:1 | Cumple AA | Cumple AA |
card / card-foreground | #262626#fffdf8 | 14.89:1 | Cumple AA | Cumple AA |
popover / popover-foreground | #262626#fffdf8 | 14.89:1 | Cumple AA | Cumple AA |
primary / primary-foreground | #ff6b6b#1a1a1a | 6.27:1 | Cumple AA | Cumple AA |
secondary / secondary-foreground | #a388ee#1a1a1a | 6.06:1 | Cumple AA | Cumple AA |
muted / muted-foreground | #373330#d0c5bc | 7.38:1 | Cumple AA | Cumple AA |
accent / accent-foreground | #4ecdc4#1a1a1a | 9.00:1 | Cumple AA | Cumple AA |
destructive / destructive-foreground | #ff4d4f#1a1a1a | 5.33:1 | Cumple AA | Cumple AA |
success / success-foreground | #c4f0ad#1a1a1a | 13.60:1 | Cumple AA | Cumple AA |
warning / warning-foreground | #ffe66d#1a1a1a | 13.92:1 | Cumple AA | Cumple AA |
info / info-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
background / link | #191919#c4b1ff | 9.28:1 | Cumple AA | Cumple AA |
card / link | #262626#c4b1ff | 7.98:1 | Cumple AA | Cumple AA |
blue / blue-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
orange / orange-foreground | #f7a072#1a1a1a | 8.48:1 | Cumple AA | Cumple AA |
mint / pastel-foreground | #c4f0ad#1a1a1a | 13.60:1 | Cumple AA | Cumple AA |
sky / pastel-foreground | #b9e6f6#1a1a1a | 13.02:1 | Cumple AA | Cumple AA |
purple / pastel-foreground | #a388ee#1a1a1a | 6.06:1 | Cumple AA | Cumple AA |
yellow / pastel-foreground | #ffe66d#1a1a1a | 13.92:1 | Cumple AA | Cumple AA |
coral / pastel-foreground | #ff6b6b#1a1a1a | 6.27:1 | Cumple AA | Cumple AA |
teal / pastel-foreground | #4ecdc4#1a1a1a | 9.00:1 | Cumple AA | Cumple AA |
blue / pastel-foreground | #45b7d1#1a1a1a | 7.42:1 | Cumple AA | Cumple AA |
orange / pastel-foreground | #f7a072#1a1a1a | 8.48:1 | Cumple AA | Cumple AA |
background / destructive | #191919#ff4d4f | 5.38:1 | Cumple AA | Cumple AA |
card / destructive | #262626#ff4d4f | 4.63:1 | Cumple AA | Cumple AA |
background / grammar-coral | #191919#ff9cb0 | 8.90:1 | Cumple AA | Cumple AA |
card / grammar-coral | #262626#ff9cb0 | 7.66:1 | Cumple AA | Cumple AA |
background / grammar-green | #191919#7ee2a8 | 11.16:1 | Cumple AA | Cumple AA |
card / grammar-green | #262626#7ee2a8 | 9.61:1 | Cumple AA | Cumple AA |
background / grammar-blue | #191919#8dbbff | 8.95:1 | Cumple AA | Cumple AA |
card / grammar-blue | #262626#8dbbff | 7.70:1 | Cumple AA | Cumple AA |
background / grammar-violet | #191919#ceb0ff | 9.44:1 | Cumple AA | Cumple AA |
card / grammar-violet | #262626#ceb0ff | 8.13:1 | Cumple AA | Cumple AA |
background / grammar-amber | #191919#ffd36a | 12.37:1 | Cumple AA | Cumple AA |
card / grammar-amber | #262626#ffd36a | 10.65:1 | Cumple AA | Cumple AA |
background / grammar-teal | #191919#78dce8 | 11.05:1 | Cumple AA | Cumple AA |
card / grammar-teal | #262626#78dce8 | 9.51:1 | Cumple AA | Cumple AA |
background / grammar-orange | #191919#ffba83 | 10.55:1 | Cumple AA | Cumple AA |
card / grammar-orange | #262626#ffba83 | 9.08:1 | Cumple AA | Cumple AA |
Qué falta
Huecos que impiden tratar esta base como una regla estable.
No quedan huecos abiertos en el alcance actual de esta foundation.
Próximas decisiones
Orden recomendado para convertir los hallazgos en una foundation estable.
- 01
Ejecuta theme:check después de editar la paleta. Usa texto y símbolos además del color para errores y selección.