CULTIVA IA — Guía de Sistema de Diseño Artistic

Contexto y Objetivos

El sistema Artistic de CULTIVA IA define un lenguaje visual unificado para todos los productos digitales de la agencia: plataforma web, catálogo de recursos y dashboards de cliente.

Intención de diseño

Crear interfaces que transmitan autoridad técnica y creatividad audaz: tipografía expresiva con Limelight que comunica identidad fuerte, contraste máximo para legibilidad perfecta, y una paleta que combina la confianza del azul con la innovación del violeta.

Alto Contraste

Ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande. Sin compromisos estéticos que comprometan la legibilidad.

Tipografía Expresiva

Limelight para headings y CTAs. JetBrains Mono para datos, código y etiquetas. Jerarquía visual clara y consistente.

Mobile-First

Targets táctiles mínimo 44×44px. Comportamiento responsive documentado en cada componente. Sin gestos ambiguos.

Tokens de Color

Usar siempre tokens semánticos, nunca valores hex directos en el código de componentes.

Primary

--color-primary

#3B82F6

CTAs, links, focus

Secondary

--color-secondary

#8B5CF6

Acento, badges, gradientes

Success

--color-success

#16A34A

Confirmaciones, estados OK

Warning

--color-warning

#D97706

Alertas, información crítica

Danger

--color-danger

#DC2626

Errores, destructivos

Text

--color-text

#111827

Cuerpo de texto sobre claro

Surface

--color-surface

#FFFFFF

Fondos de cards en modo claro

Gradient

primary → secondary

90deg gradient

Headers, text highlight

Tipografía

Escala de tamaños: 12/14/16/18/24/30/36px. Limelight para identidad, JetBrains Mono para datos técnicos.

Heading H1 — Limelight 36px / 700 --fs-3xl

Automatiza tu Marketing con IA

Heading H2 — Limelight 30px / 700 --fs-2xl

Servicios de Agencia IA

Heading H3 — Limelight 24px / 700 --fs-xl

Generación de Contenido

Body — JetBrains Mono 16px / 400 --fs-base

CULTIVA IA es la agencia de inteligencia artificial que impulsa el crecimiento de tu negocio con automatización avanzada, contenido generado por IA y estrategias de marketing data-driven. Sin complejidad técnica para ti.

Label Caps — JetBrains Mono 12px / 600 Uppercase --fs-xs + uppercase

Categoría

Estado

Activo

api_key_xyz123

Escala de Espaciado

Unidad base: 4px. Todos los márgenes, paddings y gaps deben usar tokens de espaciado, no valores arbitrarios.

Tokens de Espaciado

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

--sp-6

24px

--sp-8

32px

Componente: Botones

Anatomía, variantes, estados e interacciones. Mínimo 44px de altura para accesibilidad táctil.

Variantes Principales

Uso por contexto:

Tamaños:

Estados especiales:

Reglas de Comportamiento

Estado	Visual	Interacción
default	Color de token sólido, sin sombra	Pointer cursor
hover	Oscurecer 10%, box-shadow glow 3px	Transición 150ms ease
focus-visible	Ring 3px offset 2px del color primario	Solo teclado/accesibilidad, NO en click
disabled	Opacity 40%, cursor not-allowed	No dispara eventos click
loading	Spinner centrado, texto transparent	pointer-events: none durante carga

Componente: Cards de Servicio

Cards utilizadas en el catálogo de servicios y listados de skills. Acento superior de gradiente obligatorio para cohesión visual.

🤖

Agentes IA

Automatiza flujos completos con agentes autónomos que trabajan 24/7 sin supervisión manual.

Automatización

✍️

Contenido IA

Genera artículos, copies y creatividades en minutos. Adaptado a tu voz de marca.

Contenido

📈

Marketing IA

Campañas optimizadas automáticamente con datos en tiempo real y modelos predictivos.

Marketing

Componente: Formularios

Inputs con labels en caps, focus ring visible, mensajes de error/éxito accesibles mediante aria-describedby.

Estados de Input

Nombre de la empresa *

Nombre legal o nombre comercial

Email de contacto *

Presupuesto mensual

Introduce un valor numérico válido

Servicio de interés

Descripción del proyecto

Componente: Navegación

Altura fija 64px. Logo Limelight + links en Mono. Indicador activo con border-bottom del color primario.

Desktop Nav

Componente: Badges y Etiquetas

Siempre en mayúsculas, fuente mono, padding 2px/8px. Usados para categorías, estados y metadatos.

Variantes semánticas

Automatización IA Generativa Activo Pendiente Error Marketing Agente Verificado

Requisitos de Accesibilidad

WCAG 2.2 AA obligatorio. Cada criterio debe ser verificable en code review antes de merge.

Criterios de Aceptación Testeables

Criterio	Requisito	Test	OK
Contraste texto/fondo	Ratio ≥ 4.5:1 texto normal, ≥ 3:1 texto grande	axe DevTools / Colour Contrast Analyser	✓
Navegación por teclado	Todos los interactivos alcanzables con Tab en orden lógico	Navegar sin ratón desde header a footer	✓
Focus visible	Ring 3px visible en focus-visible, no en :focus sin teclado	Inspeccionar en devtools con keyboard navigation	✓
Touch targets	Área mínima 44×44px para todos los interactivos	Chrome DevTools → toggle device mode	✓
Reduced motion	Animaciones desactivadas con prefers-reduced-motion	OS setting → reduced motion → verificar	✓
Etiquetas accesibles	Todo input tiene label asociado. Iconos tienen aria-label	Screen reader (VoiceOver/NVDA) navigation	✓
HTML semántico	nav, main, section, article, button vs div antes de ARIA	HTML validator + axe landmark check	✓

Anti-Patrones Prohibidos

Ejemplos concretos de qué NO hacer y la alternativa correcta. Incluir en code review como referencia.

No hacer

Usar valores hex directos en componentes en lugar de tokens

background: #3B82F6; /* hardcoded */

Hacer

Referenciar siempre el token semántico CSS

background: var(--color-primary);

No hacer

Texto gris claro sobre fondo oscuro sin verificar contraste

color: #888; /* ratio 2.3:1 — falla */

Hacer

Usar muted con ratio verificado mínimo 4.5:1

color: #9CA3AF; /* ratio 4.6:1 ✓ */

No hacer

Mezclar Limelight en body text y mono en headings

p { font-family: Limelight; } /* ilegible */

Hacer

Limelight exclusivo para headings y CTAs de impacto

h1,h2,h3,.btn { font-family: var(--font-primary); }

No hacer

Botones con altura inferior a 44px en mobile

height: 28px; /* inaccessible touch */

Hacer

min-height 44px garantiza target táctil suficiente

min-height: 44px; /* WCAG 2.2 SC 2.5.8 */

QA Checklist — Code Review

Ejecutar antes de aprobar cualquier PR que toque componentes de UI. Todos los items deben estar en verde.

Checklist de Revisión

✓

Tokens: No hay valores hex, rem o px hardcoded en componentes. Todos los valores usan variables CSS del sistema.
✓

Tipografía: Limelight solo en headings (h1-h3) y botones. JetBrains Mono en body, labels, código y datos.
✓

Contraste: Todos los pares texto/fondo verificados con herramienta automática. Ratio ≥ 4.5:1 para texto ≤18px.
✓

Touch targets: min-height 44px en todos los elementos interactivos. Verificado en breakpoint mobile (375px).
✓

Estados: Cada componente tiene default, hover, focus-visible, active y disabled. Sin estados implícitos.
✓

Semántica HTML: Se usan elementos nativos (<button>, <nav>, <label>) antes de recurrir a divs con ARIA.
Reduced motion: Animaciones envueltas en @media (prefers-reduced-motion: no-preference) o reducidas a 0 en prefer-reduced.
Dark mode: Si aplica, variables de color correctamente sobrescritas en :root[data-theme="dark"] o @media (prefers-color-scheme: dark).
Responsive: Componente probado en 375px, 768px y 1280px. Sin overflow horizontal en ningún breakpoint.
✓

Consistencia: Ningún componente introduce patrones nuevos sin documentarlos en esta guía primero.