7. El sistema de tokens
7.1 Color
Definido en OKLCH (fuente de verdad) con respaldo hex para Office y entornos sin gamut amplio.
Neutros
| Token | OKLCH | Hex |
|---|---|---|
| Tinta | oklch(22.9% 0.009 256) |
#1A1D21 |
| Grafito | oklch(50% 0.022 256) |
#5B6470 |
| Pizarra | oklch(65.7% 0.02 258) |
#8A929E |
| Niebla | oklch(92.7% 0.007 261) |
#E4E7EC |
| Acero (v3.1) | oklch(90.3% 0.008 256) |
#DBE0E6 |
| Bruma | oklch(97.6% 0.003 265) |
#F6F7F9 |
| Lienzo | oklch(100% 0 0) |
#FFFFFF |
| Carbón | oklch(20.4% 0.007 258) |
#15171A |
| Superficie oscura | oklch(25.1% 0.01 261) |
#1F2227 |
Acento primario
| Token | OKLCH | Hex |
|---|---|---|
| Azul Meridiano | oklch(51.6% 0.223 265) |
#2456E5 |
| Azul Meridiano oscuro | oklch(44.2% 0.196 265) |
#1B43BD |
| Azul Meridiano suave | oklch(95.2% 0.02 270) |
#EAEFFD |
Funcionales (estado)
| Token | OKLCH | Hex | Fondo |
|---|---|---|---|
| Éxito | oklch(57.3% 0.127 158) |
#1B8E5A |
#E7F4EE |
| Advertencia | oklch(61.2% 0.13 69) |
#B5730A |
#FBF1E0 |
| Error | oklch(54.6% 0.187 23) |
#C62F37 |
#FBEAEB |
| Información | oklch(52% 0.094 223) |
#0E7490 |
#E3F2F5 |
Funcionales como texto pequeño (v3.1.1): cuando un color funcional actúa como texto pequeño sobre fondo claro (delta de un KPI, texto de un badge), se usa su variante de texto, más oscura, que garantiza WCAG AA 4,5:1 incluso sobre su fondo suave: exito-texto #15784B (5,50:1 en blanco, 4,86:1 sobre éxito-fondo) y advertencia-texto #96600B (5,28:1 en blanco, 4,72:1 sobre su fondo). Error e información ya cumplen como texto. En modo oscuro estas variantes resuelven a los funcionales oscuros, que superan 6,7:1 sobre Carbón.
Paleta categórica de datos (nueva en v3) — solo para series de gráficos, nunca para UI. Seis tonos con luminosidad OKLCH equiparada (~52-62%), distinguibles entre sí también para visión deficiente de color cuando se acompañan de etiqueta o patrón.
| Token | OKLCH | Hex | Nota |
|---|---|---|---|
| dato-1 | oklch(51.6% 0.223 265) |
#2456E5 |
Azul Meridiano, serie principal |
| dato-2 | oklch(62% 0.14 200) |
#1E9AB0 |
Verde azulado |
| dato-3 | oklch(60% 0.16 35) |
#D96845 |
Coral |
| dato-4 | oklch(55% 0.16 305) |
#8D5AC8 |
Violeta |
| dato-5 | oklch(67% 0.13 90) |
#B98A0C |
Ocre |
| dato-6 | oklch(48% 0.05 256) |
#4E5A6B |
Gris azulado, comparativos |
Reglas: la serie protagonista usa dato-1; máximo 6 series por gráfico (si hay más, agrupar en "Otros"); para resaltar una serie, las demás bajan a Niebla.
7.2 Tipografía
- Interfaz y títulos: Inter Variable → Aptos, Segoe UI, system-ui, sans-serif.
- Lectura larga: Source Serif 4 Variable → Georgia, serif.
- Código y datos: JetBrains Mono → Consolas, monospace.
Escala modular (razón 1.25) con tamaño fluido en pantalla
| Rol | pt (doc) | px | Fluido con clamp() | Peso | Interlineado |
|---|---|---|---|---|---|
| Display | 30 | 40 | clamp(2rem, 1.4rem + 3vw, 2.5rem) |
700 | 1.1 |
| Título 1 | 24 | 32 | clamp(1.75rem, 1.3rem + 2.25vw, 2rem) |
700 | 1.2 |
| Título 2 | 19 | 25 | clamp(1.375rem, 1.1rem + 1.4vw, 1.5625rem) |
600 | 1.2 |
| Título 3 | 15 | 20 | clamp(1.125rem, 1rem + 0.6vw, 1.25rem) |
600 | 1.3 |
| Subtítulo | 13.5 | 18 | clamp(1.0625rem, 1rem + 0.3vw, 1.125rem) |
500 | 1.4 |
| Cuerpo | 11 | 16 | 1rem |
400 | 1.5 |
| Cuerpo pequeño | 10 | 14 | 0.875rem |
400 | 1.5 |
| Etiqueta | 9 | 13 | 0.8125rem |
500 | 1.4 |
Reglas: cifras tabulares (font-variant-numeric: tabular-nums) en tablas, KPIs y cualquier columna de números; longitud de línea de 60 a 75 caracteres en lectura; nunca más de tres familias.
Estilos enfatizados (nuevo en v3.1, lección de M3 Expressive): cada rol de la escala admite una variante enfatizada que sube un paso el peso (400→500, 600→700) y compacta el interlineado un 5%, reservada a momentos de jerarquía alta: la cifra protagonista de un hero, el KPI principal, el titular de portada. Regla: máximo un elemento enfatizado por vista; el énfasis funciona porque es escaso.
7.3 Espaciado (rejilla base 8)
| Token | px | Token | px |
|---|---|---|---|
| espacio-3xs | 2 | espacio-lg | 24 |
| espacio-2xs | 4 | espacio-xl | 32 |
| espacio-xs | 8 | espacio-2xl | 48 |
| espacio-sm | 12 | espacio-3xl | 64 |
| espacio-md | 16 | espacio-4xl | 96 |
Para secciones grandes en pantalla: clamp(2rem, 5vw, 6rem).
7.4 Radios
| Token | px | Uso |
|---|---|---|
| radio-none | 0 | Datos densos, tablas |
| radio-sm | 4 | Etiquetas, badges, checkboxes |
| radio-md | 8 | Por defecto: tarjetas, campos, botones |
| radio-lg | 12 | Modales, contenedores prominentes |
| radio-full | 9999 | Píldoras, avatares, switches |
Concentricidad: los controles anidados restan el padding al radio del contenedor (radio interno = radio externo − padding) para que las esquinas queden alineadas.
Formas expresivas y morphing (nuevo en v3.1, lección de M3 Expressive):
- El cambio de forma puede comunicar estado: un control que pasa de radio-md a radio-full al seleccionarse, un indicador de carga que ondula entre formas. La transición usa resorte-estándar y respeta
prefers-reduced-motion. - Tensión deliberada: combinar esquinas rectas (datos, rigor) con píldoras (acciones, calidez) dentro de una misma composición crea jerarquía memorable. Regla: la tensión es una decisión por sección, no por componente; nunca más de dos lenguajes de forma simultáneos.
- El morphing pertenece al rango expresivo: con
expresividad: 0las formas son estáticas; el dial lo activa gradualmente.
7.5 Elevación como material adaptativo
| Nivel | Comportamiento | Uso |
|---|---|---|
| 0 | Sin sombra, borde 1px Niebla | Datos densos, tablas, listas |
| 1 | 0 1px 3px rgba(16,24,40,.10) |
Tarjetas en reposo |
| 2 | 0 4px 8px rgba(16,24,40,.08) |
Menús, popovers, tooltips |
| 3 | Material translúcido, blur 16-24px | Modales y diálogos |
Variantes del material translúcido (nuevo en v3.1, lección de Liquid Glass iOS 26):
| Variante | Comportamiento | Cuándo |
|---|---|---|
| Regular | Blur 16-24px + leve refracción del contenido cercano (lensing) | Modales, diálogos, menús flotantes |
| Entintado | Regular + velo del color de fondo al 60-70% de opacidad | Barras y controles flotantes sobre contenido impredecible (fotos, mapas) |
| Sólido | Sin transparencia | Degradación automática cuando falla el contraste o con prefers-reduced-transparency |
Reglas de capa (Apple): el material translúcido pertenece a la capa de navegación y control que flota sobre el contenido (barras, modales, menús), nunca al contenido mismo; la jerarquía surge del layout y la agrupación, no de decorar las barras. Efecto de borde al hacer scroll: cuando el contenido se desplaza bajo una barra flotante, aparece un desvanecimiento o borde sutil que separa las capas; nunca una sombra dura.
Guardarraíl innegociable: si el contraste del texto sobre el material baja del mínimo, degrada a la variante sólida. Lo mismo si el usuario activa reducir transparencia.
7.6 Movimiento por física
| Token | Carácter | Uso |
|---|---|---|
| resorte-suave | Sin rebote | Foco, cambios discretos |
| resorte-estándar | Rebote mínimo | Tarjetas, paneles, navegación |
| resorte-expresivo | Rebote visible | Confirmaciones, momentos destacados |
Duraciones de respaldo: micro 120 ms, estándar 200 ms, entrada/salida 280 ms. Dial expresividad de 0 a 1, bajo por defecto. Siempre se respeta prefers-reduced-motion.
7.7 Iconografía (nueva en v3)
- Estilo: trazo (outline), no relleno, salvo estados activos donde el relleno marca selección.
- Trazo: 1.5px sobre rejilla de 24×24 con área viva de 20×20. Esquinas y remates redondeados.
- Tamaños: 16px (dentro de texto y campos), 20px (botones y navegación), 24px (estándar), 32px+ (ilustrativo, estados vacíos).
- Color: heredan el color del texto que acompañan (
currentColor). Nunca introducen un color nuevo. - Emparejamiento: icono + etiqueta de texto siempre que el espacio lo permita; icono solo únicamente con tooltip y
aria-label. - Set recomendado: Lucide (web) y Material Symbols (Android), por coherencia de trazo con Inter.
7.8 Densidades (nueva en v3)
| Densidad | Altura de fila | Altura de control | Cuándo |
|---|---|---|---|
| Compacta | 32px | 32px | Tablas grandes, usuarios expertos, ERP |
| Cómoda (defecto) | 40px | 40px | Aplicaciones y dashboards en general |
| Espaciosa | 48px | 48px | Táctil prioritario, kioscos, lectura tranquila |
La densidad se cambia con un atributo de contenedor (data-densidad), nunca control por control. El objetivo táctil mínimo de 44px se mantiene en móvil aunque la densidad visual sea compacta (el área de toque puede exceder el dibujo del control).