Punto de partida
Contexto y objetivos
El sistema de diseño editorial de CULTIVA IA define el lenguaje visual de todos los informes "Inteligencia Aplicada" que se entregan mensualmente a clientes tras sprints de consultoría.
Objetivo primario
Crear publicaciones ejecutivas que comuniquen resultados de IA de forma clara, sofisticada y consistente, sin requerir diseñadores en cada entrega.
Audiencia
CMOs, directores de marketing y fundadores de PYMEs tech. Leen en diagonal. Priorizan métricas y recomendaciones accionables.
Constraint clave
El sistema debe funcionar tanto en PDF de alta fidelidad como en versión web interactiva sin bifurcar el código fuente.
Fundaciones
Tokens de color
Los tokens son la única fuente de verdad. Nunca usar valores hexadecimales crudos en componentes; referenciar siempre el token semántico.
Espaciado
Escala de espaciado — 4/8/12/16/24/32
Fundaciones
Sistema tipográfico
Escala expresiva desktop-first con tres familias: Oswald (display), Nunito (cuerpo) y JetBrains Mono (labels, código).
Estructura
Grid editorial — 12 columnas
Grid de 12 columnas con gutters de 24px. Máximo contenedor: 1200px. Las publicaciones deben respetar estos layouts canónicos.
Biblioteca
Componentes editoriales
Componentes listos para usar. Cada uno define anatomía, variantes, estados y comportamiento responsive.
Tarjeta KPI
Muestra una métrica clave con valor, delta respecto al periodo anterior y descripción. Cuatro variantes semánticas.
Regla de anatomía
El borde superior (border-top-color) debe coincidir con el token semántico del KPI: primary para neutral, success/warning/danger según tendencia. El delta debe incluir la dirección (flecha) como texto visible, no solo color.
Cita destacada
Para voz del cliente o insight clave. Anatomía: comillas decorativas + texto + autor con avatar inicial.
"Desde que CULTIVA IA automatizó nuestra generación de contenido, pasamos de publicar 2 posts semanales a 14, con mayor engagement y sin aumentar el equipo de marketing."
Tabla de datos
Para comparativas de rendimiento multicanal. Header dark navy, filas con hover state, badges semánticos, mini trend bars.
| Canal | Impresiones | Clics | CTR | Conversiones | ROAS | Tendencia | Estado |
|---|---|---|---|---|---|---|---|
| Meta Ads | 284.500 | 6.820 | 2.40% | 548 | 4.2× | Activo | |
| Google Ads | 112.300 | 4.490 | 4.00% | 312 | 3.8× | Activo | |
| 48.200 | 3.860 | 8.01% | 197 | 6.1× | Top | ||
| SEO Orgánico | 67.800 | 2.440 | 3.60% | 89 | — | En curso | |
| LinkedIn Ads | 31.200 | 620 | 1.99% | 28 | 1.4× | Revisar |
WCAG 2.2 AA
Requisitos de accesibilidad
Todos los componentes deben superar los criterios WCAG 2.2 AA antes de publicar. Cada ítem es testeable en code review.
Criterios de aceptación testables
Contraste mínimo 4.5:1 para texto normal; 3:1 para texto grande (>18px bold o >24px regular). Testear con axe o Colour Contrast Analyser.
1.4.3 AAFocus visible: outline de 3px en color #A855F7 con offset de 2px en todos los elementos interactivos. Nunca outline:none sin alternativa.
Targets táctiles ≥44×44px. Los botones e iconos interactivos deben tener área mínima de toque de 44px en ambas dimensiones.
2.5.8 AAHTML semántico antes de ARIA. Usar <table>, <nav>, <main>, <section> nativos. ARIA solo para patrones sin equivalente HTML.
Reduced-motion: todas las animaciones deben respetar @media (prefers-reduced-motion: reduce). No animar sin propósito informativo.
Labels descriptivos: aria-label o texto visible en todos los KPI, gráficas y datos numéricos. Los emojis decorativos deben llevar aria-hidden="true".
Pares de contraste verificados
Calidad
Anti-patrones y migraciones
Prohibiciones explícitas para mantener la consistencia del sistema. Cada prohibición viene con su alternativa correcta.
Usar color gris claro sobre fondo blanco para cuerpo de texto sin verificar ratio.
Usar --color-text-muted (#64748B) que tiene ratio 4.6:1 sobre blanco.
Mezclar valores de padding/margin que no pertenecen a la escala (15px, 22px, 38px).
padding: 15px 22px; margin-top: 38px;
Siempre referenciar la escala 4/8/12/16/24/32 mediante tokens CSS.
padding: var(--space-4) var(--space-6);
margin-top: var(--space-8);
Usar únicamente verde/rojo para indicar estado sin etiqueta textual. Los usuarios daltónicos no percibirán la diferencia.
Siempre acompañar el color semántico con texto legible y un ícono redundante.
Code Review
QA Checklist
Ejecutar antes de cada publicación. Todos los ítems deben estar marcados para aprobar la entrega al cliente.
1. Tokens y fundaciones
-
Todos los colores usan tokens CSS (
var(--color-*)), sin hexadecimales crudos en componentes. - El espaciado (padding, margin, gap) referencia exclusivamente la escala 4/8/12/16/24/32.
- Todos los estilos tipográficos pertenecen a la escala definida; sin font-size arbitrarios.
2. Componentes
- Las tarjetas KPI tienen border-top semántico (primary / success / warning / danger) y delta textual con dirección.
- Los badges combinan color + texto descriptivo (nunca solo color).
-
Las tablas tienen
<thead>conscope="col"y header de color--color-secondary. - Las citas destacadas incluyen autor con nombre y rol (no solo iniciales).
3. Accesibilidad WCAG 2.2 AA
- Contraste verificado con axe-core o Colour Contrast Analyser: mínimo 4.5:1 para texto base, 3:1 para texto grande.
-
Focus visible con outline 3px en
#A855F7presente en todos los elementos interactivos. -
Todos los emojis e íconos decorativos tienen
aria-hidden="true"; los informativos tienenaria-label. - Navegación completa por teclado: tab-order lógico, sin trampas de foco.
-
Animaciones respetan
@media (prefers-reduced-motion: reduce).
4. Contenido y tono
- Todos los datos numéricos tienen fuente citada (pie de tabla o nota al pie).
- El tono es conciso, confiante y profesional; sin jerga técnica sin definir.
- Cada sección termina con una recomendación accionable o siguiente paso claro.
5. Responsive y exportación
- Revisado en viewport 375px (mobile), 768px (tablet) y 1280px (desktop).
- PDF exportado sin recursos externos; todas las fuentes embebidas o usando system-ui fallback.
- Número de página visible en el componente footer de cada slide/página.