Sistema visual

12 colores · 5 tamaños · 6 métricas

Color

12 tokens
  1. --fondo · Lienzo#ffffff
  2. --superficie · Cabecera de panel#fafafa
  3. --resalte · Hover de fila y de botón#f4f4f5
  4. --borde · Borde único del sistema#e4e4e7
  5. --texto · Texto y estado activo#18181b
  6. --tenue · Metadatos y recuentos#71717a
  7. --acento · Selección actual#4f46e5
  8. --acento-suave · Fondo de fila seleccionada#eef0fd
  9. --foco · Borde de foco#6366f1
  10. --foco-halo · Halo de foco#e0e7ff
  11. --aviso · Pendiente de rematar#b45309
  12. --error · Error#b91c1c

Tipografía

pesos 400 · 500 · 600
  1. Etiquetas del rail10px
  2. Metadatos y recuentos11px
  3. Cabeceras y texto secundario12px
  4. Base de la interfaz13px
  5. Títulos15px
Cifras tabulares en todo el sistema: 1 000 · 1 111 · 9 999

Métricas

  1. Rejilla4px
  2. Altura de fila26px
  3. Altura de control28px
  4. Radio4px
  5. Borde1px
  6. Sombraninguna

Botones

Campos

Etiquetas y elección

neutraacentoavisoerror

Lista densa

6 familias

Estado vacío

0 elementos

Aquí no hay nada todavía. Un hueco en blanco parece una avería, así que siempre se dice por qué.