1. Contexto y Objetivos

Design intent · Principios rectores

Intención de diseño

Una plataforma, no una web

La interfaz de CULTIVA IA debe sentirse como explorar una instalación digital interactiva — no como navegar un dashboard genérico de SaaS. El fondo continuo verde oscuro (#00592B) actúa como canvas de exhibición permanente; las tarjetas blancas con sombras duras emergen sobre él como objetos físicos en una galería. Los botones inclinados, las tipografías condensadas en mayúsculas y los bloques geométricos crean tensión visual que evoca arcade y cartel gráfico.

Principio rector Immersive-First

Canvas único — fondo #00592B en toda la página, sin alternar colores de sección.

Contraste extremo — cards blancas sobre verde, texto negro sobre blanco, sombras duras negras.

Tipografía como elemento — Oswald bold/caps comunica la marca; el cuerpo también usa Oswald.

2. Tokens de Diseño

Color · Tipografía · Espaciado · Sombras

2.1 — Paleta de color
Primary --color-primary #00592B
Secondary --color-secondary #0023D1
Highlight --color-highlight #FF2D7E
Surface --color-surface #FFFFFF
Text --color-text #111827
Success --color-success #16A34A
Warning --color-warning #D97706
Danger --color-danger #DC2626
2.2 — Variables CSS (implementación)
/* tokens/colors.css */ :root { /* Canvas */ --color-primary: #00592B; /* canvas, nav bg */ --color-secondary: #0023D1; /* accent blocks, links */ --color-highlight: #FF2D7E; /* CTAs, activos, hover underlines */ /* Semantic */ --color-surface: #FFFFFF; /* card backgrounds */ --color-text: #111827; /* text on white, borders */ --color-text-inv: #FFFFFF; /* text on canvas/dark */ --color-muted: #6B7280; /* subtext, metadata */ /* Status */ --color-success: #16A34A; --color-warning: #D97706; --color-danger: #DC2626; /* Shadows — hard offset, no blur */ --shadow-card: 6px 6px 0px #111827; --shadow-btn: 4px 4px 0px #111827; --shadow-btn-hover: 6px 6px 0px #111827; }
2.3 — Escala tipográfica
text-4xl · 64px · 700
Oswald · Hero
CULTIVA IA
text-3xl · 48px · 700
Oswald · Heading H1
Sistema de Diseño
text-2xl · 32px · 600
Oswald · Heading H2
Tokens de Color
text-xl · 24px · 600
Oswald · Heading H3
Card de Skill — Título
text-lg · 20px · 400
Oswald · Body Large
Descripción del servicio de automatización de marketing digital
text-md · 16px · 300
Oswald · Body Regular
Conectamos tu negocio con el poder de la IA de forma práctica y accesible.
text-sm · 14px · 300
Oswald · Body Small
Metadata · Fecha · Etiquetas de contenido secundario
text-xs · 12px · 700
JetBrains Mono · Label
AUTOMATIZACIÓN · SKILL · v2.1.0
2.4 — Escala de espaciado
space-1 · 4px · --space-1
space-2 · 8px · --space-2
space-3 · 12px · --space-3
space-4 · 16px · --space-4
space-6 · 24px · --space-6
space-8 · 32px · --space-8

3. Componentes

Anatomía · Estados · Variantes · Comportamiento

3.1 — Card de Skill

Automatización

Email Sequences

Genera secuencias de email de onboarding y nurturing con IA, personalizadas por segmento de cliente.

Nivel: Intermedio Activa

Contenido

Social Content

Crea calendarios editoriales y posts para LinkedIn, Instagram y Twitter adaptados a la voz de marca.

Nivel: Básico Popular

Datos

Analytics Report

Interpreta datos de GA4 y genera informes ejecutivos con insights accionables en minutos.

Nivel: Avanzado Nuevo
Elemento Token Regla
card-bg--color-surface (#FFF)Siempre blanco sobre canvas verde. No usar variantes grises.
card-border--border (2px #111827)Borde negro 2px en todos los lados. Obligatorio.
card-shadow--shadow-card (6px 6px 0)Shadow dura sin blur. Offset fijo; no usar box-shadow con blur.
accent-bar--color-secondary / highlightFranja superior 4px indica categoría. Azul=default, Pink=popular, Verde=nuevo.
card-titletext-xl Oswald 700 uppercaseSiempre en mayúsculas. Max 3 palabras.
card-bodytext-sm Oswald 300Max 2 líneas en desktop. Truncar con ellipsis si excede.
hovertranslate(-2px,-2px) + shadow 8pxAnimación 0.12s ease. Sin escala; sólo desplazamiento.
3.2 — Botones
Primary · Default
Primary · Hover*
Primary · Active*
Primary · Disabled
Secondary · Default
Size · SM
Size · LG
Ghost (canvas)
EstadoTransformaciónShadowRegla
defaultskewX(-2deg)4px 4px 0 #111827Base. Inclinación del botón es obligatoria en Primary y Secondary.
hoverskewX(-2deg) translate(-2,-2)6px 6px 0 #111827Simula "levantar" el botón. Transición 0.1s ease.
focus-visibleskewX(-2deg)shadow-btn + outlineoutline 3px solid #FF2D7E + offset 3px. WCAG 2.4.11 obligatorio.
activeskewX(-2deg) translate(2,2)2px 2px 0 #111827Simula "presionar". No usar scale().
disabledskewX(-2deg)2px 2px 0 #111827opacity 0.4. pointer-events:none. aria-disabled="true".
3.3 — Badges de servicio
Automatización Popular Activo Beta Deprecado Branding Gratuito
VarianteUso semánticoToken de color
badge-blueCategoría de servicio / tipo--color-secondary
badge-pinkDestacado / popular / trending--color-highlight
badge-greenEstado activo / nuevo / éxito--color-success
badge-warningBeta / experimental / precaución--color-warning
badge-dangerDeprecado / error / bloqueado--color-danger
badge-whiteNeutral / sobre canvas verde--color-surface
badge-outlinePrecio gratuito / info secundariargba(fff,0.6) border
3.4 — Navigation Header
ElementoEspecificaciónEstado
nav-bg--color-primary, border-bottom 2px #111827Sticky. z-index 100.
nav-logoOswald 700 20px uppercase. Span accent en --color-highlight.Siempre visible. No truncar.
nav-linkJetBrains Mono 12px 700 uppercase. opacity 0.7 → 1 on hover.Hover: border-bottom 2px #FF2D7E. Active: border permanente.
nav-badgeVersión del sistema. JetBrains Mono, bg #FF2D7E, shadow-badge.Sólo lectura. No interactivo.
focus-visiblenav-link debe recibir outline 3px #FF2D7E al recibir foco.WCAG 2.4.7 obligatorio.
responsiveEn mobile (<768px): hamburger menu. Links colapsan en drawer.Drawer en canvas verde con border derecho 2px.

4. Accesibilidad

WCAG 2.2 AA · Keyboard-first · Criterios verificables

Contraste de color

  • Texto negro (#111827) sobre blanco (#FFF): ratio 16.1:1 — PASA AA y AAA.
  • Texto blanco (#FFF) sobre verde (#00592B): ratio 5.8:1 — PASA AA para texto normal.
  • Badge pink (#FF2D7E) con texto blanco: ratio 3.6:1 — PASA AA para texto grande y UI.
  • Texto muted (#6B7280) sobre blanco: ratio 4.6:1 — PASA AA texto normal.
  • PROHIBIDO: texto blanco sobre warning (#D97706) sin verificar ratio.

Teclado e Interacción

  • Todos los botones, links y cards interactivos deben ser alcanzables con Tab.
  • Orden de foco debe seguir el flujo visual (izquierda-derecha, arriba-abajo).
  • focus-visible obligatorio: outline 3px #FF2D7E, offset 3px. No usar outline:none sin alternativa.
  • Cards interactivas deben implementar role="button" y keydown Enter/Space.
  • Modales y drawers deben atrapar el foco y liberarlo al cerrar (focus trap).

Semántica HTML

  • Usar etiquetas semánticas: nav, main, section, header, footer, article.
  • Cada sección de contenido debe tener un heading de nivel apropiado (h1 → h6).
  • Imágenes decorativas: alt="" vacío. Imágenes informativas: alt descriptivo.
  • Botones con sólo icono deben tener aria-label descriptivo.
  • Badges de estado deben tener role="status" o ser anunciados por aria-live.

Movimiento y Animación

  • Implementar prefers-reduced-motion: desactivar translate y skew transitions si el usuario lo solicita.
  • No usar animaciones de más de 5 segundos sin control de pausa.
  • El efecto hover de cards (translate) debe ser opcional; la interacción no debe depender de él.
  • Flashes: verificar que ningún elemento parpadea más de 3 veces/segundo (WCAG 2.3.1).

5. Anti-patrones

Implementaciones prohibidas y migraciones

Background alternado. Usar secciones con fondo blanco, gris o diferente al canvas verde. El lienzo DEBE ser verde continuo (#00592B) en toda la página.

Canvas único. Toda la página usa background:#00592B. Las cards son los únicos elementos con fondo blanco. Los separadores son bordes, no cambios de color.

Sombras con blur. box-shadow:0 4px 12px rgba(0,0,0,0.3). Las sombras difusas destruyen la estética de exhibit. PROHIBIDO en cards y botones.

Hard shadows. box-shadow: 6px 6px 0px #111827. Offset fijo, sin blur (tercer valor =0). Siempre color negro sólido.

Tipografía blanda. Usar Inter, Roboto o system-font para headings. Oswald condensado es la identidad visual; no se puede sustituir por conveniencia.

Oswald siempre. Headers y body en Oswald. Fallback: sans-serif. JetBrains Mono exclusivamente para labels técnicos, código y metadata.

Botones sin inclinación. Buttons rectangulares planos sin skewX. La inclinación (-2deg) en Primary y Secondary es parte de la identidad del sistema.

Skew consistente. transform:skewX(-2deg) en .btn-primary y .btn-secondary. Ghost buttons pueden ser rectos si el contexto lo requiere.

outline:none sin reemplazo. Eliminar el outline de foco sin implementar alternativa. Esto viola WCAG 2.4.7 y hace la interfaz inaccessible para usuarios de teclado.

focus-visible obligatorio. Siempre: outline:3px solid #FF2D7E + outline-offset:3px en :focus-visible. Se puede ocultar en :focus (no focus-visible).

Notas de migración

Componentes pre-sistema

Si existen componentes anteriores al Sistema de Diseño Inmersivo v1.0: (1) Inventariar en Notion con screenshot. (2) Mapear tokens actuales vs tokens del sistema. (3) Migrar uno por uno siguiendo la tabla de anti-patrones. (4) No mezclar estilos antiguos y nuevos en la misma vista.

6. Contenido y Tono

Voice & Tone · Etiquetas · Microcopy

ContextoTonoEjemplo correctoEvitar
CTA botonesAcción directa, imperativo corto"Explorar Skills" / "Activar Ahora""Haz click aquí" / "Ver más información"
Card titlesSustantivo + verbo implícito, mayúsculas"EMAIL SEQUENCE" / "SOCIAL CONTENT""Generador de secuencias de email marketing"
Card bodyBeneficio concreto, voz activa, max 2 líneas"Genera secuencias de nurturing listas para enviar en minutos.""Esta herramienta puede ser usada para generar..."
BadgesUna o dos palabras, adjetivo/estado"Activo" / "Beta" / "Popular""Actualmente en fase de pruebas beta"
Labels técnicosUppercase, monospace, conciso"NIVEL: AVANZADO" / "v2.1.0""Nivel de dificultad: Avanzado para expertos"
Estados de errorConcreto y accionable, no culpabilizador"No se pudo guardar. Inténtalo de nuevo.""Error 500: Internal server error"

7. QA Checklist

Code review · Verificación por componente

Visual & Tokens
  • Background de página es exclusivamente #00592B (--color-primary). Sin secciones de otro color.
  • Cards usan background:#FFF, border:2px solid #111827, box-shadow:6px 6px 0 #111827.
  • Botones Primary/Secondary tienen transform:skewX(-2deg) aplicado.
  • Sombras NO tienen blur (3er valor del box-shadow = 0px).
  • Tipografía de headings es Oswald. Labels técnicos son JetBrains Mono.
  • Badges tienen border:2px solid #111827 y box-shadow:2px 2px 0 #111827.
  • Espaciado respeta la escala 4/8/12/16/24/32. Sin valores arbitrarios (ej: 15px, 22px).
  • Textos en cards usan Oswald weight 300 para body y 700 para títulos.
Accesibilidad & Interacción
  • Todos los botones tienen :focus-visible con outline 3px solid #FF2D7E + offset 3px.
  • Ratio de contraste verificado con herramienta (WebAIM Contrast Checker o axe).
  • Cards interactivas tienen role="button" tabindex="0" y manejan keydown Enter/Space.
  • Botones disabled tienen aria-disabled="true" además de atributo HTML disabled.
  • Nav header tiene role="navigation" y aria-label descriptivo.
  • Imágenes tienen atributo alt (vacío si decorativas, descriptivo si informativas).
  • @media (prefers-reduced-motion:reduce) desactiva transitions de cards y botones.
  • Tab order es lógico y sigue el flujo visual del layout.

Comandos de verificación recomendados
# Axe-core via CLI (accesibilidad) npx @axe-core/cli http://localhost:3000 --exit # Lighthouse (performance + a11y) npx lighthouse http://localhost:3000 --only-categories=accessibility # Verificar tokens CSS no sobreescritos grep -rn "box-shadow" src/components --include="*.tsx" | grep -v "shadow-none" # Buscar uso de outline:none sin alternativa grep -rn "outline: none\|outline:none" src/ --include="*.css"