Sistema de Diseno Corporativo
NexusFlow Design System
Guia definitiva de diseno enterprise para el producto web. Tokens, componentes, accesibilidad WCAG 2.2 AA y criterios de calidad listos para implementar en React + Tailwind CSS.
01
Design Tokens & Paleta de Color
Los tokens son la fuente de verdad del sistema. Todos los valores deben referenciarse a traves de tokens semanticos, nunca valores raw. Esto garantiza consistencia en el producto y simplifica el mantenimiento del dark mode en Fase 2.
Color
--color-primary
#3B82F6
Accion principal
--color-primary-dark
#2563EB
Hover / activo
--color-secondary
#8B5CF6
Accion secundaria
--color-success
#16A34A
Exito / positivo
--color-warning
#D97706
Advertencia
--color-danger
#DC2626
Error / destructivo
--color-text
#111827
Texto principal
--color-text-secondary
#6B7280
Texto secundario
/* tokens.css */
:root {
--color-primary: #3B82F6; /* blue-500 */
--color-primary-dark: #2563EB; /* blue-600 - hover */
--color-secondary: #8B5CF6; /* violet-500 */
--color-success: #16A34A; /* green-600 */
--color-warning: #D97706; /* amber-600 */
--color-danger: #DC2626; /* red-600 */
--space-1: 8px; /* 8pt baseline */
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--radius-md: 8px;
}
02
Tipografia
Escala desktop-first con 3 familias: Poppins para headings y display, Open Sans para cuerpo e interfaz, IBM Plex Mono para datos, codigos y etiquetas tecnicas. Todos los pesos del 100 al 900 estan disponibles.
display / h1
Poppins · 800 · 3rem / 1.15
Automatiza. Conecta.
h2 / section
Poppins · 700 · 1.75rem / 1.25
Gestion de flujos de trabajo
h3 / card title
Poppins · 600 · 1.125rem / 1.4
Automatizacion de aprobaciones
body-md
Open Sans · 400 · 1rem / 1.65
Los flujos de aprobacion de NexusFlow permiten reducir el tiempo de procesamiento en un 67% sin necesidad de codigo.
body-sm / label
Open Sans · 500 · 0.875rem / 1.5
Nombre del flujo de trabajo
label-caps / meta
IBM Plex Mono · 600 · 0.68rem · CAPS
ESTADO DEL WORKFLOW · ID-4829
03
Espaciado — Grid 8pt
Sistema de espaciado basado en multiplos de 8px. Todos los margenes, paddings y gaps deben ser multiplos de 8. No usar valores arbitrarios (11px, 13px, 17px). Esto garantiza alineacion visual consistente en todos los dispositivos.
--space-1
8px · XS (gap interno, icon padding)
--space-2
16px · SM (padding componente, gap filas)
--space-3
24px · MD (padding card, gap secciones)
--space-4
32px · LG (margin entre grupos)
--space-5
40px · XL (separacion de bloques)
--space-6
48px · 2XL (padding de pagina)
--space-8
64px · 3XL (separacion de secciones)
06
Badges & Status Indicators
Los badges comunican el estado de flujos, tareas y aprobaciones. Nunca usar solo color para transmitir estado: incluir siempre el dot indicator + texto. El color refuerza el mensaje pero no es el unico canal.
Status badgesEstados de flujo
Activo
Pendiente
Error
En revision
Borrador
| Token | Uso | Cuando NO usar |
|---|
| success | Flujo activo, aprobacion completada, pago procesado | Progreso en curso (no es exito aun) |
| warning | Aprobacion pendiente, accion requerida, SLA en riesgo | Errores criticos (usar danger) |
| danger | Flujo fallido, error de integracion, acceso denegado | Advertencias leves (usar warning) |
| primary | En revision, procesando, estado intermedio activo | Exito definitivo o error |
| neutral | Borrador, archivado, inactivo por eleccion del usuario | Estados que requieren atencion |
07
Cards KPI
Las cards de KPI son el elemento central del dashboard de operaciones. Deben mostrar valor, tendencia y contexto en menos de 3 segundos de lectura. El valor numerico usa font-display para jerarquia visual inmediata.
247
⬆ +18% vs mes anterior
94,2%
⬆ +2,1pp este trimestre
1,3h
⬇ -67% vs proceso manual
08
Tablas de Datos
Las tablas son el componente de mayor densidad informativa en NexusFlow. Header fijo en scroll largo, zebra striping desactivado por default (usar hover), y alineacion numerica a la derecha con font-mono para comparabilidad.
| Flujo de trabajo |
Responsable |
Departamento |
Estado |
Ejecuciones |
SLA |
Aprobacion facturas Q3
WF-1829 |
|
Finanzas |
Activo |
1.247 |
Cumplido |
Onboarding empleados
WF-0934 |
|
RRHH |
Activo |
389 |
Cumplido |
Revision de contratos
WF-2201 |
|
Legal |
Pendiente |
52 |
En riesgo |
Sincronizacion ERP
WF-0411 |
|
IT |
Error |
0 |
Incumplido |
09
Accesibilidad WCAG 2.2 AA
La accesibilidad no es opcional en NexusFlow: los usuarios enterprise incluyen IT Admins con diversidad funcional y entornos corporativos con politicas de accesibilidad. Cumplir WCAG 2.2 AA es requisito contractual.
🔍
Focus visible
Todos los elementos interactivos must mostrar anillo de foco 3px con offset 2px. No usar outline:none sin alternativa visible.
SC 2.4.11 - Enhanced Focus
🎯
Contraste de color
Texto normal: ratio minimo 4.5:1. Texto grande (+18px bold): 3:1. Componentes UI: 3:1 frente al fondo.
SC 1.4.3 - Contrast (AA)
⌨
Navegacion por teclado
Todos los flujos criticos (crear, aprobar, rechazar) deben completarse sin raton. Tab order logico y coherente con el flujo visual.
SC 2.1.1 - Keyboard
💬
HTML semantico
Usar elementos HTML nativos antes que ARIA. button en vez de div[role=button]. nav, main, header obligatorios como landmarks.
SC 4.1.2 - Name, Role, Value
📱
Touch targets
Min 44x44px para todos los elementos interactivos en tablet (iPad). Respetar en versiones movil de la aplicacion.
SC 2.5.8 - Target Size (AA)
🎥
Reduced motion
Respetar prefers-reduced-motion. Animaciones de entrada (skeleton, spinners) deben desactivarse o reducirse drasticamente.
SC 2.3.3 - Animation
Ratios de contraste verificados
Texto blanco sobre primary (#3B82F6)
3.0:1 — UI grandes
Texto blanco sobre primary-dark (#2563EB)
4.8:1 — AA ✔
Texto oscuro sobre superficie (#111827 / #FFF)
19.1:1 — AAA ✔
Texto secundario sobre superficie (#6B7280 / #FFF)
4.6:1 — AA ✔
10
Anti-patrones Prohibidos
Los anti-patrones son errores recurrentes detectados en revisiones de codigo que degradan la consistencia visual y la accesibilidad. Este listado es vinculante en code review.
Usar colores raw en lugar de tokens
color: #3B82F6; /* PROHIBIDO */
Referenciar siempre el token semantico
color: var(--color-primary);
Mostrar errores solo con color rojo
<input style="border:red"> sin icono ni texto
Error = color + icono + texto explicativo
aria-invalid + aria-describedby + mensaje
Espaciado arbitrario fuera del grid
margin-top: 13px; padding: 11px 17px;
Multiplos de 8pt siempre
margin-top: var(--space-2); /* 16px */
Multiple botones primary en la misma pantalla
<btn-primary> Guardar </> <btn-primary> Publicar </>
Una sola accion primaria por contexto
<btn-primary> Guardar </> <btn-ghost> Cancelar </>
outline:none en elementos con foco
:focus { outline: none; } /* PROHIBIDO */
Foco visible siempre presente
:focus-visible { box-shadow: 0 0 0 3px ... }
Labels flotantes sin fallback accesible
placeholder como unico label del campo
Label visible siempre encima del input
<label for="id"> + <input id="id">
11
Checklist QA — Code Review
Este checklist must ejecutarse en todo Pull Request que modifique componentes UI. Los items CRITICO bloquean el merge. Los HIGH deben resolverse en el mismo PR. Los MEDIUM pueden quedar como tech-debt trackeado.
🟥 Accesibilidad — bloqueante
Todos los botones y controles tienen label accesible (aria-label o texto visible)
CRITICO
Focus-visible implementado en todos los elementos interactivos. Sin outline:none sin alternativa.
CRITICO
Ratio de contraste verificado con herramienta (axe DevTools o similar). Min 4.5:1 texto normal.
CRITICO
Errores de formulario comunicados por aria-invalid + aria-describedby + mensaje de texto visible.
CRITICO
🟧 Tokens & Diseno — alta prioridad
Ningun valor de color hardcodeado. 100% referencias a tokens CSS (--color-*, --space-*).
HIGH
Todos los espaciados son multiplos de 8px (verificar padding/margin/gap en DevTools).
HIGH
Solo un btn-primary por pantalla o seccion de formulario. Resto usar secondary/ghost.
HIGH
Tipografia usa exclusivamente Poppins (headings) / Open Sans (body) / IBM Plex Mono (data).
HIGH
🟦 Comportamiento & UX
Botones tienen estado loading implementado para operaciones async (+500ms).
MEDIUM
Tablas con mas de 10 filas tienen paginacion o scroll virtualizado implementado.
MEDIUM
Estados vacios (empty state) diseñados con ilustracion + CTA para componentes de lista y tabla.
MEDIUM
Componentes respetan prefers-reduced-motion (animaciones se desactivan o reducen).
MEDIUM
📌
Generado con CULTIVA IA · Sistema de Diseno Corporativo v1.0
Guia de design system enterprise para NexusFlow SaaS. Stack: React + Tailwind CSS. Estandar: WCAG 2.2 AA. Proximo: dark mode tokens (Fase 2) + Storybook export.