C
CULTIVA IA — Design System
Neumorphism Guide · v1.0.0
WCAG 2.2 AA
01
Intención de Diseño
Context and goals for the CULTIVA IA neumorphic system
Design Intent Statement

"Crear interfaces para el panel CULTIVA IA que transmitan precisión técnica y profundidad táctil — superficies suaves y extruidas que inviten a la interacción sin distraer del dato. Tecnología orgánica: robusta, limpia, y con personalidad propia."

📊
2.022
Skills en el Arsenal
▲ +12% este mes
🤖
25
Servicios Activos
▲ +3 nuevos
⚡
98%
Uptime Plataforma
▲ SLA cumplido
Actividad Semanal — Bar Chart Neumórfico
47
L
82
M
61
X
74
J
90
V
38
S
22
D
Progreso de Servicios
Marketing IA 89%
Automatización 74%
Agentes IA 61%
Contenido 95%
02
Tokens y Fundamentos
Design tokens and foundational constraints
Primary
#006666 · --color-primary
Acciones primarias, foco, CTAs
Surface
#E7E5E4 · --color-surface
Base de todas las superficies neumórficas
Text
#1E2938 · --color-text
Texto principal sobre surface
Success
#00A63D · --color-success
Estados OK, confirmaciones
Warning
#FE9900 · --color-warning
Avisos, estados intermedios
Danger
#FF2157 · --color-danger
Errores, acciones destructivas

Shadow Tokens — El corazón del Neumorfismo

↑
Raised
(extruido)
--neu-raised
↓
Inset
(hundido)
--neu-inset
—
Flat
(neutro/ghost)
--neu-flat

Escala Tipográfica

CULTIVA
H1 · Space Mono · 3rem · 700
Panel de Control
H2 · Space Mono · 2rem · 700
Métricas del Sistema
H3 · Space Mono · 1.5rem · 700
Los agentes de CULTIVA IA procesan tareas de marketing en tiempo real con precisión milimétrica.
Body-MD · Space Mono · 1rem · 400
const agent = new CultivaAgent({ model: 'claude' })
Code · JetBrains Mono · 0.75rem · 500
Estado del sistema · Activo
Label-Caps · JetBrains Mono · 0.65rem · uppercase

Escala de Espaciado — Compact Density Mode

xs 4px
sm 8px
md 16px
lg 24px
xl 32px
2xl 48px
03
Anatomía de Componentes
States, variants, interactions, responsive behavior
Botones — Todos los estados
/* Estado: default → raised shadow */ box-shadow: var(--neu-raised-sm); /* Estado: active → inset shadow */ box-shadow: var(--neu-inset);
Inputs — Anatomía y estados
⚠ Formato de email no válido
/* Reposo: inset (hundido) */ box-shadow: var(--neu-inset); /* Focus: inset + ring primario */ box-shadow: inset + 0 0 0 3px rgba(0,102,102,.25);
Toggles y Controles
Notificaciones activas
Modo oscuro (off)
Procesamiento en batch
Feature en beta (bloqueada)
Badges de Estado
Activo En proceso Error IA
Marketing Automatización Deploy OK Rate limit
Skill Card — CULTIVA IA
cold-email
v1.2
Genera secuencias de cold email con alta conversión usando IA y datos de buyer persona.
Marketing Email
04
Accesibilidad — WCAG 2.2 AA
Acceptance criteria, contrast ratios, keyboard interactions
Par de colores Ratio Nivel AA Uso
Text (#1E2938) sobre Surface (#E7E5E4) 9.1:1 ✓ PASS Texto principal
Primary (#006666) sobre Surface (#E7E5E4) 5.7:1 ✓ PASS CTAs, links
White sobre Primary (#006666) 5.7:1 ✓ PASS Btn primary label
Text-Muted (#5B6A7A) sobre Surface 4.6:1 ✓ PASS Labels, subtexts ≥14px
Surface (#E7E5E4) sobre Surface (sombra neumorfica) Sombra △ Solo sombras No usar texto sobre sombra
Keyboard Navigation
  • Tab Navegar entre elementos interactivos en orden lógico DOM
  • Enter/Space Activar botones y toggles
  • Esc Cerrar modals, cancelar acciones inline
  • ↑ ↓ Navegar listas y menús desplegables
Focus ring must
outline: 3px solid var(--color-primary); outline-offset: 3px
Screen Reader Labels
/* Must: semantic HTML */ <button type="button" aria-label="Activar agente de SEO"> Activar </button> /* Toggle: estado comunicado */ <input type="checkbox" role="switch" aria-checked="true" aria-label="Notificaciones" /> /* Input: label asociado */ <label for="agent-name">Nombre</label> <input id="agent-name" />
05
Anti-patrones y Prohibiciones
What NOT to do in neumorphic UI — with migration guidance
✓ Hacer — Contraste correcto

Texto blanco sobre primary teal (#006666) — ratio 5.7:1. El botón usa sombra suave acorde a la paleta, sin sobre-contraste.

✗ Evitar — Texto invisible sobre superficie
Texto gris claro ilegible sobre surface...

No usar colores con contraste inferior a 4.5:1. El gris #b0b0b0 sobre surface #E7E5E4 da ~1.4:1 — falla WCAG AA.

✓ Hacer — Sombra equilibrada y suave
Card

Sombras simétricas desde arriba-izquierda (luz blanca) y abajo-derecha (sombra oscura). Desplazamiento 6px, blur 12px — suave y orgánico.

✗ Evitar — Sombras duras y asimétricas
Hard Shadow

Sombras sin blur (box-shadow: 20px 20px 0 #aaa) destruyen la ilusión de material. El neumorfismo requiere blur generoso y desplazamientos pequeños.

✓ Hacer — Botón con affordance clara

El estado raised vs inset comunica visualmente si el elemento está activo o en reposo. La transición de sombra en :active es la affordance principal.

✗ Evitar — Elemento sin affordance interactiva
¿Soy un botón?

No usar elementos planos sin sombra neumórfica para acciones. El usuario no puede distinguir si es clickable. Nunca flat sin hover/active states.

06
QA Checklist
Executable in code review — click to mark complete