Tarjeta de herramienta
Úsalo para elementos de catálogo, métricas, resúmenes de funciones y vistas previas ligeras.
Tokens
Color, espaciado, radio y movimiento
Los tokens son la única fuente de verdad permitida para las primitivas visuales. Las páginas nuevas deben consumirlos, no redefinirlos.
Fondo
Superficie
Acento
Radio
6 / 10 / 16
Usa solo `sm`, `md`, `lg`.
Espaciado
8-32
La mayor parte de la interfaz cabe en la banda de espaciado principal.
Movimiento
150-220ms
Las transiciones deben ser sutiles y rápidas.
Tipografía
Jerarquía legible con densidad compacta
H1 de página: identidad principal de la página
Sección H2: bloque de contenido principal
Grupo de tarjetas H3: agrupación secundaria
Tarjeta H4: título de tarjeta estándar
El texto de entrada se reserva para introducciones breves de página y descripciones explicativas.
El texto del cuerpo es la capa predeterminada para el texto de ayuda, las descripciones de herramientas y las explicaciones de resultados.
La leyenda se usa para metadatos, contadores, notas de campo y ayudas secundarias.
Tarjetas
Contenedores de contenido estandarizados
Tarjeta de lista
Úsalo para filas de resultados, herramientas relacionadas, listas de acceso rápido o bloques de historial reciente.
Controles
Botones, campos, píldoras y lenguaje de estado
Patrones
Composición de página reutilizable
!
Aviso principal
Usa bloques de aviso para textos de ayuda, mensajes de privacidad o limitaciones de la herramienta.
| Capa | Caso de uso |
|---|---|
| Token | Color, tipografía, espaciado, movimiento |
| Base | Primitivas de tipografía y maquetación |
| Componente | Botones, tarjetas, controles de formulario |