Human Interface Guidelines
Design
The BookOS visual language, live. A real test bench: flip toggles, open dialogs and menus, switch between light and dark. It's all fake — it's here so you can feel the aesthetic before building with it.
👆 Touch anything. None of this saves a thing.Color · tokens
Radii
Typography
Icons · two systems
Sistema A
Solid fill, brand color. Sidebar and apps. 30px.
Sistema B
Stroke (Heroicons Outline / Lucide), currentColor. Inside rows and buttons.
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.