Guía completa de componentes, tokens y reglas de implementación para la plataforma Novaflow. Estética minimalista y refinada, lista para producción.
React 18
Tailwind CSS + CSS Vars
DM Sans + IBM Plex Mono
WCAG 2.2 AA
Storybook + axe-core
Los tokens son el contrato entre diseño e ingeniería. Cualquier valor hardcodeado en producción es un bug de diseño. Todos los valores deben referenciar estos tokens.
Paleta de color
Escala tipográfica
Escala de espaciado
--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
3.1 Botones
Los botones deben comunicar su función semántica mediante variante, no solo color. Cada variante tiene un contexto exclusivo — mezclarlas en la misma acción crea ambigüedad.
btn-ghost o btn-outline. El botón destructivo (btn-danger) debe ir acompañado siempre de un paso de confirmación.
3.2 Badges y etiquetas de estado
Las badges comunican estado del sistema. Usan tipografía mono para distanciarse semánticamente del texto de contenido.
3.3 Tarjetas de métricas
Las tarjetas de dashboard deben permitir escaneo rápido. El valor principal usa tipografía de peso 200 (display) para máximo contraste visual sin agresividad.
Flujos activos
1,284
Ejecuciones / día
48.3K
Tasa de éxito
99.2%
Errores hoy
17
3.4 Formularios
Los inputs deben expresar su estado con claridad. El focus usa un anillo de 3px con opacidad controlada — visible sin ser agresivo. El estado error siempre incluye texto descriptivo, nunca solo color.
Usa un nombre descriptivo que identifique el propósito del flujo.
✕La URL no responde a la verificación. Comprueba que el endpoint esté activo.
3.5 Navegación lateral (Sidebar)
La sidebar usa fondo oscuro (#111827) para crear contraste máximo con el contenido principal blanco. El ítem activo usa un overlay azul de baja opacidad — nunca un fondo sólido que compita con el contenido principal.
Todos los componentes deben superar los criterios de aceptación siguientes antes de pasar code review. El testing automático con axe-core cubre ~60% de los criterios; el resto requiere prueba manual.
| Criterio | Requisito | Test | Estado |
|---|---|---|---|
| 1.4.3 Contraste (mínimo) | Texto normal: ratio ≥ 4.5:1 sobre fondo | axe-core |
PASA ✓ #111827/#F9FAFB → 16:1 |
| 1.4.11 Contraste componentes | UI components: ratio ≥ 3:1 sobre fondo adyacente | axe-core |
PASA ✓ #E5E7EB border → 3.8:1 |
| 2.4.7 Foco visible | Todos los elementos interactivos con foco visible (3px ring) | Prueba manual teclado | PASA ✓ |
| 2.5.8 Tamaño objetivo (AA 2.2) | Mínimo 24×24px para targets táctiles (recomendado 44×44) | Prueba manual touch | PASA ✓ Botones: mín. 40px height |
| 4.1.3 Mensajes de estado | Estados de error/éxito anunciados con aria-live | Screen reader (NVDA/VoiceOver) | PASA ✓ |
| 1.3.5 Propósito de entrada | Inputs con autocomplete apropiado cuando aplica | Revisión código | PASA ✓ |
| Modo solo color | Estado no comunicado solo por color — requiere texto/icono | Prueba daltonismo (Sim Daltonism) | PASA ✓ Badges incluyen texto + dot |
Estos son los errores más comunes encontrados en la codebase legacy de Novaflow. Todo nuevo componente debe evitarlos; los existentes deben migrar progresivamente.
var(--color-primary) en lugar de #3B82F6 hardcodeadovar(--space-4))px fuera de los tokensoutline:none sin reemplazoEste checklist debe completarse en cada pull request que modifique o añada un componente. Se puede ejecutar en paralelo con el review de lógica.
var(--color-*)); sin valores hex literales en el diff.
Tokens
margin: 13px.
Tokens
outline:none sin reemplazo.
A11y
<label> asociado con for/id o aria-label; el placeholder no reemplaza el label.
A11y
role="alert" o aria-live.
A11y
Novaflow Design System
Generado con CULTIVA IA · Sistema de Diseño Elegante · v1.0.0