Card base
Superficie con borde y sombra suave para agrupar contenido.
Color
Roles semánticos. Los componentes nunca usan la escala primitiva.
--color-bg
--color-surface
--color-surface-raised
--color-border
--color-accent
--color-success
--color-warning
--color-danger
--color-info
neutral
accent
success
warning
danger
info
Tipografía
Display 36 · Texto de portada
Heading 30 · Título de página
Heading 24 · Sección
Heading 20 · Subsección
Body large 16 · Introducción
Body 14 · Texto por defecto
Body small 13 · Soporte
Caption 12 · Metadato
Label 11 · Etiqueta
Familia: --kit-font-sans. Código: --kit-font-mono.
Interlineado normal 1.55 para lectura.
Espaciado, radios y elevación
space-1 · 4pxspace-2 · 8pxspace-3 · 12pxspace-4 · 16pxspace-6 · 24pxspace-8 · 32pxspace-12 · 48pxsm 6
md 10
lg 14
full
sm
md
lg
Botones
Altura mínima 38px: objetivo táctil cómodo. Foco visible con
:focus-visible en todo control.
Formularios
Texto de ayuda que explica el campo.
Formato inválido.
Superficies y estados
Información
Mensaje neutro con acción pendiente.
Guardado
Los cambios se aplicaron.
Atención
Hay campos sin revisar.
Error
No se pudo conectar con el servidor.
Sin resultados
Ajusta los filtros o crea el primer elemento.
Datos y navegación
| Proyecto | Área | Estado |
|---|---|---|
| App de tareas | Desarrollo | activo |
| Curso de diseño | Estudio | pausado |
| Sitio personal | Personal | archivado |
Confirmar acción
Este cambio no se puede deshacer.