Design system
Fundamentos visuales de Guard-IA. Dirección: Clinical Security Command Center — sobrio, tecnológico y premium.
v1
Paleta y tokens
Superficies
basesurfacesurface-raisedsurface-overlaylineline-strongTexto
inkink-softink-mutedink-faintMarca
brandbrand-strongaccentSemánticos operativos
ok (normal)watch (observación)warn (alerta)crit (crítico)Tipografía
Centro de mando
text-2xl / boldTítulo de sección
text-base / semiboldCuerpo de texto legible en tablet y laptop.
text-smEtiqueta eyebrow
label-eyebrow1,248
stat-num · mono tabularBotones
Estados semánticos
NormalObservaciónAlertaCríticoBrand
Controles
Interruptores y segmentos
Interruptor activo
68%
92%
Avatares y métricas
Alertas
7
Cámaras
17
Componentes de identidad
REC · CAM-DEMO-01
Demo
REC · CAM-DEMO-02
DemoObservación
persona · 78%
REC · CAM-DEMO-03
DemoAlerta
persona · 93%
REC · CAM-DEMO-04
DemoCrítico
Esta página corresponde a docs/DESIGN_SYSTEM.md. Los componentes que definen la identidad del producto (mapas, cámaras, alertas, incidentes) son propios; los primitivos de interacción se construyeron a medida sobre estos tokens.