Cultiva IA — Sistema de Diseño Gradient v1.0

01 — Contexto y Objetivos

¿Qué resuelve este sistema?

Cultiva Dashboard necesita transmitir innovación y energía sin sacrificar claridad operativa. Este sistema define los bloques visuales irrenunciables que garantizan coherencia entre diseñadores e ingenieros.

🎯

Intención de diseño

Interfaces modernas y playful con gradientes que proyectan innovación y confianza profesional.

♿

Accesibilidad primero

WCAG 2.2 AA es la línea base. En conflicto entre estética y accesibilidad, gana accesibilidad siempre.

⚙️

Listo para implementar

Cada regla incluye el token CSS o valor exacto. Sin adjetivos ambiguos sin anclaje concreto.

02 — Tokens de Diseño · Colores

Paleta Gradient

Usa siempre el token semántico (--color-primary) en lugar del valor hexadecimal directo para mantener coherencia global.

Aa

Primary --color-primary #990FFA

Aa

Secondary --color-secondary #E60076

Aa

Success --color-success #16A34A

Aa

Warning --color-warning #D97706

Aa

Danger --color-danger #DC2626

Aa

Text --color-text #111827

Aa

Text Secondary --color-text-secondary #6B7280

Aa

Surface --color-surface #FFFFFF / #F9FAFB

Gradientes de sistema

--gradient-primary

CTAs, hero, highlights

--gradient-dark

Sidebar, nav, fondos oscuros

--gradient-primary-soft

Iconos, fondos de acento suave

03 — Tokens de Diseño · Tipografía

Escala tipográfica

Escala 12/14/16/18/24/30/36px sobre grid 8pt. Tres familias con rol semántico diferenciado.

DISPLAY · Space Grotesk

Automatiza tu marketing

BODY · Montserrat

Conecta tus herramientas IA en minutos.

MONO · JetBrains Mono

API_KEY=sk-cultiva-xxx

H1 — Space Grotesk · 36px / 800

Panel de Control Cultiva

H2 — Space Grotesk · 30px / 700

Automatizaciones activas

H3 — Space Grotesk · 24px / 600

Resumen del mes

Body MD — Montserrat · 16px / 400

Tus flujos de contenido IA generaron 2.840 publicaciones este mes con un ahorro estimado de 340 horas.

Body SM — Montserrat · 14px / 400

Actualizado hace 3 minutos · Ciclo mensual: 1 jun — 30 jun 2026

Label Caps — JetBrains Mono · 12px / 600 · uppercase

AUTOMATIZACIONES ACTIVAS · 14

04 — Componentes · Botones

Button

Min-height 44px (touch target WCAG). Siempre texto visible + estado focus-visible explícito. border-radius: full para el estilo Gradient.

Variantes

Tamaños

Estados

05 — Componentes · Cards de Métricas

Metric Card

Tira de acento gradiente en la parte superior (height:3px). Icono en contenedor 36×36px con fondo soft. Delta siempre con color semántico.

📣

Posts generados

2.840

↑ 18% vs mes ant.

⚡

Automatizaciones

47

↑ 3 nuevas

⏱

Horas ahorradas

340h

→ Estable

💰

ROI estimado

8.4×

↑ Máximo histórico

06 — Componentes · Badges de Estado

Badge / Status

Font JetBrains Mono para legibilidad de estados técnicos. Dot animado solo en estado active para no generar distracción.

Activo Pausado Error Borrador ✦ Pro 🤖 IA

En contexto — Lista de automatizaciones

NombreTipoEstado

Publicación diaria LinkedIn 🤖 IA Activo

Email nurturing B2B 🤖 IA Pausado

Análisis competencia semanal Draft Borrador

07 — Componentes · Formularios

Input Field

Focus ring 3px / rgba(153,15,250,0.15). Error state con border rojo + mensaje de helper obligatorio. Todos los inputs min 44px de altura.

Nombre del flujo * Máx. 64 caracteres. Se usará como identificador interno.

Canal objetivo

Webhook URL

🔗

Email del cliente * ⚠ El formato de email no es válido.

Clave de API ✓ Clave verificada correctamente.

Descripción del tono

08 — Componentes · Navegación

Sidebar Nav

Fondo --gradient-dark. Item activo con --gradient-primary + glow. Secciones separadas por label en mayúsculas con opacidad 35%.

Preview — Dashboard panel

📣

Posts junio

2.840

↑ 18%

⚡

Flujos activos

47

→ Sin cambios

09 — Tokens · Espaciado y Radios

Grid 8pt + Border Radius

Todo el espaciado deriva del múltiplo de 8px. Nunca usar valores ad-hoc que rompan el ritmo visual.

Escala de espaciado

space-1 = 8px — separación mínima (padding sm, gap interno)

space-2 = 16px — padding estándar, gap de flex

space-3 = 24px — padding de cards/sections

space-4 = 32px — separación entre secciones

space-6 = 48px — padding de secciones hero

space-8 = 64px — separación entre bloques mayores

Escala de radios

sm
4px

md
8px

lg
12px

xl
16px

2xl
24px

full
9999px

10 — Accesibilidad WCAG 2.2 AA

Contraste y criterios testables

Cada combinación de texto/fondo debe superar las ratios mínimas. Testar con axe DevTools o Lighthouse en cada PR.

Ratios de contraste verificados

AA ✓

11.2:1

#111827 sobre #FFFFFF (texto body)

AA ✓

4.8:1

#990FFA sobre #FFFFFF (primary label)

AA ✓

4.7:1

#FFFFFF sobre gradient #990FFA→#E60076

AA ✓

7.1:1

#16A34A sobre #DCFCE7 (success badge)

Criterios de interacción

✓ Touch targets mínimo 44×44px en todos los elementos interactivos.

✓ Focus ring visible: outline: 3px solid rgba(153,15,250,0.5); outline-offset: 2px.

✓ Navegación teclado completa: Tab, Shift+Tab, Enter, Space, Escape en modales.

✓ HTML semántico primero; ARIA solo cuando no existe elemento nativo equivalente.

✓ Labels de screen reader en iconos decorativos: aria-hidden="true". Labels descriptivos en iconos funcionales.

✓ No transmitir estado únicamente por color: añadir ícono o texto secundario.

11 — Anti-patrones y Patrones Correctos

Qué hacer y qué no

Cada prohibición se acompaña de la alternativa aceptada. Estos conflictos se detectarán en code review.

✗ Prohibido

Texto gris claro sobre fondo blanco sin verificar contraste:

Este texto es ilegible (ratio 1.9:1)

✓ Correcto

Usar --color-text-muted (#9CA3AF) mínimo, o --color-text-secondary para texto de apoyo:

Texto secundario legible (ratio 4.6:1)

✗ Prohibido

Espaciado ad-hoc fuera del grid de 8pt: padding: 13px 19px

✓ Correcto

Usar múltiplos de 8px exactos: padding: 16px 24px (space-2 / space-3)

✗ Prohibido

Estado activo del nav sin color visible: font-weight: bold como único diferenciador

✓ Correcto

Combinar cambio de background + color + (opcional) glow para máxima claridad perceptual

✗ Prohibido

Gradiente sobre texto pequeño (<18px) que comprometa la legibilidad

✓ Correcto

Gradiente en texto solo para display H1/H2 (≥24px). En textos menores, color sólido del sistema.

12 — QA Checklist

Criterios para Code Review

Ejecutar esta lista en cada PR que toque componentes de UI antes de mergear a main.

Tokens y visual

□tokensTodos los colores usan --color-*, no hex raw
□spacingPadding/margin son múltiplos de 8px
□tipoFuentes asignadas según rol (display/body/mono)
□gradientGradientes solo en los contextos definidos (no en texto <24px)
□radiusBordes usan tokens de radio del sistema
□sombrasSombras usan --shadow-* correspondiente

Accesibilidad y comportamiento

□a11yContraste ≥4.5:1 en texto normal, ≥3:1 en texto grande
□focusFocus ring visible en todos los elementos interactivos
□touchElementos clickables ≥44px en ambas dimensiones
□semHTML semántico; ARIA solo cuando es necesario
□estadoEstado no se comunica solo por color (+ icono o texto)
□kbdFlujos clave navegables únicamente con teclado

Gradient Design System