01 — Context & Goals
Un sistema que escala sin romper
NovaSaaS utiliza este sistema de diseño para entregar una experiencia coherente entre dashboard, mobile y email. El design token es la única fuente de verdad: nunca hard-codees un color, un espaciado o un radio de borde.
02 — Design Tokens · Color
Paleta de color
Todos los valores deben referenciarse via token CSS. Nunca usar hex directamente en componentes.
primary --color-primary · #C800DF
secondary --color-secondary · #E60076
brand gradient primary → secondary
success --color-success · #16A34A
warning --color-warning · #D97706
danger --color-danger · #DC2626
surface-1 --color-surface-1 · #18181F
03 — Design Tokens · Typography
Escala tipográfica
Jost (principal + display) + Overpass Mono (labels de sistema, código). Desktop-first, expressive scale.
Display / H1
Automatiza tu empresa
H2 Section
Sistema de diseño v1.0
H3 Card Title
Métricas de rendimiento
Body MD
El texto de cuerpo debe mantenerse legible y limpio. Mínimo 4.5:1 de contraste sobre cualquier fondo. Nunca usar font-weight menor de 400 para texto largo.
Label Caps
ESTADO ACTIVO · MÉTRICAS
Code / Mono
const revenue = 142_308; // EUR
04 — Componentes · Button
Botones
Min-height 44px (touch target WCAG). Focus visible obligatorio. Gradient solo en primary; el resto usa color plano o borde.
Variantes
Comenzar ahora
Ver demo
Cancelar
Eliminar
Deshabilitado
Tamaños
Pequeño
Medio (default)
Grande
05 — Componentes · Badge (Status)
Badges de estado
Siempre usar fondo + borde del mismo color semántico. Overpass Mono garantiza lectura en dashboards densos.
Archivado
06 — Componentes · Input
Campos de formulario
Estado focus con outline de 3px a color-primary-focus (transparencia 20%). Error refuerza borde sin depender solo del color.
07 — Layout · Bento Grid Dashboard
Dashboard de NovaSaaS
Grid de 12 columnas. Hero 8 col × 2 row; sidebar 4 col × 2 row; métricas en celdas de 3 col.
Ingresos acumulados · Junio 2026
€ 142.308
+18,4% vs. mes anterior
Actividad reciente
MG
María G. aprobó factura #4821
hace 3 min
JR
Agente IA procesó 47 contratos
hace 12 min
AL
Nuevo cliente: Iberdrola FS
hace 28 min
BI
Informe semanal generado
hace 1h
PQ
Alerta: latencia API +120ms
hace 2h
Usuarios activos
2.847
↑ 318 este mes
Procesos auto.
98.231
↑ 6.4k hoy
Ahorro estimado
€84k
↑ vs. manual
Cuota de módulos · Junio
Facturación automática 8.420 / 10.000
Extracción de contratos IA 3.100 / 5.000
Alertas y reportes 241 / 500
Acciones rápidas
+ Nuevo agente
Ver informes
Gestionar equipo
Configuración API
08 — Accesibilidad · WCAG 2.2 AA
Criterios de accesibilidad
Cada componente debe superar estas comprobaciones antes de merge. Semántica HTML primero; ARIA solo cuando sea necesario.
✓
Contraste texto normal ≥ 4.5:1 (WCAG 1.4.3)
✓
Contraste texto grande ≥ 3:1 (WCAG 1.4.3)
✓
Focus-visible en todos los interactivos (WCAG 2.4.7)
✓
Touch target mínimo 44×44 px (WCAG 2.5.5)
✓
No depender solo de color para transmitir info (WCAG 1.4.1)
✓
Labels descriptivos en todos los inputs (WCAG 1.3.1)
✓
Navegación completa por teclado (WCAG 2.1.1)
✓
Respeto de prefers-reduced-motion (WCAG 2.3.3)
✓
Mensajes de error con texto, no solo icono (WCAG 3.3.1)
✓
Soporte high-contrast mode del SO (WCAG 1.4.6)
09 — Anti-patrones prohibidos
Lo que nunca debes hacer
Estas implementaciones serán bloqueadas en code review.
✗ NO hacer
color: #C800DF;
Hard-codear valores hex sin token. Si cambia la paleta, hay que buscar en todo el codebase.
✓ SÍ hacer
color: var(--color-primary);
Siempre token CSS. Un solo cambio en :root lo actualiza en toda la app.
✗ NO hacer
outline: none;
Eliminar el outline de foco hace la app inutilizable para usuarios de teclado y lectores de pantalla.
✓ SÍ hacer
:focus-visible { outline: 2px solid var(--color-primary); }
Focus solo visible al navegar por teclado; no interfiere con el uso con ratón.
✗ NO hacer
Padding menor de 10px en botones o inputs. Los touch targets quedarán por debajo de 44px.
✓ SÍ hacer
Usar min-height: 44px + padding proporcional. Siempre supera el umbral WCAG 2.5.5.
10 — Implementación · CSS Tokens
Referencia de tokens
Copia este bloque en el :root de tu hoja de estilos global. Agrega el bloque [data-theme="light"] para el toggle.
/* ── NovaSaaS Design Tokens v1.0 ─────────────────── */
:root {
/* brand */
--color-primary : #C800DF ;
--color-secondary : #E60076 ;
/* semantic */
--color-success : #16A34A ;
--color-warning : #D97706 ;
--color-danger : #DC2626 ;
/* surfaces (dark default) */
--color-bg : #0A0A0F ;
--color-surface-1 : #18181F ;
--color-surface-2 : #1E1E28 ;
--color-border : #2E2E3A ;
/* text */
--color-text-primary : #F0F0FA ;
--color-text-secondary : #9898B2 ;
--color-text-muted : #5C5C74 ;
/* spacing */
--space-2 : 8px ; --space-4 : 16px ; --space-6 : 24px ; --space-8 : 32px ;
/* radii */
--radius-sm : 4px ; --radius-md : 8px ; --radius-xl : 16px ;
/* fonts */
--font-primary : 'Jost', system-ui, sans-serif ;
--font-mono : 'Overpass Mono', monospace ;
}
/* light mode override */
[data-theme ="light "] {
--color-bg : #F8F8FC ;
--color-surface-1 : #FFFFFF ;
--color-border : #D8D8E8 ;
--color-text-primary : #111827 ;
--color-text-secondary : #4B4B6B ;
}