Design System · Flowdesk v1.0

Build with
Purple-First consistency

Tokens, components y guias de accesibilidad implementados para el stack React + Tailwind de Flowdesk. Developer-first, WCAG 2.2 AA.

38
Tokens
12
Componentes
AA
WCAG 2.2
6
Type sizes
Preview en Vivo Dashboard Real
Workflows
Executions
Logs
Settings
Workflows Overview
All systems operational
Active Workflows
247
+12 this week
Executions / 24h
18.4k
+8.3%
Success Rate
99.2%
+0.4pp
Avg Latency
124ms
+3ms
Executions by workflow type
API Trigger
84%
Scheduled
61%
Webhook
43%
Manual
22%
Executions last 7 days
Design Tokens — Color Capa Semántica
Primary
--color-primary
✓ 4.5:1 sobre white
Secondary
--color-secondary
⚠ Solo decorativo
Primary Subtle
--color-primary-subtle
Fondos de chips/hover
Success
--color-success
✓ 4.6:1 sobre white
Warning
--color-warning
⚠ Usar en dark bg
Danger
--color-danger
✓ 4.9:1 sobre white
Text
--color-text
✓ 21:1 sobre white
Border
--color-border
Separadores sutiles
CSS Custom Properties 
:root {
  /* Semantic color tokens — nunca usar hex directo en componentes */
  --color-primary:         #9333ea;  /* purple-600 */
  --color-primary-hover:   #7c22d1;  /* purple-700 */
  --color-primary-subtle:  #f3e8ff;  /* purple-100 */
  --color-secondary:       #a855f7;  /* purple-500, solo decorativo */
  --color-success:         #10b981;
  --color-warning:         #f59e0b;
  --color-danger:          #ef4444;
  --color-surface:         #ffffff;
  --color-text:            #09090b;
  --color-focus-ring:      rgba(147, 51, 234, 0.4);
}
Tipografía Inter + JetBrains Mono
display-2xl
Inter · 32px · 800
Workflow Automation
display-xl
Inter · 24px · 700
247 Active Workflows
heading-lg
Inter · 20px · 700
Executions Overview
body-base
Inter · 16px · 400
Configure your workflow triggers, actions and conditional logic to automate your team's operations.
body-sm
Inter · 14px · 400
Last execution completed 2 minutes ago · 18,432 runs in the last 24h
label-caps
JetBrains Mono · 12px · 600
WORKFLOW_ID · EXECUTION_STATUS · LATENCY_P99
Regla: usar font-weight 800 solo en valores numéricos de stats (métricas KPI). Para headings de sección, máximo 700. No usar weights <400 en texto funcional.
Componentes — Button 6 variantes · 3 tamaños
Variantes principales
Tamaños
Estados
Badges Status indicators
Semantic
Running Completed Pending Failed Paused
Sin dot (label puro)
v2.4.1 MIT Prod Beta
✖ MUST NOT: usar badge-warning para acciones de error. Solo para estados "atencion requerida, no urgente".
Input Form controls
Visible en el dashboard y en logs.
Debe ser un entero ≥ 0.
Tabla de Datos Anatomy + estados
Workflow Trigger Última ejecución Ejecuciones 24h Latencia avg Estado
Lead → CRM sync API_TRIGGER hace 2 min 4,231 89ms Active
Invoice → Slack notify WEBHOOK hace 18 min 1,087 134ms Active
Nightly DB backup CRON_0_3_*_* ayer 03:00 1 4,220ms Running
Email drip sequence SCHEDULED hace 3h 842 211ms Retrying
Churn prediction MANUAL hace 2 días 0 — Paused
Inventory alert WEBHOOK hace 5 min — timeout Failed
Espaciado Scale: 4·8·12·16·24·32
--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-6 24px
--space-8 32px
Regla: usar solo valores del scale para padding y margin. No usar valores intermedios (ej. 10px, 20px). Excepcion: valores de icono intrinsecos (18px, 20px, 24px fixed).
Accesibilidad WCAG 2.2 AA · Testable
Focus ring
btn:focus-visible
input:focus
Nav link a:focus-visible
Rule: outline: 2px solid rgba(147,51,234,0.4); outline-offset: 2px; en todos los elementos interactivos. No usar box-shadow como unico indicador de foco.
Contraste (WCAG 2.2 AA)
Primary text on purple 4.5:1 ✓
Purple text on subtle 5.2:1 ✓
Secondary text on surface 5.9:1 ✓
Tertiary text — placeholders 2.3:1 ✖
* Tertiary solo permitido en placeholders (no texto funcional). Usar --color-text-secondary (5.9:1) para labels.
Anti-Patrones Deuda tecnica visual
✖ Prohibido
Color directo sin token:
color: #9333ea; — si el brand color cambia, habra que buscar todos los usos.

Espaciado arbitrario:
padding: 10px 18px; — rompe el ritmo del grid. Usar --space-3 --space-4.

Badge-warning para errores:
Usar badge-danger cuando la accion fallara o ha fallado. Warning = "atencion, puede continuar".

Texto sobre color-secondary:
#a855f7 no supera 4.5:1 sobre blanco. Solo decorativo (bordes, gradientes).
✓ Correcto
Siempre tokens semánticos:
color: var(--color-primary); — cambio global en un lugar.

Scale de espaciado:
padding: var(--space-3) var(--space-4); — coherente con el ritmo visual.

Semántica de estado:
badge-danger para fallo, badge-warning para alerta recuperable, badge-success para completado.

Color-primary para texto interactivo:
#9333ea sobre blanco = 4.5:1 AA. Para texto body usar --color-text (#09090b = 21:1).
✖ Sidebar oculta
No anadir sidebar en este producto. El layout es top-bar only. Si la navegacion crece, agrupar en dropdowns del topbar o en una segunda fila condensada.

Anadir sidebar rompe el modelo mental del usuario y crea inconsistencia de layout entre rutas.
✓ Topbar navigation
Navegacion principal en topbar horizontal. Maximo 6 items visibles; resto en menu "More" con dropdown.

Item activo: background: --color-primary-subtle; color: --color-primary;
Item hover: background: --color-surface-overlay;

Focus-visible en cada nav-link: outline: 2px solid --color-focus-ring;
QA Checklist Code Review Gate
Tokens & Visual
  • Todos los colores usan custom properties (--color-*), sin hex en componentes
  • Espaciado exclusivo del scale: 4/8/12/16/24/32px
  • Tipografia usa font-weight correcto segun nivel (H1=800, H2=700, body=400/500)
  • Cards tienen shadow-sm por defecto; no usar shadow en hover de elementos en cards
  • No existe ninguna sidebar; layout es top-bar only
Accesibilidad & Interaccion
  • Todos los botones tienen :focus-visible con --color-focus-ring (outline, no solo shadow)
  • Inputs en error tienen aria-describedby apuntando al mensaje de error
  • Badges con dot no comunican estado solo por color (+ texto siempre presente)
  • Botones disabled tienen aria-disabled="true" y cursor:not-allowed
  • Contraste minimo 4.5:1 para texto funcional (no placeholder, no decorativo)
Flowdesk Design System v1.0
Generado con CULTIVA IA · Sistema de Diseno Dashboard App (Purple)
WCAG AA React + Tailwind MIT