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 = #1C59BA, el azul Expreso. De aquí salen la acción primaria, los estados hover/active y los tintes de fondo.
Escala fría para superficies, bordes y texto. El --slate-900 comparte valor con --blue-900 (#16233B) — la tinta de texto tiene sesgo azul, no gris puro.
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(28, 89, 186, 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.
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
#1C59BAes 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?