Intención de Diseño
CULTIVA IA adopta el claymorfismo para transmitir tecnología accesible y resultados concretos: interfaces con volumen tridimensional suave, paleta verde-azul viva, y componentes que invitan a interactuar — sin sacrificar un ápice de legibilidad ni accesibilidad WCAG 2.2 AA.
Formas redondeadas 3D
Sombras multicapa
Brillo interno (inset highlight)
Gradientes suaves
Paleta saturada
Alto contraste
Movimiento suave
Tactilidad digital
Tokens de Diseño
Fundaciones del Sistema
Todos los componentes derivan de estos tokens. Nunca usar valores raw directamente en componentes — siempre referenciar el token.
Paleta de Color
Primary
--color-primary #16A34A
Accent
--color-accent #3B82F6
Secondary
--color-secondary #A855F7
Warning
--color-warning #D97706
Danger
--color-danger #DC2626
Surface
--color-surface #F0FDF4
| Token CSS | Valor | Uso |
|---|---|---|
| --color-primary | #16A34A | CTAs, éxito, primarios |
| --color-accent | #3B82F6 | Links, focus, secundarios |
| --color-text | #14532D | Texto principal |
| --color-danger | #DC2626 | Errores, destructivo |
Espaciado
--space-1 = 4px
--space-2 = 8px
--space-3 = 12px
--space-4 = 16px
--space-6 = 24px
--space-8 = 32px
Sombras Clay (multi-layer)
--shadow-sm
0 4px 16px rgba(primary,0.12), inset highlight
0 4px 16px rgba(primary,0.12), inset highlight
--shadow-md
0 8px 32px rgba(primary,0.18) + offset + inset
0 8px 32px rgba(primary,0.18) + offset + inset
--shadow-lg (hover)
0 16px 48px rgba(primary,0.22) — estado hover
0 16px 48px rgba(primary,0.22) — estado hover
Tipografía
Display XL
Poppins 900 · 32px · --text-display-xl
Heading L
Poppins 800 · 22px · --text-heading-l
Heading M
Poppins 700 · 17px · --text-heading-m
Body Regular — Texto del dashboard
Inter 500 · 15px · --text-body
Caption — Metadatos y labels
Inter 400 · 13px · --text-caption
code snippet · mono
JetBrains Mono 400 · 13px · --text-code
Border Radius
--radius-sm
8px
8px
--radius-md
16px
16px
--radius-xl
24px
24px
--radius-2xl
32px
32px
--radius-full
9999px
9999px
Componentes
Anatomía, Variantes y Estados
Cada componente debe implementar todos los estados listados. El brillo inset superior (highlight) es obligatorio en elementos interactivos.
Button
Botón principal de acción — elemento más tactil del sistema
Variantes
Estados
/* Anatomía CSS */
.btn-clay {
background: linear-gradient(145deg, light, dark);
border-radius: var(--radius-full);
box-shadow:
0 6px 20px rgba(primary, 0.4), /* drop */
0 2px 6px rgba(primary, 0.2), /* base */
inset 0 1px 0 rgba(255,255,255, 0.3); /* highlight */
}
Badge
Indicadores de estado, categoría o conteo — siempre con gradiente y sombra
Semántica de color
✓ Activo
⚡ IA en curso
⚠ Pendiente
✗ Error
★ Pro
Borrador
Reglas de uso
| Regla | Requisito |
|---|---|
| Mín. contraste sobre superficie | must 4.5:1 |
| Label máximo | should 20 caracteres |
| Ícono prefijo | should aria-hidden="true" |
| Gradiente obligatorio | must Siempre |
| Inset highlight | must Siempre |
Card
Contenedor de información — muestra métricas, agentes, resultados
AI
✓ Activo
Análisis de 47 keywords long-tail completado. Posicionamiento estimado en top 10 para 12 términos en 60 días.
border-radius: var(--radius-xl) · box-shadow: --shadow-md · ::before top border 3px gradient
Input / Form
Campos de formulario con estados de validación y focus clay
✗ Introduce un número válido (ej. 1500)
default: border #D1FAE5 · focus: glow ring rgba(primary,0.15) · error: border #DC2626
Estados de Interacción — Todos los Componentes
Cada componente interactivo MUST implementar estos estados. Sin excepción.
| Estado | CSS/Behavior | Requisito | Notas de Implementación |
|---|---|---|---|
| Default | box-shadow: --shadow-md |
must | Gradiente 145deg, inset highlight obligatorio |
| Hover | translateY(-4px) + --shadow-lg |
must | transition: 0.15–0.2s ease. No usar cubic-bezier extraño |
| Focus-visible | outline: 3px solid --color-accent; offset: 3px |
must | NUNCA outline:none sin alternativa visible |
| Active/Pressed | translateY(2px) + --shadow-sm |
must | Simula presión física — clave para tactilidad clay |
| Disabled | opacity: 0.7 + cursor: not-allowed |
must | No eliminar gradiente, solo desaturar levemente |
| Loading | spinner + aria-busy="true" |
should | Spinner en color contrastante, botón deshabilitado |
| Error | border: --color-danger + ring rgba(danger) |
must | Mensaje de error visible, role="alert" en el texto |
Accesibilidad
WCAG 2.2 AA — Criterios Testables
Cada criterio debe verificarse automáticamente en CI (axe-core) y manualmente en code review. "Testable" significa medible, no subjetivo.
Contraste de Color
✓Texto normal: mínimo 4.5:1 sobre surface
✓Texto grande (>18px bold): mínimo 3:1
✓Bordes de componentes interactivos: 3:1 vs adyacente
✓Iconos decorativos: aria-hidden="true"
Texto en verde #16A34A
✓ 4.7:1 · PASA AA
Texto claro
✗ 1.2:1 · FALLA
Teclado & Focus
✓Todos los interactivos alcanzables con Tab
✓Focus-visible nunca removido (WCAG 2.4.11)
✓Orden lógico DOM = orden visual
✓Escape cierra modals/dropdowns
✓Atrapas de foco en diálogos (focus trap)
✓Skip-link al inicio de páginas largas
Semántica & ARIA
✓Landmarks: main, nav, header, footer obligatorios
✓Botones: role="button" o tag <button> nativo
✓Badges de estado: aria-label descriptivo
✓Errores: aria-live="polite" en mensajes
✓Loading: aria-busy="true" + aria-label
Movimiento & Reducción
✓prefers-reduced-motion: desactivar translateY hover
✓Animaciones < 5s o con opción de pausa
✓No parallax sin control de usuario
✓Transiciones: máx. 0.3s para UI funcional
@media (prefers-reduced-motion: reduce) {
.btn-clay, .clay-card {
transition: none;
transform: none !important;
}
}
Anti-patrones
Prohibido en CULTIVA IA
Estas implementaciones rompen la coherencia visual o la accesibilidad. Todo PR que las contenga debe ser rechazado en code review.
✗ Prohibido
Glassmorfismo mezclado con Clay
No usar backdrop-filter: blur() junto con box-shadow de clay. Las dos metáforas visuales (cristal vs. barro) se contradicen y generan incoherencia perceptual.
← Este componente viola el sistema
✓ Correcto
Clay puro con inset highlight
Usar exclusivamente box-shadow multicapa con inset superior blanco. El brillo debe venir del inset, nunca de backdrop-filter.
← Este componente es clay correcto
✗ Prohibido
Text bajo contraste sobre superficie clay
Texto #6B7280 sobre fondo #F0FDF4 tiene ratio 3.2:1 — FALLA WCAG AA para texto normal. Siempre usar --color-text (#14532D) o --color-text-muted (#166534).
✗ Texto gris 400 sobre superficie verde
✓ Texto --color-text sobre superficie verde
✗ Prohibido
Múltiples metáforas visuales
No mezclar flat design, neomorfismo, y clay en la misma pantalla. Elegir un único lenguaje visual por producto. Variaciones permitidas solo en categorías de producto distintas.
Comportamiento Responsivo
Adaptación por Breakpoint
El sistema es desktop-first pero degrada de forma elegante. Los efectos clay se reducen en móvil para mejorar rendimiento.
Desktop ≥1024px
Sombras completas multicapa. Hover translateY(-4px). Cards con padding 32px. Grid 3 columnas.
Tablet 768–1023px
Sombras reducidas 50%. Hover translateY(-2px). Cards padding 24px. Grid 2 columnas.
Móvil <768px
Solo shadow-sm. Sin translateY hover. Cards padding 16px. Grid 1 columna. Botones full-width.
Checklist de QA
Ejecutar en Cada Code Review
Cada punto debe verificarse antes de aprobar un PR. Los items marcados con herramienta son automatizables en CI.
Visual · Clay Fidelity
✓
Todos los componentes tienen inset highlight (0 1px 0 rgba(255,255,255,0.X))✓
Border-radius usa tokens (--radius-sm/md/xl/2xl/full)✓
Gradientes van de light (top) a dark (bottom) — 135–145deg✓
box-shadow tiene mínimo 2 capas (drop + base)✓
No hay backdrop-filter ni glassmorfismo✓
No hay flat design sin sombra en elementos interactivosAccesibilidad · a11y
✓
axe-core 0 errores críticos y 0 serios en Storybook✓
Contraste mínimo 4.5:1 verificado con Colour Contrast Analyser✓
Navegación completa con Tab sin ratón✓
Focus-visible visible (nunca outline:none sin alternativa)✓
@media prefers-reduced-motion implementado✓
NVDA/VoiceOver: labels correctos en interactivosTokens · Consistencia
✓
0 valores raw de color (#hex) en componentes — solo tokens✓
Espaciado en múltiplos de 4px (4/8/12/16/24/32)✓
Tipografía solo Poppins / Inter / JetBrains Mono✓
Transiciones usan ease o ease-out (no linear)✓
Duraciones: 0.15s (micro), 0.2s (hover), 0.3s (entrada)Estados · Interacción
✓
Default → Hover → Active → Focus → Disabled implementados✓
Estado error con mensaje y aria-live✓
Loading con aria-busy y spinner accesible✓
Hover no funcional en táctil (pointer:coarse)✓
Botones destructivos requieren confirmación