DATAFORGE · Design System · Mono v1.0

Sistema de
Diseño Mono

Guía de implementación para el equipo de producto. Tokens, componentes y normas de accesibilidad WCAG 2.2 AA. Built for engineers, by engineers.

Estética Hacker-chic / Matrix

Densidad Compacta

Accesibilidad WCAG 2.2 AA

Fuentes Space Mono + JetBrains Mono

Modo Dark-first

// 01 — Foundation

Tokens & Fundamentos

El sistema DATAFORGE prioriza la lectura técnica densa: pipelines, métricas, logs. Los tokens garantizan consistencia visual sin sacrificar legibilidad ni accesibilidad.

CSS Custom Properties

/* ─── DATAFORGE DESIGN TOKENS v1.0 ─── */
:root {
  /* Color — semantic tokens */
  --color-primary:   #37F712;  /* Matrix green — CTAs, links activos */
  --color-secondary: #00A6F4;  /* Cyan — métricas, datos */
  --color-success:   #00A63D;  /* Pipeline OK */
  --color-warning:   #FE9900;  /* Latencia alta, retries */
  --color-danger:    #FF2157;  /* Pipeline FAILED, errores críticos */

  /* Surface */
  --bg-base:   #0A0A0A;
  --bg-panel:  #111111;
  --bg-card:   #181818;
  --border:    #2A2A2A;

  /* Text */
  --text-hi:   #F0EDE8;  /* Headings, datos primarios */
  --text-mid:  #A09890;  /* Body, descripción */
  --text-lo:   #5A534E;  /* Placeholders, metadatos */

  /* Spacing — compact density */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-pill: 9999px;

  /* Typography */
  --font-ui:   'Space Mono', monospace;
  --font-code: 'JetBrains Mono', monospace;
}

// 02 — Color

Paleta de Color

Paleta de alto contraste. El verde primario (#37F712) actúa como señal de acción. El rojo (#FF2157) es exclusivo para errores críticos — nunca decorativo.

Tokens semánticos

Primary

#37F712

AA sobre #0A0A0A ✓

Secondary

#00A6F4

AA sobre #0A0A0A ✓

Success

#00A63D

AA sobre #0A0A0A ✓

Warning

#FE9900

AA sobre #0A0A0A ✓

Danger

#FF2157

AA sobre #0A0A0A ✓

BG Base

#0A0A0A

Fondo raíz

BG Panel

#111111

Sidebar, header

Text Hi

#F0EDE8

16:1 sobre #0A0A0A ✓

Regla de uso

Danger (#FF2157) debe reservarse exclusivamente para estados de error, destructivos o críticos. No usar como color decorativo ni de acento. Warning (#FE9900) para advertencias y latencias. La combinación decorativa principal es Primary + BG Base.

// 03 — Typography

Tipografía

Dos fuentes monoespacio: Space Mono para UI general y JetBrains Mono para código, logs, y etiquetas técnicas.

Pipeline failed

Token: --text-3xl Size: 48px / 3rem Weight: 700 Font: Space Mono Use: Page title, error hero

DAG: etl_snowflake_v2

Token: --text-2xl Size: 32px / 2rem Weight: 700 Font: Space Mono Use: H2, section headers

Monitor your data pipelines in real time. Get instant alerts when a DAG fails.

Token: --text-base Size: 16px / 1rem Weight: 400 Font: Space Mono Use: Body text

STATUS · LAST RUN · DURATION

Token: --text-xs Size: 12px / 0.75rem Weight: 600 Font: JetBrains Mono Use: Table headers, labels

2026-06-16T08:42:01Z [INFO] task.etl completed in 4.2s

Token: --font-code Size: 12px / 0.75rem Weight: 400 Font: JetBrains Mono Use: Logs, code, timestamps

// 04 — Spacing

Espaciado

Escala de densidad compacta (4px base). Usar siempre tokens, nunca valores arbitrarios.

--sp-1

4px — gap mínimo, dots, separadores inline

--sp-2

8px — padding badge/tag, gap icono-texto

--sp-3

12px — padding button sm, gap fila tabla

--sp-4

16px — padding card, gap entre componentes

--sp-5

20px — padding sidebar item, button md

--sp-6

24px — section gap, card padding mayor

--sp-8

32px — separación entre secciones

--sp-12

48px — padding main content

--sp-16

64px — espaciado entre secciones mayores

// 05 — Components

Buttons

Intent del diseño: los botones deben comunicar la acción con claridad y prioridad. El botón Primary es siempre la acción más importante de la vista.

Variantes

Tamaños

Estados

✓ Do Usar btn-primary para la acción principal de la vista. Un solo Primary por pantalla visible. El texto debe ser un verbo de acción: "Run Pipeline", "Deploy", "Create DAG".

✗ Don't No usar dos btn-primary en la misma row. No usar colores semánticos (danger/success) para acciones neutrales. No etiquetas ambiguas: "Click here", "OK", "Submit".

Badges & Status

Los badges comunican estado de pipeline, job o sistema. Solo semánticos — nunca decorativos.

Running Failed Retrying Queued Paused

WCAG AA v2.1.4 BETA CRITICAL

Form Inputs

Inputs de alta densidad. Label siempre visible (no placeholder como sustituto). Hint y error messages explícitos.

Pipeline name Identificador único. Solo alfanumérico y guión bajo.

Schedule CRON Formato UNIX cron. Ej: 0 6 * * 1-5

Snowflake warehouse Error: Warehouse no encontrado o sin permisos.

API Token Conectado via env variable DATAFORGE_API_KEY

Alerts & Notifications

Cuatro niveles semánticos. Los alerts deben incluir siempre título + mensaje. No usar solo color para transmitir estado.

✓

Pipeline completado

etl_snowflake_daily finalizó en 4m 12s. 847,320 filas procesadas. Próxima ejecución: 2026-06-17 06:00 UTC.

⚠

Latencia elevada detectada

task.transform_events tomó 3.8× más de lo normal. P99 latency: 12.4s (umbral: 4s). Revisa el warehouse Snowflake.

DAG FAILED: ingest_crm_data

ConnectionError: No se pudo conectar a Salesforce API (timeout 30s). Retry 3/3. Alerta enviada a #data-on-call.

ℹ

Mantenimiento programado

El clúster se actualizará a Airflow 2.9 el 2026-06-18 02:00–04:00 UTC. Los DAGs en cola se pausarán automáticamente.

Data Tables

Tablas compactas para visualización de pipelines, runs y métricas. Siempre headers descriptivos + acceso de teclado.

Pipeline	Status	Last Run	Duration	Rows	Schedule
etl_snowflake_daily	Running	2026-06-16 06:00	4m 12s	847,320	0 6 * * *
ingest_crm_data	Failed	2026-06-16 05:45	0m 30s	—	45 5 * * 1-5
transform_events_v3	Retrying	2026-06-16 04:00	12m 04s	1,240,800	0 4 * * *
export_bigquery_weekly	Paused	2026-06-09 07:00	22m 38s	4,523,100	0 7 * * 1
realtime_kafka_ingest	Queued	2026-06-16 08:30	—	—	/30 * * *

// 06 — Accessibility

Accesibilidad WCAG 2.2 AA

Criterios de aceptación testables

Criterio	Requisito	Test
1.4.3 Contraste texto	Mínimo 4.5:1 para texto normal, 3:1 para grande	axe-core / Lighthouse
1.4.11 Contraste UI	Mínimo 3:1 para bordes de input, iconos funcionales	Colour Contrast Analyser
2.1.1 Teclado	Todos los elementos interactivos accesibles con Tab/Enter	Test manual + puppeteer
2.4.7 Focus visible	Focus ring: 2px offset + 2px solid --color-primary	:focus-visible inspect
3.3.1 Error identif.	Errores descritos con texto + ícono, nunca solo color	Screen reader test
4.1.2 Nombre/rol/valor	aria-label en iconos, roles implícitos HTML semántico	NVDA + Chrome

Focus ring estándar

/* Focus ring — WCAG 2.4.7 compliant */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-primary);
}

No usar outline: none sin reemplazar con focus-visible alternativo. El fondo negro del offset garantiza visibilidad en todos los fondos oscuros.

// 07 — Anti-patterns

Anti-patrones y Migración

⚠ Anti-patrón 1: Color como único indicador

Usar solo el color rojo para indicar error en tabla. Debe acompañarse siempre de texto ("Failed"), ícono y/o patrón diferenciador.

⚠ Anti-patrón 2: Texto de bajo contraste

Usar --text-lo (#5A534E) para texto de cuerpo principal. Reservado exclusivamente para placeholders, metadatos y etiquetas desactivadas. Body text mínimo --text-mid.

⚠ Anti-patrón 3: Espaciado arbitrario

Usar valores px sin token (ej: padding: 13px). Migrar a la escala de tokens. Si 12px es insuficiente y 16px excesivo, revisar el componente — no crear tokens ad-hoc.

⚠ Anti-patrón 4: Mezcla de familias tipográficas

Usar una sans-serif del sistema (Arial, Helvetica) junto a Space Mono. Resultado: ruptura visual del aesthetic mono. Solo Space Mono + JetBrains Mono.

⚠ Anti-patrón 5: Botón Primary duplicado

Dos btn-primary en la misma fila de acciones. El usuario no puede distinguir la acción principal. Usar btn-primary + btn-ghost o btn-subtle para acciones secundarias.

// 08 — QA

Checklist de Code Review

Ejecutar en cada PR que modifique UI. Bloquea merge si algún item falla.

Tokens & Foundation

Todos los colores son tokens CSS (--color-*, --bg-*, --text-*), sin valores hex hardcoded
Todo el espaciado usa tokens --sp-* de la escala, sin px arbitrarios
Solo font-family: var(--font-ui) o var(--font-code) — sin otras fuentes
Sin z-index > 100 sin justificación en comentario

Componentes

Botones tienen estado :focus-visible con box-shadow estándar
Botones disabled tienen pointer-events: none y opacity ≤ 0.4
Inputs tienen label visible (no solo placeholder) y hint/error text
Badges/estados no usan solo color — incluyen texto o ícono
Tables tienen th con scope="col" o scope="row"
Iconos funcionales tienen aria-label o título

Accesibilidad

axe-core 0 errores en Lighthouse CI (se ejecuta automáticamente en PR)
Contraste de texto verificado: mínimo 4.5:1 para cuerpo, 3:1 para elementos grandes
Navegación completa por teclado (Tab, Enter, Escape) verificada manualmente
Sin motion que no respete prefers-reduced-motion
Áreas de click/tap mínimo 44×44px en controles interactivos

Responsive & Edge cases

Probado con texto 2× largo (nombres de pipeline con 60+ chars)
Estado vacío (empty state) definido para listas y tablas
Estado de carga (skeleton o spinner) para datos asíncronos
Estado de error para fetch fallido
Breakpoint revisado a 1280px (mínimo soporte desktop)

Sistema deDiseño Mono

Tokens & Fundamentos

CSS Custom Properties

Paleta de Color

Tokens semánticos

Tipografía

Espaciado

Buttons

Variantes

Tamaños

Estados

Badges & Status

Form Inputs

Alerts & Notifications

Data Tables

Accesibilidad WCAG 2.2 AA

Criterios de aceptación testables

Focus ring estándar

Anti-patrones y Migración

Checklist de Code Review

Tokens & Foundation

Componentes

Accesibilidad

Responsive & Edge cases

Sistema de
Diseño Mono