01 — Tokens de color

Todos los colores deben referenciar siempre los tokens CSS, nunca valores hexadecimales directos. Esta restricción garantiza coherencia y facilita el theming.

Primary
--color-primary · #111111
Secondary
--color-secondary · #f1f1f1
Surface
--color-surface · #FFFFFF
Text
--color-text · #111827
Success
--color-success · #16A34A
Warning
--color-warning · #D97706
Danger
--color-danger · #DC2626
Muted
--color-muted · #6B7280

02 — Tipografía

Gelasio como serif principal para contenido editorial y display; Ubuntu Mono para etiquetas técnicas, código y metadatos. Escala 14/16/18/24/32/40 sobre grilla de 8pt.

Display — 40px · Gelasio 700 · tracking -0.025em
La inteligencia artificial como ventaja competitiva
var(--text-2xl) · var(--font-display) · weight 700
H1 — 32px · Gelasio 600 · tracking -0.015em
Cómo CULTIVA IA transforma la operativa de tu agencia
var(--text-xl) · var(--font-display) · weight 600
H2 — 24px · Gelasio 600
Automatización de propuestas comerciales
var(--text-lg) · var(--font-display) · weight 600
Body Lead — 18px · Gelasio 400
Nuestro pipeline de IA genera en segundos lo que antes tomaba horas: borradores de contenido, análisis competitivos y propuestas personalizadas para cada cliente.
var(--text-md) · var(--font-primary) · weight 400
Body — 16px · Gelasio 400
El sistema de diseño editorial de CULTIVA IA establece las bases visuales para todos los materiales digitales de la agencia. Cada decisión tipográfica está anclada a tokens semánticos que garantizan coherencia a escala, facilitando la colaboración entre diseñadores e ingenieros sin fricciones.
var(--text-sm) · var(--font-primary) · weight 400
Label / Mono — 14px · Ubuntu Mono 400
PUBLICADO EL 14 JUN 2026 · CATEGORÍA: AUTOMATIZACIÓN · 4 MIN DE LECTURA
var(--text-xs) · var(--font-mono) · weight 400 · tracking 0.1em

03 — Escala de espaciado

Grilla base de 8pt. Todo el espaciado debe derivarse de los tokens --space-*. Nunca usar valores arbitrarios como 13px, 22px o 37px.

Token Valor Uso habitual Visual
--space-18pxGap mínimo, padding interior compacto
--space-216pxPadding interno de componente
--space-324pxSeparación entre elementos relacionados
--space-432pxPadding de sección, margen de card
--space-540pxSeparación entre subsecciones
--space-648pxSeparación entre secciones
--space-864pxPadding vertical de sección
--space-1080pxSeparación editorial entre capítulos

04 — Componentes

Anatomía, estados y variantes de los componentes básicos del sistema. Todo touch target mínimo 44×44px. Estados requeridos: default, hover, focus-visible, disabled, error.

Botones
Regla de botones
El botón btn-primary debe ser el único CTA prominente por pantalla. Nunca usar más de 1 botón primario en un mismo contexto visual. btn-secondary y btn-ghost son acciones secundarias o destructivas.
Etiquetas / Badges
IA generativa Branding Activo Pendiente Error Nuevo
Callouts / Alertas
Éxito
El informe de cliente ha sido generado y enviado correctamente a 3 destinatarios.
Atención
El límite de créditos de IA para este mes se está agotando. Quedan 12 % disponibles.
Error
No se pudo conectar con la API de contenido. Verifica la clave de acceso en ajustes.
Tarjetas
Servicio · Contenido IA

Generación de artículos SEO automáticos

Produce 30 artículos optimizados mensuales con un solo brief. Revisión humana incluida antes de publicar.

Activo Cliente: TechCorp SL
Servicio · Automatización

Pipeline de propuestas comerciales

Genera propuestas personalizadas en 90 segundos. Integrado con CRM y firma digital.

Configurando Cliente: Nova Studio
Recurso · Arsenal

Skill: Análisis competitivo profundo

Extrae insights de 10 competidores, genera FODA y matriz de posicionamiento lista para presentar.

Nuevo Agencia interna
Formularios
Correo verificado correctamente.
Debe incluir el protocolo: https://acme.es

05 — Layout editorial

Estructura de artículo o hero con grid de dos columnas. Jerarquía visual: kicker → titular → bajada → firma. Nunca invertir el orden de lectura.

Tendencias · Inteligencia Artificial · 5 min

El modelo de agencia del futuro ya existe — y usa IA como columna vertebral

Las agencias que integran IA en su operativa generan 3× más propuestas, retienen el 90 % de sus clientes y escalan sin aumentar plantilla. CULTIVA IA documenta el modelo.

Por Álvaro Gimeno · Fundador, CULTIVA IA · 14 Jun 2026
16:9 · Imagen de portada

06 — Requisitos de accesibilidad

WCAG 2.2 AA. Todo requisito debe ser comprobable en revisión de código o prueba de usuario. Nunca depender de color como único indicador de estado.

Contraste mínimo
#111111 sobre #FFFFFF: ratio 19.5:1 (pasa AA y AAA). #111111 sobre #f1f1f1: ratio 16.9:1 (pasa AA y AAA). Nunca usar #6B7280 (muted) como texto principal sobre fondo blanco para tamaños inferiores a 18px — ratio 4.6:1 pasa AA normal pero revisar siempre en contexto.
Teclado
Todos los controles interactivos deben ser alcanzables y activables con Tab / Enter / Space. Focus-visible siempre visible con outline 3px offset 3px.
Touch targets
Mínimo 44×44px para botones, enlaces de navegación y controles de formulario. Sin excepción.
HTML semántico primero
Usar elementos nativos (<button>, <input>, <label>) antes que ARIA. Solo añadir roles ARIA cuando no exista equivalente nativo.
Reduced motion
Todas las transiciones deben respetar @media (prefers-reduced-motion: reduce). Nunca usar animaciones de más de 300ms sin esta media query.

07 — Anti-patrones

Cada prohibición está anclada a un token, umbral o ejemplo concreto — no a adjetivos subjetivos. Estas reglas bloquean los errores más frecuentes en implementación.

✓ Correcto
Usar tokens para color:
color: var(--color-primary)

Espaciado desde la grilla:
padding: var(--space-3) var(--space-4)

Tipografía por token:
font-family: var(--font-display)
✗ Incorrecto
Valores hexadecimales en línea:
color: #111111 — rompe el theming

Espaciado arbitrario:
padding: 13px 22px — fuera de grilla

Font stack manual:
font-family: 'Georgia', serif — omite el token
✓ Correcto
Contraste WCAG:
Texto #111111 sobre fondo #FFFFFF ✓

Estado de error con icono + texto:
Nunca solo color rojo sin mensaje de texto

Jerarquía de botones:
Un único btn-primary por vista
✗ Incorrecto
Bajo contraste:
Texto #aaaaaa sobre #FFFFFF — ratio 2.3:1 ✗

Color como único indicador:
Borde rojo sin mensaje = inaccesible

Múltiples primarios:
3 botones azules en el mismo formulario = confusión

08 — QA Checklist

Ejecutable en code review. Cada ítem es testable; si no se puede verificar en revisión, no pertenece aquí.

Tokens y fundamentos
  • Sin valores hex directos en CSS — solo var(--color-*)
  • Espaciados son múltiplos de 8pt
  • Tipografía usa var(--font-*) y var(--text-*)
  • Tokens de radio: --radius-sm (4px) y --radius-md (8px)
Tipografía
  • Gelasio cargado desde Google Fonts (o local)
  • Ubuntu Mono solo en labels, código y metadatos
  • Solo tamaños de la escala 14/16/18/24/32/40
  • Line-height mínimo 1.5 en body text
Accesibilidad
  • Ratio contraste ≥ 4.5:1 para texto normal
  • Ratio contraste ≥ 3:1 para texto grande (18px+ o 14px bold)
  • Focus-visible visible en todos los interactivos
  • Touch targets ≥ 44×44px
  • Labels asociados a inputs con for/id
  • Imágenes con alt descriptivo o alt="" decorativas
Componentes
  • Máximo 1 btn-primary por contexto visual
  • Estados default / hover / focus / disabled implementados
  • Errores de form: color + icono + texto
  • Cards con estado hover explícito
  • Reducción de motion respetada en transiciones
Layout y responsive
  • Grids colapsan a 1 columna en < 600px
  • Max-width 960px con padding lateral mínimo 32px
  • Sin overflow horizontal en ningún breakpoint
  • Textos largos no rompen layouts (overflow: hidden / clamp)
Contenido y tono
  • Labels de botón: verbo de acción (Comenzar, Enviar, Ver)
  • Sin textos "haz clic aquí" o "leer más" sin contexto
  • Errores en primera persona del sistema, no culpan al usuario
  • Jerarquía tipográfica respeta el flujo de lectura: display → h1 → h2 → body