Design System · Expreso Brasilia
Colores, tipografía y espaciado del UI Kit
Referencia visual de los design tokens de la librería. Cada muestra lleva su nombre de token y su valor real — haz clic en cualquiera para copiar el hex. La idea es que revises la paleta y me confirmes qué ajustar.
Color · Primitivos
La rampa está anclada en --blue-600 = #024496, el azul Expreso. De aquí salen la acción primaria, los estados hover/active y los tintes de fondo. El último, --blue-text-light, va fuera de la rampa: es el azul claro para texto sobre fondo azul sólido — 5.36:1 sobre el 600 y 6.70:1 sobre el 700, pero solo 3.39:1 sobre el 500.
Escala fría para superficies, bordes y texto. El --slate-900 (#16233B) tiene sesgo azul, no es gris puro. Hasta la reedición de la rampa de marca compartía valor exacto con --blue-900; ahora ese es más oscuro (#081F3A) y la tinta de texto va por su cuenta.
Un valor por rol: texto/botón (700/600) · tinte de fondo (100) · punto/glifo (500). Agrupados por familia.
Fuera de la paleta semántica de estado. Se usa para acentos puntuales.
Color · Semánticos
Esto es lo que consumen los componentes. Cada rol apunta a un primitivo — cambiar el primitivo cambia todo lo que lo usa. La flecha indica a cuál apunta.
Ratio de contraste de cada color de texto sobre fondo blanco --color-surface. AA normal exige ≥ 4.5, AA grande ≥ 3.0.
Forma · Tipografía
Base oficial 14/20 px. Familia IBM Plex Sans (la carga el proyecto consumidor). El tamaño real se renderiza abajo.
Forma · Espaciado
Todos los espaciados son múltiplos de 4px (salvo --space-px). La barra muestra el ancho real de cada paso.
Forma · Radios
Cuatro niveles. --radius-full (9999px) se usa para píldoras y avatares.
Forma · Elevación
Cuatro niveles de elevación más una sombra de marca (con tinte azul) y el scrim del modal.
Forma · Foco
Un solo indicador de foco para todo el kit: azul de marca al 24%, 3px, pegado al borde. Botones, campos, tarjetas clickeables y enlaces usan el mismo, y por eso tabular por un formulario se lee como un único sistema. Enfoca los ejemplos con Tab para verlo.
| --color-focus-ring | rgba(2, 68, 150, 0.24) | El color (--blue-600 al 24%) |
| --focus-ring-width | 3px | El grosor, suelto |
| --focus-ring | 0 0 0 3px var(--color-focus-ring) | El anillo ya compuesto |
Hay dos tokens para el mismo anillo porque se aplica de dos formas: PrimeNG lo pinta como
outline y necesita el grosor por separado; el resto del kit lo pinta como
box-shadow y usa --focus-ring entero. Un campo inválido
enfocado usa el mismo grosor en el tinte de peligro.
Forma · Movimiento
Hasta hace poco el kit no tenía tokens de movimiento y cada componente escribía el suyo:
convivían 150ms, 200ms y 0.15s — tres valores para dos
velocidades, y en dos unidades distintas. Con overlays (diálogo, toast, tooltip) deja de ser
cosmético: si el toast entra a otra velocidad que el diálogo, la interfaz se nota
descoordinada. Pasa el ratón por las cajas para comparar.
| --duration-fast | 150ms | Cambios de estado sobre algo que ya está en pantalla: color de hover, giro de un chevron |
| --duration-base | 200ms | Lo que aparece, se va o cambia de tamaño: desplegar un detalle, entrar un overlay |
| --ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | La curva, una para todo |
La curva arranca decidida y frena al final, que es como se lee un elemento que llega a su
sitio. Sustituye a ease, cuya aceleración inicial dejaba los overlays con aire
perezoso.
Sistema · Layout y utilidades
Piezas del sistema que igualmente se consumen como token.
| --font-sans | 'IBM Plex Sans', ui-sans-serif, system-ui | La familia. El kit la declara; la fuente la carga el proyecto consumidor |
| --header-height | 64px | Alto del header global fijo |
| --scrim | rgba(16, 24, 40, 0.5) | Velo oscuro detrás de los modales |
| --scrollbar-size | 10px | Ancho del canal de la barra |
| --scrollbar-thumb | → --slate-300 | Pulgar |
| --scrollbar-thumb-hover | → --slate-400 | Pulgar en hover |
| --scrollbar-track | transparent | Canal |
La escala de iconos es 16 / 20 / 24 px (sm / md /
lg), pero hoy vive en el TypeScript de bui-icon, no como token.
Es el único tramo del sistema que no se puede consumir desde CSS. Decidir si entra como
--icon-sm/md/lg.
Revisión
Para tu revisión
Recorre las paletas de arriba y marca qué cambiaría. Puntos concretos donde suele haber decisiones:
- Azul de marca — ¿el
#024496es el azul Expreso correcto? De él dependen hover, active y tintes. - Colores de estado — ¿los verdes/ámbar/rojo/azul-info cumplen con la identidad y con el contraste que necesitas?
- Tinta de texto — el cuerpo usa
--slate-600, no el más oscuro. Revisa la sección de contraste WCAG por si algún nivel no pasa. - Acento teal — ¿se mantiene o se elimina?