Color
Papel crema, tinta cálida y un naranja animado. Feitio usa poco color a propósito: la refinación reside en cuántos colores quedan fuera.
En esta página
Los roles
Ningún componente conoce un color; conoce un rol: superficie, texto, acento. Cada tema rellena los mismos roles, por lo que cambiar temas, o de día a noche, no rompe nada.
También: on-accent (texto sobre el naranja), line (líneas), shadow (la sombra del papel) y una superficie para cada estado (ok-surface, warn-surface, error-surface).
Reglas
Un naranja por pantalla
El acento va en la acción principal y nada más. Los enlaces y notas usan el naranja fuerte, más oscuro, que se lee como texto.
Don’t
Título y botón en naranja: el ojo no sabe a dónde mirar.
El color nunca habla solo
Un estado siempre viene con un icono y una palabra, para las personas que no pueden distinguir colores y para la impresión en blanco y negro.
Do
Icon, word and color together.
Don’t
Two dots: for people who cannot tell the colors apart, they are the same.
Error is wine, never orange
El vino se alejó del naranja para que un error nunca parezca como la acción principal.
No color written by hand
Siempre el rol, var(--feitio-color-…). Un color escrito a mano no cambia de noche ni en una fachada.
Día y noche
La noche no es el día invertido. Cada rol tiene su propio valor en la oscuridad: el papel se convierte en carbón cálido, la crema se vuelve tinta y el naranja de los enlaces brilla para mantenerse legible. El naranja de la acción principal es el mismo en ambos modos, profundo, con texto crema. Sin elección desde la página, Feitio sigue el modo del sistema.
Crema, tinta casi negra, naranja.
surface: oklch(96% 0.018 80)
Carbón cálido, crema como tinta, el mismo naranja.
surface: oklch(22% 0.016 55)
Fachadas
- Fuera del trabajo (una página de tienda) recibe una fachada: un tema que solo cambia los colores, cumpliendo los mismos roles.
- La tipografía, la forma, el espacio y el movimiento permanecen Feitio.
- Una fachada nace de día solo y obtiene una versión nocturna cuando el trabajo lo pide.
- La prueba de contraste también se aplica a ella: una fachada que falla no entra.
Contraste
Cada par que lleva texto o significado pasa WCAG 2.2 AA, de día y de noche: 4.5 para el texto, 3 para las formas. La prueba de Feitio revisa cada par y falla la construcción si uno cae.
| Par | Usar | Día | Noche | Mínimo |
|---|---|---|---|---|
text / surface | texto principal | 13,9 | 14,1 | 4,5 |
text-soft / surface | texto de apoyo | 6,4 | 8,1 | 4,5 |
accent-strong / surface | enlaces y notas | 5,8 | 8,0 | 4,5 |
on-accent / accent | texto principal del botón | 5,0 | 5,0 | 4,5 |
accent / surface | botón principal, foco | 4,8 | 3,2 | 3 |
warn / warn-surface | aviso de atención | 4,8 | 7,5 | 4,5 |
La fórmula de la WCAG 2 subestima el texto oscuro sobre tonos medios saturados: el naranja antiguo, con texto oscuro, pasó con 5.2 y aún cansa la vista. Por eso el naranja es profundo y el texto encima crema; la medida perceptiva (APCA) concuerda, con Lc 79 contra 40 antes.