smwatcher
Design System
Protección de marca · construido sobre Manguifera (tema Empresa)
v1

Colores

Marca, neutrales y semánticas del producto
Marca · acento
brand
#395073
hover
#21385f
pressed
#08214b
soft
#e6ebff
accent
#0bc7c1
Neutrales · 0 → 1000
0150 (fondo)900 (texto)1000
Severidad
AltaMediaBaja
Sentimiento
NegativoNeutralPositivo
Estado del ciclo de vida
NuevaEn revisiónResueltaDescartada
Softs decorativos

Tipografía y medida

Montserrat · escala densa de UI
Roles
display 32Protección de marca
h1 24Alertas recientes
title 16Reglas de notificación
body 14Tu plata, simple. Enviá guaraníes al instante.
caption 11r/sysadmin · hace 6 min
kpi 3068%

Spacing, radios y elevación

Escala lineal · radios · sombras azul-oscuro
Spacing
4
8
12
16
24
32
48
64
Radios
md·8
input·10
card·16
shell·18
pill
Elevación
shadow-1
shadow-2
shadow-3

Componentes

Las primitivas reutilizables de smwatcher
Pill — severidad
AltaMediaBaja
Pill — estado
NuevaEn revisiónResueltaDescartada
Button
Forzar revisión Resolver Marcar en revisión Descartar
Toggle · Badge
Conectado
Desconectado
3 Pronto
KpiCard
Alertas activas
5
3 nuevas sin revisar
Severidad alta
2
requieren atención
Sparkline
AlertCard
Redditr/sysadmin· hace 6 minNueva
AcmeCloud lleva 3 horas caído y el panel ni siquiera carga
SidebarItem
Alertas3
Watches
Toast
Alerta marcada como resuelta

UI kit — Dashboard

Recreación del feed de alertas (modo cuenta de marca)
La app interactiva completa vive en smwatcher.dc.htmlAbrir pantalla completa →
smwatcher Design System · tokens en styles.css · componentes en components/ · guía completa en readme.md