Sistema de Diseño · Spacious v1.0

Cultiva IA Platform Design System

Guía de referencia para diseñadores y desarrolladores del panel de gestión de campañas IA. Espaciado generoso, tipografía escalada y tokens de color accesibles.

v1.0.0 WCAG 2.2 AA 8pt Grid
01

Tokens de Color

Primary
--color-primary
#3B82F6
Secondary
--color-secondary
#8B5CF6
Success
--color-success
#16A34A
Warning
--color-warning
#D97706
Danger
--color-danger
#DC2626
Text
--color-text
#111827
Background
--color-bg
#F9FAFB
Sidebar
--color-sidebar-bg
#0F172A
02

Tipografía

Display / H1
Montserrat 800
Campañas IA
36px / 2.25rem
Heading / H2
Montserrat 700
Panel de Control
30px / 1.875rem
Subheading / H3
Montserrat 600
Agentes Activos
24px / 1.5rem
Body Large
Open Sans 400
Revisa el rendimiento de tus campañas en tiempo real.
18px / 1.125rem
Body Default
Open Sans 400
El agente de contenido generó 48 publicaciones esta semana con un CTR promedio del 3,4%.
16px / 1rem
Body Small
Open Sans 400
Última sincronización: hace 3 minutos · Próxima ejecución: 14:30
14px / 0.875rem
Mono / Label
IBM Plex Mono 500
TOKEN · VALOR · ESTADO · API_KEY_PROD
12px / 0.75rem
03

Espaciado — Grid de 8pt

--space-1
8px
--space-2
16px
--space-3
24px
--space-4
32px
--space-5
40px
--space-6
48px
--space-8
64px
--space-10
80px
--space-12
96px
04

Botones

Variantes min-height 44px
Primary · Secondary · Ghost · Danger
Tamaños
Default (44px) · Small (32px)
Estados
Default · Focus · Disabled
Con icono / Loading
Soporte de estado intermedio
05

Badges de Estado

Estados del sistema de agentes
Semántica: color + punto + etiqueta en mayúscula mono · IBM Plex Mono 11px
Activo En Progreso Pausado Error Borrador
06

Tarjetas KPI

📈
Campañas Activas
24
▲ +3 esta semana
🤖
Agentes IA
8
▲ 100% uptime
💬
Contenidos Generados
1.247
▲ +18% vs mes anterior
07

Campos de Texto

Estado Default
Border #E5E7EB · min-height 44px
Nombre visible en el panel. Máximo 80 caracteres.
Estado Error
Border danger · mensaje descriptivo
⚠ Introduce una URL válida con https://
Estado Éxito
Validación positiva visible
✓ Dominio verificado correctamente
Deshabilitado
Opacity 0.4 · cursor not-allowed
Cambia el plan para editar este campo.
09

Dashboard Demo — Vista Completa

Principal
▦Dashboard
🤖Agentes
📊Campañas
✍Contenido
📈Analytics
Cuenta
⚙Ajustes
💬Soporte
Dashboard
Campañas Activas
24
▲ +3 esta semana
Agentes IA
8
▲ 100% uptime
Contenidos
1.247
▲ +18% vs mes ant.
Agentes en Ejecución
8 agentes
Agente Tipo Estado Últ. ejecución Resultados
Redactor de Blogs
 Contenido Activo Hace 12 min 48 posts
Social Media Manager
 Social Activo Hace 5 min 312 posts
Analizador SEO
 SEO En Progreso Ahora 87 URLs
Email Nurture
 Email Pausado Hace 2 h 1.024 envíos
Ad Copy Generator
 Paid Ads Error Hace 1 h API timeout
10

Accesibilidad — WCAG 2.2 AA

🎹
Keyboard-first
Todos los controles deben ser alcanzables y operables solo con teclado. Focus visible obligatorio: outline: 3px solid #3B82F6, offset: 2px.
🔲
Contraste mínimo 4.5:1
Texto sobre fondo: #111827 / #F9FAFB → ratio 17.1:1. Primary sobre blanco: ratio 4.6:1. Verificar con axe o Contrast Checker.
📐
Touch targets ≥ 44px
Todos los botones, ítems de navegación e inputs deben tener min-height: 44px y min-width: 44px.
🏷
HTML semántico antes que ARIA
Usar <button>, <nav>, <label> nativos. ARIA solo cuando no existe elemento nativo equivalente.
🎞
Reduced Motion
Envolver todas las animaciones en @media (prefers-reduced-motion: no-preference). Nunca usar motion decorativo sin esta guarda.
📢
Labels descriptivos
Evitar etiquetas ambiguas como "Haz clic aquí". Cada acción debe describir su resultado: "Exportar informe CSV" es correcto, "Exportar" sólo si el contexto es inequívoco.
11

Anti-patrones Prohibidos

✗ No hacer
Usar texto con bajo contraste sobre fondos claros.
color: #9CA3AF; background: #F9FAFB;
/* ratio: 2.8:1 — FALLA WCAG */
✓ Hacer
Usar el token --color-text o --color-text-secondary que garantizan contraste ≥ 4.5:1.
color: #111827; background: #F9FAFB;
/* ratio: 17.1:1 — PASA WCAG AA */
✗ No hacer
Espaciado irregular: mezclar valores arbitrarios como 10px, 13px, 22px.
padding: 10px 13px; margin: 22px;
/* rompe el ritmo visual */
✓ Hacer
Siempre usar tokens de espaciado de la escala 8pt.
padding: var(--space-2) var(--space-3);
margin: var(--space-3);
✗ No hacer
Botones con hit area pequeña (< 44px) o sin estado focus visible.
button { height: 28px; outline: none; }
/* inaccesible en teclado y touch */
✓ Hacer
Botones con min-height 44px y focus-visible explícito con el token primary.
button { min-height: 44px; }
button:focus-visible { outline: 3px solid var(--color-primary); }
✗ No hacer
Mezclar múltiples metáforas visuales: gradientes, sombras fuertes, colores saturados y bordes gruesos en el mismo componente.
/* border-radius: 20px + shadow-2xl
+ gradient bg + border 3px solid */
/* demasiada decoración */
✓ Hacer
Elegir una única metáfora por nivel de jerarquía (solo sombra en cards, solo borde en inputs, solo color en badges).
/* Card: shadow-sm + border-color */
/* Input: border solo, sin sombra */
/* Badge: color + punto, sin borde */
12

QA Checklist — Code Review

Tokens y Fundamentos
✓
Todos los colores usan variables CSS (--color-*), sin valores hardcoded
✓
Espaciado usa exclusivamente --space-* de la escala 8pt
✓
Tipografía usa los tres stacks: Montserrat, Open Sans, IBM Plex Mono
✓
Border-radius usa --radius-sm / md / lg / xl
✓
Sombras usan --shadow-sm / md / lg / xl
Componentes
✓
Todos los botones tienen min-height: 44px
✓
Existe estado :focus-visible con outline de 3px en todos los interactivos
✓
Inputs tienen estado default, hover, focus, error, success y disabled
✓
Badges de estado usan color + punto + texto en mayúsculas mono
✓
KPI cards muestran valor, label, tendencia y acento de color superior
Accesibilidad
✓
Contraste texto/fondo ≥ 4.5:1 verificado con axe DevTools
✓
Navegación completa posible solo con teclado (Tab + Enter + Space + Esc)
✓
Todos los inputs tienen <label> asociado con for/id
✓
Animaciones dentro de @media (prefers-reduced-motion: no-preference)
✓
HTML semántico (<nav>, <main>, <section>, <header>) correctamente anidado
Contenido y Tono
✓
Labels de botones describen la acción completa, no verbos vagos ("Guardar campaña", no solo "Guardar")
✓
Mensajes de error explican el problema y la solución ("Introduce una URL con https://")
✓
Estados vacíos, loading y error implementados en todos los componentes que cargan datos
✓
Tono: conciso, confiado, amigable, sin jerga técnica innecesaria
✓
Etiquetas de categorías/secciones en mayúsculas IBM Plex Mono, 10-12px, letter-spacing 0.08em