Centinela · Design System

Catálogo navegable de tokens y componentes canónicos. Esto es el "Storybook" del proyecto: si vas a diseñar o codear UI nueva, parte de aquí. Si necesitas algo que no existe, propónlo antes de implementarlo.

Fuente de verdad markdown: docs/design-system/

Colores

Brand (Silvano deep teal + mid teal). Escala de grises 50–900 (sustituye los hex Tailwind hardcoded). Status colors con variantes light/bright.

Brand

--deep

#0A4259

Fondo principal panel oscuro

--primary

#11577B

Brand primary, CTAs

--secondary

#5C8A9E

Borders activos, links

--gradient

primary→secondary

Hero, badges destacados

Grays

--gray-50

var(--gray-50)

--gray-100

var(--gray-100)

--gray-200

var(--gray-200)

--gray-300

var(--gray-300)

--gray-400

var(--gray-400)

--gray-500

var(--gray-500)

★ Gris-azulado canónico

--gray-600

var(--gray-600)

--gray-700

var(--gray-700)

--gray-800

var(--gray-800)

--gray-900

var(--gray-900)

Status

--red

var(--red)

Error / danger base

--green

var(--green)

Success / OK

--amber

var(--amber)

Warning

--blue

var(--blue)

Info / link

--emerald

var(--emerald)

Edge healthy

Tipografía

Familia display Red Rose 700 para titulares. Helvetica Neue para body. Escala de 9 tamaños (--text-xs a --text-4xl). Mínimo legible: 12 px.

--text-xs · 11px

Badge / caption. Sólo con peso 600+. Si no, ilegible.

--text-sm · 12px

Texto secundario, labels de tabla. Mínimo legible.

--text-base · 14px

Body por defecto. La mayoría del UI debería usar esto.

--text-md · 15px

Body enfatizado. Controles principales, intros.

--text-lg · 16px

H4 / card title.

--text-xl · 18px

H3 / modal title.

--text-2xl · 22px

H2 · Encabezado de sección.

--text-3xl · 28px

H1 — Red Rose Bold

--text-4xl · 48px

1.234

Spacing

Escala base 4 px. Usa estos tokens en padding, margin, gap. Nunca números mágicos.

--space-1

4 px · gap mínimo

--space-2

8 px · gap pequeño, padding badges

--space-3

12 px · padding inputs

--space-4

16 px · spacing base

--space-5

20 px · padding modal

--space-6

24 px · margin entre cards

--space-8

32 px · page sections

--space-10

40 px · padding hero

--space-12

48 px · bloques distintos

--space-16

64 px · hero spacing

Radius & Shadow

6 radios canónicos, 3 elevaciones de sombra.

Border radius

--radius-sm

4 px

Badges, chips

--radius-md

8 px

★ Default: inputs, botones

--radius-lg

12 px

Cards

--radius-xl

20 px

Modales

--radius-pill

999 px

Pills

--radius-full

50%

Avatars

Shadow

--shadow-sm

Card hover sutil

--shadow-md

Modales, dropdowns

--shadow-lg

Toast, popovers

Buttons

Sistema unificado de 6 variants × 3 tamaños. Sustituye a los 200+ botones con inline styles divergentes.

Variants

Link

Tamaños

Estados

<button class="btn btn-primary">Guardar cambios</button>
<button class="btn btn-secondary">Cancelar</button>
<button class="btn btn-danger btn-sm">Eliminar</button>

Inputs

Form controls canónicos.

Nombre de la finca Aparecerá en el listado de cotos. Provincia Notas Email (con error) Formato de email inválido Cámara activa

Cards

Contenedor canónico para agrupar contenido. Variants: clickable, light (Cotos).

Camera 01

Online

RTSP @ Wavestore. 142 detecciones hoy.

EXTERIOR 2

3 zonas

Hover sobre la card para ver el efecto clickable.

Edge node M4

Offline 4 h

Última telemetría: 2026-05-26 06:12

Badges

Pequeños indicadores de estado.

Online Pendiente Offline 3 alertas Borrador

Tabs

Contenido de la tab activa.

Tables

Sin zebra. Hover sutil. Columnas numéricas alineadas a la derecha.

Cámara	Estado	Detecciones hoy
Camera 01	Online	142
EXTERIOR 2	Online	88
NAVE 1	Lenta	12
FACIAL	Offline	0

Modals

Patrón canónico único. Sin scroll global — sólo el body interno scrollea si el contenido excede el viewport. Backdrop oscuro con blur. ESC + click backdrop cierran.

Toasts

Notificaciones efímeras. Auto-dismiss tras 5 s.

✓Cambios guardados

✗Error de conexión

ⓘCargando estadísticas…

Empty states

Cuando una lista, tabla o tab está vacía, NUNCA dejar silencio. Mostrar contexto + CTA.

📭

Sin grabaciones todavía

Cuando una cámara grabe, aparecerá aquí.

Antes / Después

Ejemplos concretos de mejoras en uso real del panel actual.

Botón inline → componente canónico

❌ Antes (inline hardcoded)

<button style="padding:8px 14px;
background:var(--emerald);color:white;border:none;
border-radius:6px;font-size:13px;
cursor:pointer;">Guardar</button>

✓ Después (canónico)

<button class="btn btn-primary">
  Guardar cambios
</button>

Texto pequeño ilegible → tamaño mínimo legible

❌ Antes (font-size: 12px)

Última actualización: hace 3 minutos · Polling cada 30 s · Próximo check en 14 segundos

10 px sobre fondo claro y color var(--gray-300) (gray-300) → contraste 1.4 : 1, invisible.

✓ Después (12 px, --gray-600)

Última actualización: hace 3 minutos · Polling cada 30 s · Próximo check en 14 segundos

12 px + gray-600 → contraste 7.5 : 1 sobre fondo claro. Legible.

Modal con scroll del documento → body interno scrollea

❌ Antes (scroll global)

<div class="modal" style="
  height: 800px;  /* no cabe en viewport */
  overflow: auto;
">...</div>

Body de la página entera scrollea junto al modal. Pierdes contexto al desplazarte.

✓ Después (sólo modal-body scrollea)

<div class="modal">
  <header class="modal-header">...</header>
  <div class="modal-body">
    /* SÓLO esto scrollea */
  </div>
  <footer class="modal-footer">...</footer>
</div>

Modal header y footer siempre visibles. Sólo el contenido interno scrollea cuando es largo.