NovaSynth AI — Cosmic Design System

Tokens de Color

/* Design intent: superficies oscuras con acentos neon de alto contraste que mantengan WCAG 2.2 AA */

Primary

--color-primary · #3B82F6

Secondary

--color-secondary · #8B5CF6

Success

--color-success · #16A34A

Warning

--color-warning · #D97706

Danger

--color-danger · #DC2626

Background

--color-bg · #04050D

Surface 2

--color-surface-2 · #0F1629

Text Primary

--color-text-primary · #E8EEFF

          /* Importar en globals.css o tailwind.config.js */
:root {
  --color-primary:   #3B82F6;
  --color-secondary: #8B5CF6;
  --color-success:   #16A34A;
  --color-warning:   #D97706;
  --color-danger:    #DC2626;
  --color-bg:        #04050D;   /* superficie base */
  --color-surface-1: #0A0E1A;   /* sidebar, header */
  --color-surface-2: #0F1629;   /* cards, inputs */
  --color-text:      #E8EEFF;   /* texto principal */
  --color-text-muted:#4A5B85;   /* placeholder, label */
}
        

Tipografía

/* Fonts: Audiowide (display/body), JetBrains Mono (código/etiquetas) · Escala: 12/14/16/20/24/32 */

h1 · 32px · Audiowide · 400

Deploy AI Workflows

h2 · 24px · Audiowide · 400

Automation Pipeline

h3 · 20px · Audiowide · 400

Data Processing Module

body · 16px · Audiowide · 400

NovaSynth AI processes your data with enterprise-grade reliability and zero-latency inference pipelines.

label · 14px · Audiowide · 400

Configure your automation workflow

mono · 12px · JetBrains Mono

API_KEY · STATUS: ACTIVE · V2.0.1

Escala de Espaciado

/* Base 4px · Escala: 4/8/12/16/24/32/48/64 */

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

--sp-6

24px

--sp-8

32px

--sp-12

48px

--sp-16

64px

Botones

/* Variantes: primary · secondary · ghost · danger · disabled · loading */

        /* Button: estados requeridos */
.btn-primary          { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.btn-primary:hover    { box-shadow: 0 0 12px rgba(59,130,246,0.6); transform: translateY(-1px); }
.btn:focus-visible    { outline: 2px solid #60A5FA; outline-offset: 3px; }  /* WCAG 2.2 AA */
.btn[disabled]        { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
      

Badges de Estado

/* Estados: active · processing · warning · error · completed · neutral */

Activo Procesando Completado Degradado Error Inactivo

Pipeline NLP v3 Entrenando modelo Deploy exitoso Alta latencia Timeout: 30s

Formularios

/* Inputs: default · hover · focus (glow) · error · disabled */

Configurar Pipeline de Automatización

Nombre del pipeline * Identificador único del pipeline (slug, sin espacios)

Entorno de ejecución *

API Endpoint El endpoint debe incluir la versión (/v2/)

Max. Tokens Máximo tokens por inferencia (recomendado: 4096–16384)

Descripción

Dashboard — Metric Cards

/* Tarjetas de métricas con animación hover y barra de progreso */

Inferencias / día

2.4M

↑ 18.3%

Latencia P95

48ms

↓ 12ms

Uptime

99.97%

↑ 0.02%

Errores (24h)

127

↑ 23

Tabla de Datos

/* Pipelines activos · states via badges · row hover highlight */

Pipeline	Modelo	Estado	Inferencias	Latencia
data-ingestion-v2 Producción · updated 2h ago	gpt-ns-4o	Activo	1,240,388	42ms
nlp-classifier-prod Producción · updated 5m ago	ns-embed-v3	Procesando	876,021	67ms
image-ocr-batch Staging · updated 1d ago	vision-ns-2	Degradado	12,450	312ms
erp-sync-nightly Producción · updated 8h ago	ns-agent-v1	Completado	8,900	—

Accesibilidad — WCAG 2.2 AA

/* Contraste mínimo: 4.5:1 texto normal · 3:1 texto grande · focus-visible obligatorio */

Anti-Patrones Prohibidos

/* Reglas del sistema: lo que NUNCA debe hacerse */

✗ Prohibido

/* Texto sobre fondo de bajo contraste */
color: #4A5B85;
background: #0A0E1A;
→ ratio 2.9:1, falla AA

/* Botón sin estado focus-visible */
.btn:focus { outline: none; }
→ inaccesible por teclado

/* Espaciado arbitrario */
padding: 13px 22px;
→ fuera de la escala 4px

✓ Correcto

/* Texto con contraste suficiente */
color: #8B9CC8;
background: #0A0E1A;
→ ratio 4.6:1, pasa AA

/* Focus visible con offset */
.btn:focus-visible {
outline: 2px solid #60A5FA;
outline-offset: 3px;
}
→ visible y accesible

✗ Prohibido

/* Valores de color raw en componentes */
background: #3B82F6;
→ usa tokens semánticos

/* Icono como único indicador de estado */
<span class="red-dot" />
→ los lectores de pantalla no ven el color

/* Texto en mayúsculas sin letter-spacing */
text-transform: uppercase;
→ añadir letter-spacing: 0.12em mínimo

✓ Correcto

/* Token semántico */
background: var(--color-primary);
→ propagación automática en temas

/* Estado con texto + color */
<Badge dot color="error">
Error
</Badge>
→ color + etiqueta de texto

QA Checklist

/* Ejecutar en code review antes de merge a producción */

Todos los colores usan CSS custom properties, no valores raw

Contraste de texto verificado con axe DevTools (≥ 4.5:1)

Spacing usando tokens --sp-* (múltiplos de 4px)

Navegación completa con Tab verificada manualmente

Estados hover/focus/active/disabled en cada interactivo

focus-visible implementado (no outline: none en :focus)

Fuentes cargadas: Audiowide + JetBrains Mono (Google Fonts)

Badges de estado tienen texto + dot (no solo color)

Formularios: label asociado a input (for/id o aria-labelledby)

Inputs de error: aria-invalid="true" + mensaje descriptivo

Responsive testado en Chrome 110+ y Safari 16+

Sin dependencias de CDN externas (CSS/JS autocontenidos)

NovaSynth UI v2.0