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.
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?