Human Interface Guidelines
Design
El lenguaje visual de BookOS, en vivo. Un banco de pruebas real: mueve toggles, abre diálogos y menús, cambia entre claro y oscuro. Todo es de mentira — es para que sientas la estética antes de construir con ella.
👆 Toca lo que quieras. Nada de esto guarda nada.Color · tokens
Radios
Tipografía
Iconos · dos sistemas
Sistema A
Relleno sólido, color de marca. Sidebar y apps. 30px.
Sistema B
Trazo (Heroicons Outline / Lucide), currentColor. Dentro de filas y botones.
Componentes
Botones
Primario (accent), secundario (hover), peligro (texto danger).
Chips & badges
Atajos, estados, contadores. Radio 6px (pills 20px).
Meta+G
BETA
DEV
Al desconectar
7
Disparador
Acción
BookOS 1.1
Inputs
Buscador, campo de texto (foco = borde accent), select.
Español
Indicadores
Señal, batería, progreso, anillo circular.
Hero cards
Cabeceras de página: perfil, batería con gráfico, banner de acción.
E
Evelyn
Administrador · @evelyn
82%Cargando · 45 min restantes
Empty state
Cuando no hay contenido que mostrar.
No hay dispositivos conectados
Skeleton loading
Placeholder con shimmer mientras carga.