CASO PRINCIPAL · PRENSA IBÉRICA · 2023—2026
42DS — De unos fundamentos compartidos a un design system operable por IA.
Prensa Ibérica necesitaba un sistema capaz de soportar distintas marcas, tecnologías y necesidades editoriales sin congelar el negocio. 42DS se convirtió en la arquitectura compartida que conectó diseño, front-end, desarrollo y, más adelante, flujos asistidos por IA.
- Mi rol
- Product Designer & Front-End Engineer
- De qué me ocupo
- Arquitectura de design tokens (Figma → JSON → Style Dictionary) · WCAG 2.1 AA · rendimiento CSS y reducción de deuda técnica
- Sistema
- Figma · SCSS · HTML · JS · Storybook · entrega a Vue
La historia de 42DS es una progresión
- Estandarizar los fundamentos.
- Componer patrones de producto reutilizables.
- Hacer el sistema comprensible para las personas y para la IA.
- Familias de componentes
- 134
- Niveles de composición
- 3
- Modos de IA especializados
- 13
Acto 01
Cómo está construido el sistema
La arquitectura de un vistazo
Un único núcleo. Varias capas de composición y entrega.
42DS se entiende mejor como un sistema de relaciones: los fundamentos alimentan los componentes reutilizables, la configuración de marca cambia la expresión y los destinos de producción consumen la misma lógica compartida.
Jerarquía de composición
Primitivas pequeñas que se convierten en productos editoriales.
La jerarquía comunica la escala sin tratar Atomic Design como un dogma. Las primitivas de nivel más bajo se componen en patrones de producto cada vez más contextuales.
05Patrones de producto
04Organismos
03Moléculas
02Átomos
01Fundamentos
Acto 02
Lo que había que decidir
El problema de negocio
Unificar sin parar la compañía.
Prensa Ibérica había crecido hasta convertirse en un ecosistema multimarca con distintas tecnologías, identidades y decisiones heredadas. La unificación tenía que ocurrir mientras el trabajo del día a día —correcciones, patrocinios, cambios visuales y peticiones editoriales— seguía adelante.
Así que el primer trabajo no fue «diseñar el sistema nuevo». Fue entender el que ya existía: auditar el rendimiento y la complejidad del CSS, aprender el legacy e identificar qué podía pasar a ser compartido.
Fundamentos
Separar lo global de lo específico de cada marca.
La línea la tracé por lo que una marca puede redefinir, no por dónde vive el código. Cuatro de las cinco capas son compartidas. Solo cambia la configuración de marca.
Compartido por todas las marcas
Por marca
Acto 03
El sistema en producción
Fundamentos de diseño · reconstruidos en código
Enseñar el sistema, no la portada de Figma.
En lugar de mostrar miniaturas de archivos, el portfolio reconstruye las decisiones de diseño subyacentes como piezas front-end funcionando: tokens, controles, formularios y navegación.
Fundamentos · sistema funcionando
Los tokens definen la identidad. La rejilla define el ritmo.
Estas piezas están reconstruidas a partir de la arquitectura SCSS de 42DS: custom properties de CSS para el contexto de marca y una rejilla responsive de 12 columnas con breakpoints y reglas de espaciado reales.
Una única API semántica, distintas marcas.
--color-primary
#f53036
--color-primary#f53036--color-black#000 / compartido--color-white#fff / compartido--font-stackstack sans-serif del sistema--font-primarycontexto de marca--font-size-basis1.6rem--font-height-basis2rem$max-width-grid1680px$max-width-grid-p-less1920pxcolumna8.333333%Estructura compartida. El contexto de marca cambia la expresión.
El componente no necesita una reescritura específica por marca.
12 columnas. Cuatro contextos responsive.
Anatomía de un componente
Un componente es un contrato, no solo un dibujo.
Cada pieza conecta la intención de diseño, la estructura reutilizable y el comportamiento de la implementación. Así la entrega resulta comprensible tanto para diseñadores como para desarrolladores.
El texto de apoyo opcional vive dentro del mismo componente semántico.
firma / horaComposición
Reutilizar antes que crear.
La regla útil no era la etiqueta de Atomic Design. Era el modelo de decisión: reutilizar primero, extender cuando la estructura sigue siendo compatible y crear un componente nuevo solo cuando la semántica o la arquitectura cambian de verdad.
Tres niveles de composición hacen que el inventario sea más fácil de razonar y de reutilizar.
Multimarca
Un único núcleo. Distintas identidades.
Las configuraciones de marca controlan la tipografía, el color, los helpers y el comportamiento específico. Los componentes consumen ese contexto en lugar de duplicar toda la implementación.
Caso de uso · cabeceras
Una estructura. Muchas identidades.
La cabecera fue una prueba de esfuerzo exigente: una única arquitectura de información y estructura semántica, y después la expresión de marca a través de logos, tipografía, color y variantes seleccionadas.
Acto 04
Lo que costó llevarlo a producción
La realidad de producción
Un design system construido para restricciones imperfectas.
42DS tenía que soportar puntos de entrada AMP en paralelo, bundles de marca, variantes de paywall y compatibilidad con legacy. La arquitectura se diseñó para un negocio vivo, no para una reconstrucción de laboratorio.
Diseño ↔ ingeniería
La entrega forma parte del sistema.
Un componente no estaba terminado cuando se veía bien en Figma. También necesitaba una implementación canónica, documentación y un camino claro hacia Vue.
Acto 05
Y luego lo tuvo que leer la IA
Arquitectura operable por IA
Después, el sistema tenía que volverse comprensible para la IA.
Lo que empezó como apoyo de IA para tareas aisladas de JavaScript acabó siendo un mind-system portable. Cada modo se ocupa de un dominio; la gobernanza define el orden de ejecución y la resolución de conflictos, de modo que la IA pueda trabajar con las reglas reales de 42DS en vez de inventárselas.
Qué permite la arquitectura
Un sistema, varios tipos de trabajo.
Qué cambió
La arquitectura creció. Mi rol creció con ella.
Entré sobre todo con un perfil de diseñador/front-end dentro de la arquitectura. A medida que el sistema se expandía, mi rol fue derivando hacia el Product Design de principio a fin y la ejecución asistida por IA.
La evolución más importante no fue añadir más componentes. Fue convertir el conocimiento implícito en un sistema explícito: primero para las personas y, con el tiempo, para la IA.