NexusAI — Sistema de Diseño Codex

Tokens de Diseño

La paleta es binaria por principio. El negro es estructura; el blanco es espacio; el color semántico aparece solo en estados funcionales (éxito, aviso, error).

Tokens de Color

Token	Valor	CSS Variable	Uso
primary	`#000000`	`--color-primary`	Botón primario, sidebar, texto heading, bordes activos
secondary	`#FFFFFF`	`--color-secondary`	Fondo de página, texto sobre fondos negros
text	`#111827`	`--color-text`	Texto de cuerpo, etiquetas, párrafos
muted	`#6B7280`	`--color-muted`	Texto auxiliar, placeholders, metadatos
neutral	`#F9FAFB`	`--color-neutral`	Fondos de tabla, demo rows, estados hover leve
success	`#16A34A`	`--color-success`	Confirmación, delta positivo, badge activo
warning	`#D97706`	`--color-warning`	Alertas no críticas, estados pendientes
danger	`#DC2626`	`--color-danger`	Errores, acciones destructivas, validación fallida

/* Design Tokens — NexusAI Codex Design System */
:root {
  --color-primary:   #000000;
  --color-secondary: #FFFFFF;
  --color-text:      #111827;
  --color-muted:     #6B7280;
  --color-surface:   #FFFFFF;
  --color-border:    #E5E7EB;
  --color-neutral:   #F9FAFB;
  --color-success:   #16A34A;
  --color-warning:   #D97706;
  --color-danger:    #DC2626;
}
      

Tipografía

Open Sans es el único vehículo visual de jerarquía. El peso y el tamaño sustituyen al color. JetBrains Mono se reserva para código, etiquetas mono y datos técnicos.

32px / 800
H1 · Page title

Análisis de campañas Q2

24px / 700
H2 · Section

Resumen ejecutivo

20px / 600
H3 · Subsection

Métricas de conversión

16px / 400
Body MD

El segmento de alto valor ha incrementado su tasa de retención un 12% respecto al trimestre anterior, impulsado por la campaña de reactivación por email.

14px / 400
Body SM

Datos actualizados a 14 jun 2026 · Fuente: NexusAI Analytics

12px / 500 Mono
Label / Code

TASA DE CONVERSIÓN · JUNIO 2026

Botones

Todos los botones usan geometría pill (border-radius: 9999px). La jerarquía la establece el fondo: negro para acción principal, borde para secundaria, transparente para ghost. Los estados deben ser explícitos y distintos.

Variantes

Variantes principales

Tamaños

Tamaños (sm · md · lg)

Estados

Disabled

/* Botón Primario — anatomía CSS */
.btn-primary {
  background: var(--color-primary);    /* #000 */
  color:      var(--color-secondary);  /* #FFF */
  border:     1.5px solid var(--color-primary);
  border-radius: var(--radius-pill); /* 9999px */
  font-weight: 600;
  font-size: 0.875rem;
  padding: 8px 16px;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px; /* WCAG 2.4.11 */
}
      

Inputs de Formulario

Los campos de texto deben comunicar su estado a través del borde, nunca solo por color. El estado de error incluye siempre un mensaje de texto visible debajo.

Nombre del workspace Máximo 48 caracteres. Solo letras, números y guiones.

Email de facturación El email introducido no es válido.

Plan actual Contacta con soporte para cambiar de plan.

Clave de API

Badges de Estado

Usa fuente mono para destacar que el badge es un dato técnico/estado, no texto editorial. El punto de color refuerza el significado sin depender solo del color (daltonismo).

Badges semánticos Activo Pendiente Error Inactivo Pro

Contexto real: tabla de campañas

Campaña	Canal	Estado	Conversiones	ROAS
Black Friday — Email	email	Activo	1.284	4.2×
Retargeting — Meta Ads	paid_social	Pendiente	—	—
SEO Content Hub	organic	Activo	3.910	8.7×
Google Search Marca	paid_search	Error	—	—

Cards de Métricas

Las cards negras se reservan para la métrica más importante de la vista. Las cards blancas con borde son el patrón estándar. Sin sombras; el contraste de borde define el plano.

Ingresos MRR

€ 48.200

▲ +18% vs mes anterior

Usuarios activos

1.834

▲ +7% esta semana

Tasa de churn

2,1%

▼ -0,3pp vs Q1

Card negra (hero metric)

Solo una por vista. Fondo --color-primary, texto en blanco. Sin sombra; el contraste crea jerarquía.

Card blanca (standard)

Borde --color-border (1px), radius 6px. Hover: fondo --color-neutral. Sin transición de sombra.

Accesibilidad — WCAG 2.2 AA

Cada criterio es testeable en code review. No aprobar un criterio debe bloquear el merge.

Criterio WCAG	Regla Codex	Cómo testear
1.4.3 Contraste mínimo (4.5:1)	Negro (#000) sobre blanco (#FFF) = 21:1. Texto muted (#6B7280) sobre blanco = 4.6:1 ✓	axe DevTools → regla "color-contrast"
2.4.7 Focus visible	Todos los elementos interactivos deben tener `:focus-visible` outline 2px negro, offset 2px	Tab por toda la página; ningún elemento pierde el foco visual
2.4.11 Focus Not Obscured (AA)	El indicador de foco nunca se oculta detrás del topbar sticky	Tab hasta elemento parcialmente oculto; foco debe ser visible ≥ 50%
1.3.5 Identify Input Purpose	Inputs deben tener `autocomplete` apropiado (email, name, etc.)	Inspeccionar DOM; buscar `autocomplete=""` en inputs de usuario
3.3.1 Error Identification	El mensaje de error aparece en texto visible + asociado via `aria-describedby`	NVDA/VoiceOver debe leer el error al llegar al input inválido
1.4.1 Use of Color	Los badges incluyen texto + punto de color. El estado no depende solo del color	Simular deuteranomalía en DevTools → todos los estados siguen diferenciables

Anti-patrones Prohibidos

No usar sombras (box-shadow) en cards de UI

Las sombras rompen la estética blank-canvas. El plano se define por borde y fondo. Excepción: modales y tooltips flotantes pueden usar una sombra muy leve (max: 0 2px 8px rgba(0,0,0,0.08)).

No usar gradientes en fondos de UI

Gradientes degradan el minimalismo y crean inconsistencias entre modos. El color editorial llega solo a través de fotografías, nunca de fondos CSS.

No usar texto de baja energía como etiquetas de botón

Mal: "Click aquí" / "Enviar" / "OK". Bien: "Exportar informe PDF" / "Crear workspace" / "Eliminar campaña". La etiqueta debe describir la acción, no el gesto.

No romper el ritmo de espaciado

Solo usar valores de la escala: 4 / 8 / 12 / 16 / 24 / 32 px. Ningún valor arbitrario (ej. 10px, 15px, 20px). Un espacio fuera de escala en una PR debe bloquearse.

No desactivar el outline de focus sin reemplazarlo

outline: none solo es válido si se añade un reemplazo visual explícito en :focus-visible con al menos 2px de contraste visible.

Checklist de QA — Code Review

Ejecutar en cada PR que toque UI. Un NO en cualquier punto bloquea el merge.

Tokens semánticos únicamente. No hay valores de color en hex/rgb crudos en el componente. Todos los colores referencian una variable CSS.
Escala de espaciado respetada. Ningún padding/margin fuera de 4/8/12/16/24/32px. Verificar en DevTools → Computed.
Focus visible en todos los interactivos. Tab completo por la vista sin perder el ring de foco en ningún momento.
Contraste WCAG AA. axe DevTools pasa con 0 violaciones de contraste en modo claro.
Estados de componente completos. Botones e inputs tienen hover, focus-visible, active y disabled implementados visualmente.
Errores de formulario con texto. Los campos inválidos tienen mensaje de error en texto, no solo borde rojo. aria-describedby apunta al mensaje.
Sin sombras en cards de contenido. Revisar que no hay box-shadow en cards de datos o métricas.
Fuentes correctas. Open Sans para UI, JetBrains Mono para mono. Sin fallback a serif.
Labels de botón descriptivos. Ningún botón usa "OK", "Enviar", "Click aquí" o equivalentes vagos.
Responsive edge cases verificados. Labels largos en botones no rompen el layout. Inputs en móvil (375px) siguen usables y sin desbordamiento.

Generado con

Sistema de Diseño Codex Minimalista

Skills de Diseño — CULTIVA IA · Branding-Diseno · v1.0.0

CodexMinimalista