Sistema de Diseño

Sleek Design
System

Guía de referencia para diseñadores e ingenieros de CULTIVA IA. Tokens, componentes y reglas listas para implementar.

Inter + JetBrains Mono 8pt Grid WCAG 2.2 AA Design intent: menos es más
01 — Contexto y Objetivos

¿Qué es Sleek?

Sleek es el sistema de diseño de CULTIVA IA. Define las reglas que garantizan consistencia visual, accesibilidad y velocidad de desarrollo en todos los productos de la agencia.

🎯
Principio rector
Reducir la carga cognitiva mediante líneas limpias, paleta intencional y espaciado consistente. Cada elemento debe justificar su presencia.
⚙️
Regla 60-30-10
60% surface/neutral (fondos), 30% text/border (estructura), 10% primary/accent (llamadas a acción y énfasis).
02 — Tokens de Color

Paleta

Cada color tiene un token semántico. Nunca uses valores hexadecimales crudos en componentes; usa siempre el token CSS variable.

Colores principales
Primary
#3B82F6
--color-primary
Secondary
#8B5CF6
--color-secondary
Success
#16A34A
--color-success
Warning
#D97706
--color-warning
Danger
#DC2626
--color-danger
Text
#111827
--color-text
Background
#F9FAFB
--color-bg
Surface
#FFFFFF
--color-surface
/* CSS Custom Properties — copiar en :root */
--color-primary: #3B82F6;
--color-secondary: #8B5CF6;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-surface: #FFFFFF;
--color-text: #111827;
03 — Tipografía

Escala tipográfica

Fuentes: Inter para texto UI (pesos 100–900), JetBrains Mono para código, tokens y etiquetas técnicas. Grid desktop-first.

--font-size-5xl
3rem · 800 · −0.02em
Display H1
--font-size-3xl
1.875rem · 700 · −0.01em
Heading H2
--font-size-xl
1.25rem · 600
Subheading H3
--font-size-md
1rem · 400 · 1.6 lh
Body — Texto de párrafo estándar para contenido principal de la interfaz.
--font-size-sm
0.875rem · 400
Small — Texto secundario, hints, descripciones cortas.
JetBrains Mono
0.875rem · 400
const agent = new CultivaAgent(config);
label-caps
0.6875rem · 600 · +0.1em
Etiqueta de sección · Status label · Nav group
04 — Espaciado

Grid de 8pt

Todos los valores de espacio son múltiplos de 4px (medio paso) o 8px (paso completo). Nunca uses valores arbitrarios fuera de la escala.

Token Valor Escala visual Uso típico
--space-14px
4px
Gap entre icono y texto
--space-28px
8px
Padding botón small
--space-312px
12px
Gap entre elementos de lista
--space-416px
16px
Padding card, padding input
--space-624px
24px
Gap columnas, margin sección
--space-832px
32px
Padding layout, separación bloques
--space-1248px
48px
Padding hero, margen de sección mayor
--space-1664px
64px
Separación entre secciones de página
05 — Componentes

Button

El botón es el componente de acción primario. Debe comunicar claramente su función, jerarquía y estado en todo momento.

Variantes
primary (acción principal), secondary (alternativa), ghost (terciaria), danger (destructiva).
Tamaños
sm (32px altura), default (40px), lg (48px). El tamaño must mantenerse consistente dentro del mismo contexto.
Estados
default → hover → focus-visible → active → loading → disabled. Todos deben ser visualmente distinguibles.
/* Anatomía CSS del btn-primary */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 18px; /* 8pt grid */
  border-radius: var(--radius-md); /* 8px */
  font-weight: 500;
}
.btn-primary:hover { background: var(--color-primary-dark); }
06 — Badge

Badge / Status

Los badges comunican estado semántico. Usan fuente mono para reforzar su naturaleza de etiqueta técnica.

Activo Completado En revisión Error Borrador IA
Variantes de estado
El punto de color (badge-dot) es opcional pero refuerza la señal en listas densas. Fondo con opacidad 10% del color de estado.
07 — Input

Form Inputs

Los campos de formulario deben tener siempre label visible, placeholder descriptivo y mensajes de error concretos (nunca genéricos).

Tal como aparecerá en los informes.
⚠ Introduce un email válido (ej: hola@empresa.com).
Solo lectura en este contexto.
Estados: default · focus · error · disabled
El focus ring (3px azul 12% opac.) must ser visible. El estado error must incluir mensaje descriptivo, no solo color rojo.
08 — Card

Cards

Las cards agrupan información relacionada. El hover eleva sutilmente (shadow-md + translateY -1px) para indicar interactividad.

🤖
Activo
Agente SEO
Genera y optimiza artículos para posicionamiento orgánico de forma autónoma.
12 tasks hoy
📊
Live
€ 24.8K
Revenue mensual
↑ +18% vs mes anterior
⚡
En cola
Campaña Meta Ads
3 creatividades pendientes de aprobación para lanzar el lunes.
Vence en 2 días
09 — Alert

Alerts

Los alerts comunican mensajes del sistema. Siempre incluyen título (qué pasó) y cuerpo (qué hacer), nunca solo un color.

ℹ️
Sincronización en progreso
Tu catálogo de productos está siendo importado desde Shopify. Esto puede tardar hasta 5 minutos.
✅
Campaña publicada
La campaña "Black Friday CULTIVA" está activa y recibiendo tráfico desde hace 3 minutos.
⚠️
Límite de API próximo
Has consumido el 87% de tu cuota mensual de tokens. Considera actualizar tu plan antes del día 20.
🚨
Fallo en el agente de contenido
El agente no pudo conectarse a WordPress. Comprueba las credenciales en Integraciones → WordPress.
10 — Anti-patrones

Reglas de uso

Cada regla "haz" viene acompañada de su contraparte "no hagas" con ejemplo concreto.

✓ Hacer
✓Usar tokens semánticos: var(--color-primary)
✓Mantener espaciado en múltiplos de 8px (16, 24, 32…)
✓Incluir label visible en todos los inputs del formulario
✓Añadir focus-visible con ring de 3px en elementos interactivos
✓Usar Inter 500 para etiquetas de botones y formularios
✓Respetar jerarquía: primary > secondary > ghost en una vista
✗ No hacer
✗Escribir colores hex crudos en componentes (#3B82F6 directo)
✗Usar valores de spacing arbitrarios (13px, 22px, 37px)
✗Texto de placeholder como sustituto del label (invisibilidad)
✗Eliminar el outline de focus sin alternativa visible
✗Usar texto gris claro (#D1D5DB) sobre fondo blanco (falla AA)
✗Múltiples botones primarios en el mismo nivel de jerarquía
11 — Accesibilidad

WCAG 2.2 AA

La accesibilidad no es opcional. Cada criterio debe ser verificable en code review.

4.5:1 Contraste texto
Texto normal must tener ratio ≥ 4.5:1. Texto grande (≥18px bold) ≥ 3:1. Testear con axe DevTools.
focus Teclado primero
Tab order lógico. Focus visible con ring 3px (#3B82F6, 12% opac.). Sin trampas de teclado.
44px Target size
Área táctil mínima de 44×44px (WCAG 2.5.8). Iconos solos deben tener padding invisible para alcanzar el mínimo.
aria Semántica
Usar roles nativos HTML (button, nav, main, aside). ARIA solo cuando el HTML nativo no alcanza.
12 — QA Checklist

Checklist de revisión

Ejecutar en cada PR que modifique componentes UI. Items marcados = implementados en el sistema base.

✓
Tokens Todos los colores usan variables CSS (var(--color-*)), no valores hex directos
✓
Spacing Todos los márgenes y paddings son múltiplos de 4px o 8px (grid de 8pt)
✓
Tipografía Jerarquía respetada: H1 > H2 > H3 > Body sin saltos de más de 2 niveles
✓
Contraste Ratio ≥ 4.5:1 en texto normal, ≥ 3:1 en texto grande verificado con axe
✓
Focus Focus-visible ring de 3px visible en todos los elementos interactivos con teclado
✓
Estados Botones e inputs tienen estados: default, hover, focus, disabled (y error para inputs)
Dark mode Tokens preparados para extensión dark mode (prefers-color-scheme) — pendiente v1.1
Motion Animaciones respetan prefers-reduced-motion — pendiente v1.1
✓
Semántica HTML usa elementos nativos correctos: button (no div), nav, main, label+input
✓
Labels Todos los inputs tienen label visible asociado (no solo placeholder)
✓
Jerarquía Máximo 1 botón primary por bloque de acción. Secondary y ghost para acciones secundarias
✓
Errores Mensajes de error descriptivos (qué pasó + cómo solucionarlo), nunca solo "Campo inválido"
Sleek Design System
CULTIVA IA · v1.0.0 · MIT License
Inter JetBrains Mono 8pt Grid WCAG 2.2 AA