CULTIVA IA — Sistema de Diseño Minimalista

01 · Design Tokens

Tokens y fundamentos

Los tokens son la fuente única de verdad. Siempre usa el nombre del token, nunca valores raw.

/* tokens.css — CULTIVA IA Design System */
:root {
  /* — Colores — */
  --color-primary:   #0C0C09;
  --color-secondary: #312C85;
  --color-success:   #16A34A;
  --color-warning:   #D97706;
  --color-danger:    #DC2626;
  --color-surface:   #F4F4F1;
  --color-text:      #0C0C09;

  /* — Tipografía — */
  --font-display:    'Inter', system-ui, sans-serif;
  --font-body:       'Open Sans', system-ui, sans-serif;
  --font-mono:       'Inconsolata', monospace;

  /* — Espaciado (escala 4/8/12/16/24/32) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* — Radios — */
  --radius-sm: 4px; --radius-md: 8px;
}

02 · Colores

Paleta de color

5 colores semánticos + superficie + texto. Paleta contenida para máxima coherencia visual.

Primary

--color-primary

#0C0C09

Secondary

--color-secondary

#312C85

Success

--color-success

#16A34A

Warning

--color-warning

#D97706

Danger

--color-danger

#DC2626

Surface

--color-surface

#F4F4F1

03 · Tipografía

Escala tipográfica

Desktop-first expressive scale. Inter para display, Open Sans para body, Inconsolata para código y labels técnicos.

display-xl

Inter · 48px · 800

Heading

display-lg

Inter · 40px · 700

Título principal

h2

Inter · 32px · 700

Sección principal

h3

Inter · 24px · 600

Subsección y cards

body-lg

Open Sans · 18px · 400

Texto introductorio, leads y subtítulos destacados.

body-md

Open Sans · 16px · 400

Cuerpo de texto estándar para párrafos, descripciones y contenido principal de la interfaz.

body-sm

Open Sans · 14px · 400

Texto auxiliar, metadatos y descripciones secundarias.

label-caps

Inconsolata · 12px · 600

ETIQUETA · CATEGORÍA · TOKEN

code

Inconsolata · 14px · 400

const token = "--color-secondary";

04 · Espaciado

Escala de espaciado

Base 4px. Escala: 4/8/12/16/24/32. Nunca usar valores fuera de la escala salvo casos excepcionales documentados.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

05 · Componentes

Botones

Anatomía: [icono opcional] + etiqueta. Estados obligatorios: default, hover, focus-visible, disabled.

Variantes

Tamaños

Estados

06 · Badges

Badges y etiquetas

Solo para estado o categoría. Fuente mono, uppercase, letra pequeña. Nunca decorativas.

Semánticos

Activo Beta Completado Revisión Error Borrador

En uso

Agente de captación Activo

Pipeline IA v2 Beta

07 · Inputs

Campos de formulario

Focus con ring --color-secondary. Label siempre visible (no solo placeholder). Error con --color-danger.

Estados

08 · Alertas

Alertas y mensajes de sistema

Border-left 4px como señal de color. Siempre incluir título + descripción accionable.

Nuevo agente disponible

El agente de automatización de email v2.1 está listo para configurar en tu cuenta.

Campaña activada correctamente

La secuencia de onboarding se ha desplegado para 847 contactos.

Límite de créditos al 80%

Quedan 1.240 créditos IA este mes. Considera actualizar el plan antes del 30 de junio.

Error al conectar con la API

No se pudo autenticar con el CRM. Verifica las credenciales en Configuración → Integraciones.

09 · Cards

Cards y contenedores

Padding mínimo: space-6 (24px). Radius: --radius-md. Usar sombra solo en elevated.

Agente IA

Captación de leads

Cualifica prospectos automáticamente con inteligencia conversacional adaptada a tu sector.

Automatización

Email sequences

Secuencias de email personalizadas generadas y enviadas por IA según el comportamiento del usuario.

Analytics

Performance report

Resumen semanal de métricas clave con recomendaciones de mejora generadas por IA.

10 · Accesibilidad

WCAG 2.2 AA — Contraste de color

Criterio 1.4.3: ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande (≥18px bold o ≥24px).

Par de colores	Uso	Ratio	WCAG AA
Primary sobre Blanco	Texto body principal	19.1 : 1	✓ AA
Secondary sobre Blanco	Links, labels, eyebrows	8.7 : 1	✓ AA
Primary sobre Surface	Texto en fondos neutros	17.8 : 1	✓ AA
Blanco sobre Secondary	Botón secundario	8.7 : 1	✓ AA
Text-muted sobre Blanco	Texto secundario / metadatos	4.7 : 1	✓ AA
Warning sobre Blanco	Texto warning directo ⚠	2.9 : 1	✗ — usar como borde/fondo solo

Regla de Warning

--color-warning (#D97706) no pasa AA en texto directo sobre blanco. Usar solo como: border-left en alertas, icono decorativo, o fondo con texto --color-text.

11 · Anti-patrones

Qué evitar

Implementaciones prohibidas y sus alternativas correctas.

Espaciado arbitrario

margin-top: 17px; /* ← valor fuera de escala */

Usar siempre tokens

margin-top: var(--space-4); /* 16px ✓ */

Color raw en código

color: #312C85; /* duplica token */

Nombre semántico siempre

color: var(--color-secondary); /* ✓ */

Placeholder como label

Label explícito + placeholder

Email

12 · QA Checklist

Checklist de revisión de código

Ejecutar en cada code review antes de merge a main. Cada item debe poder verificarse sin subjetividad.

TOKENS Y COLORES
✓ Todos los colores usan var(--color-*), sin valores hex raw en el código de producción.
✓ Los pares de texto+fondo cumplen ratio ≥ 4.5:1. Verificado con WebAIM Contrast Checker o Storybook a11y addon.
No se usa --color-warning como color de texto directo sobre fondos claros.
TIPOGRAFÍA Y ESPACIADO
✓ Todos los font-family usan var(--font-display|body|mono).
✓ Todos los margin/padding/gap usan var(--space-*). Excepciones documentadas en comentario.
No hay valores fuera de escala (4/8/12/16/24/32) sin justificación documentada.
COMPONENTES
✓ Todos los botones e inputs tienen estado :focus-visible con outline visible (mínimo 2px, offset 2px).
✓ Los inputs tienen <label> asociado con for/aria-label. No solo placeholder.
Las badges solo se usan para estado o categoría semántica. No como decoración.
Los botones disabled tienen aria-disabled="true" y no responden a eventos de puntero.
CONTENIDO Y TONO
✓ Los textos de botón son verbos de acción concisos: "Activar", "Configurar", "Ver informe". No "Haz clic aquí".
✓ Los mensajes de error indican la causa y la acción correctora. No solo "Error".
No hay frases de marketing vacías en la UI: "potenciamos tu futuro", "soluciones innovadoras", etc.

Minimal DesignSystem