Skip to content
JLP

Product Design · Design Systems · Front-End · AI

I studied journalism. I build the systems behind the newspapers.

Product Designer & Front-End Engineer at Prensa Ibérica. Nineteen years across agency, telecom and media. Since 2021 I build design systems — first Brickee at Aliseda, now 42DS: the shared architecture behind El Periódico, SPORT and La Nueva España.

Selected work

Work

Selected work

Professional work at Prensa Ibérica: design systems, evidence-led product decisions and interactive products for a multi-brand editorial group.

REAL PROJECT EVIDENCEOne shared architecture · multiple editorial identities
El Periódico
El Periódico header and homepage using the shared header architecture.
Prensa Ibérica
Blue Prensa Ibérica publication header using the shared header architecture.
La Nueva España
La Nueva España header using the shared header architecture.
SPORT
SPORT header using the shared header architecture.
FLAGSHIP CASEFoundations → reusable components → multi-brand production → AI governance134 component families · 13 specialised AI modes
01 Prensa Ibérica · 2023—2026Design Systems · Front-End · Accessibility

42DS — Designing at scale across a multi-brand ecosystem

I work on the shared design system of a multi-brand editorial group — token architecture, accessibility and front-end performance — while legacy products and day-to-day business keep running.

Design-token architecture from Figma to Style Dictionary, WCAG 2.1 AA in complex editorial products, and CSS performance work across the group's titles.

SPORT / MOBILE CARDS279 cards measured
TestSampleObservationResult
Type A · 1:1279Text exceeds threshold86%
Type A · 1:1279Text exceeds image height40.86%
Type A · 1:1279Meaningful image framing81.88%
Type B · 16:951Meaningful image framing100%
02 Prensa IbéricaProduct Design · Research · Data

SPORT — Turning a product assumption into measurable evidence

A benchmark and measured test to understand whether mobile cards were using too much vertical space — and what was lost by making them smaller.

The height, text-density and framing criteria that came out of it fed into the news card in 42DS — one of the core patterns of the system.

Interactive media map · original developmentLive code
03 Prensa IbéricaProduct Design · Data · Front-End · AI

Interactive Media Map — From static asset to maintainable product

I challenged the original static-map brief and proposed an interactive, responsive solution using open technologies and structured data.

Maintenance moved from editing images to structured data: Google Sheets → CSV, on Leaflet and IGN rather than a paid mapping platform.

Self-directed

From system thinking to AI-native execution.

Three personal projects built on SYX, my own design system. They exist to test how far AI-assisted development can go when it works inside rules I define. They are labelled as self-directed so the professional cases above stay unambiguous.

syx--mundial-2026Open live ↗

World Cup 2026Live preview

04End-to-end product

World Cup 2026 — Building the experience I designed.

An interactive explorer built with SYX, GSAP, Three.js and Leaflet: an interaction concept taken all the way to a working product with AI-assisted development.

Role
Product · Interaction · AI-assisted build
Built with
SYX · GSAP · Three.js · Leaflet

The deliverable is a running product, not a hand-off. Mapping, 3D and motion coordinated into one navigable experience.

Explore live ↗Read case study →

syx-atlas--reportajes/atelierOpen live ↗

AtelierLive preview

05AAtlas register 01

Atelier — A cinematic editorial profile.

ATELIER uses the ATLAS mental model for human, profile-led storytelling: atmospheric, typographic and emotionally paced, while SYX keeps the execution governed.

Role
Editorial design · Motion · Art direction
Built with
SYX · ATLAS

One governed system, a distinctive editorial voice. Typography, palette and motion carry the character; SYX keeps the execution accountable.

Explore live ↗Read case study →

syx-atlas--reportajes/obsidianaOpen live ↗

ObsidianaLive preview

05BAtlas register 02

Obsidiana — A forensic, data-led dossier.

OBSIDIANA applies the same ATLAS + SYX logic to investigation and data: a more forensic visual language, controlled tension and a deliberately different editorial rhythm.

Role
Editorial systems · Data narrative · Motion · AI governance
Built with
SYX · ATLAS

Shared architecture does not require shared aesthetics. Same tokens, same accessibility rules, deliberately different editorial rhythm.

Explore live ↗Read case study →

VISUAL CRAFT / SPORT

A visual language built to stay editorial, playful and recognisable.

Seven original SPORT assets, composed as one visual field rather than a catalogue: enough to read the range, the rhythm and the character of the whole set.

View visual case →
SPORT illustration: Social media
01Social media
SPORT illustration: Eurocopa 2024
02Eurocopa 2024
SPORT illustration: Newsletter
03Newsletter
SPORT illustration: Survey
04Survey
SPORT illustration: Comments
05Comments
SPORT illustration: Discount
06Discount
SPORT illustration: Football
07Football
Path

Nineteen years.
The scale kept changing.

Agency, telecom, real estate and media. The through-line is not the tools I collected: it is how much of the product I became responsible for — from single screens, to shared systems, to end-to-end products and AI-operable workflows.

ScreensInterfaces at scaleDesign systemsMulti-brand systemsAI-governed workflows 01Buleboo Estudio4.3 yr02France Telecom Spain9.7 yr030405Prensa Ibérica3.1 yr 20072012202120232026
  1. 01 Buleboo Estudio Digital Designer & Front-End HTML, CSS and jQuery for clients like Barceló Viajes and Vodafone. Screens4.3 yr
  2. 02 France Telecom Spain Senior UI/UX Designer & Front-End Developer High-traffic products, flows and conversion structures. Interfaces at scale9.7 yr
  3. 03 Aliseda UI/UX Designer & Front-End (Design Systems) Created Brickee, their internal design system, from zero. Design systems1.2 yr
  4. 04 Plexus Tech UI/UX Designer Responsive interfaces and reusable SCSS component architecture. Design systems0.3 yr
  5. 05 Prensa Ibérica Product Designer & Front-End Engineer 42DS: design tokens, WCAG 2.1 AA and CSS performance across the group. Multi-brand systems3.1 yr
I started using AI to help me write code. Then I realised the real leverage wasn’t the prompt. It was the system around it.

Design → System → Scale → Build → Orchestrate

SPORT MOBILE CARDS / EVIDENCE

Product thought the cards were too tall.
I started by measuring them.

The question became measurable: how often did the card exceed the defined height threshold, and what happened when the image ratio changed?

86%of the cards exceeded the defined height threshold
in Type A

279 cards analysed · one dot per card

Within thresholdExceeded threshold
51cards tested in the
16:9 alternative
3front pages
sampled

INTERACTIVE MEDIA MAP / PRODUCT DECISION

The brief was simple: reproduce the map.
The real problem wasn’t.

Instead of rebuilding a static image-based solution, I changed the maintenance model: structured content, reusable UI and an interactive map that could scale.

BeforeA picture of the datamapa-medios-v7-FINAL.jpg · 1440×900

Moving one location means reopening the artwork and re-exporting. 82 locations, not one of them addressable.

Same locationsdifferent maintenance model

AfterThe data itselflocations.csv · 82 rows · IGN tiles
Crónica de Alto GuadalquivirCrónica de CabraCrónica de CentroCrónica de LucenaCrónica de MontillaCrónica de Palma del RíoCrónica de PozoblancoCrónica de Puente GenilCrónica de Campo de BelchiteCrónica de Campo de BorjaCrónica de Campo de CariñenaCrónica de Cuencas MinerasCrónica de Ejea y sus PueblosCrónica de HuescaCrónica de La Crónica de ValdejalónCrónica de Ribera Alta del EbroCrónica de Comarca CentralCrónica de La CalzadaCrónica de GradoCrónica de La CorredoriaCrónica de LlaneraCrónica de Ribera de ArribaCrónica de SalasCrónica de SieroCrónica de VillaviciosaCrónica de CastrillónCrónica de NaviaCrónica de Castelló d'EmpúriesCrónica de l'EscalaCrónica de RosesCrónica de La SelvaCrónica de BadalonaCrónica de CornelláCrónica de EspluguesCrónica de GavàCrónica de GranollersCrónica de HospitaletCrónica de MataróCrónica de Mollet del VallèsCrónica de ParetsCrónica de RubíCrónica de SabadellCrónica de Sant BoiCrónica de TarragonaCrónica de ViladecansCrónica de AlmendralejoCrónica de BadajozCrónica de Malpartida de CáceresCrónica de Tajo-SalorCrónica de ToledoCrónica de BenaventeCrónica de BarbazaCrónica de FormenteraCrónica de AndratxCrónica de La PalmaCrónica de Alcalá de HenaresCrónica de ArganzuelaCrónica de CarabanchelCrónica de LatinaCrónica de Pozuelo de AlarcónCrónica de San JavierCrónica de YeclaCrónica de L’AlcoraCrónica de AlmenaraCrónica de Alto PalanciaCrónica de Benicasim La CentinelaCrónica de Castelló CiutatCrónica de Grao de CastellónCrónica de MoncofaCrónica de NulesLa Vall d'UixóCrónica de Camp de TúriaCrónica de El Camp de MorvedreCrónica de L'HortaCrónica de La MarinaCrónica de La SaforCrónica de Requena - UtielCrónica de Vall d’AlbaidaCrónica de La CosteraCrónica de Hoya de BuñolCrónica de L'AlacantíCrónica de Vega Baja

Each location is a row. 16 mastheads · 13 regions · updated without touching the build.

Country and province geometry: Instituto Geográfico Nacional, CC BY 4.0, via es-atlas. Coordinates: the project's own location table, read from the live demo at build time.

  1. 01Researchconstraints
  2. 02Structured dataGoogle Sheets → CSV
  3. 03UX/UImobile-first
  4. 04Leaflet + IGNinteractive layer
  5. 0542DSintegration

ALL

Six projects. Six different problems.

Every project appears here for fast scanning and has a dedicated page for the full narrative, decisions and evidence. Cases 01–03 and 06 are professional work; 04 and 05 are self-directed.

Stack

What I actually work with

Four practices I bring to a design system, and the tools I use to ship them.

Practice

  • Design-token architectureFigma → JSON → Style Dictionary, so design and code read one source.
  • WCAG 2.1 AAImplemented across complex editorial products, not kept as a target.
  • SCSS architectureCascade layers, semantic tokens and multi-brand theming.
  • Front-end performanceCSS weight and technical-debt reduction on high-traffic products.

Tools

Design & foundations

  • Figma
  • Affinity
  • Storybook
  • Blender

Front-end

  • HTML5
  • SCSS
  • JavaScript
  • Vue

Interaction & data

  • GSAP
  • Three.js
  • Leaflet
  • ECharts

Delivery & AI

  • GitHub
  • Jira
  • Confluence
  • Claude

About

Nineteen years between the interface and the code that ships it.

I am a Product Designer and Front-End Engineer based in Madrid. I studied Ciencias de la Información at the Universidad Complutense and then graphic design at Escuela Arteneo — which is probably why my work keeps returning to editorial problems: hierarchy, reading rhythm, and how much meaning survives when a layout gets compressed.

I started in an agency in 2007, building sites for clients like Barceló Viajes and Vodafone. Then nine years at France Telecom Spain on high-traffic products, optimising flows and conversion structures. In 2021 I moved fully into design systems at Aliseda, where I created Brickee, their internal system. Since 2023 I have been at Prensa Ibérica working on 42DS: design-token architecture from Figma to Style Dictionary, WCAG 2.1 AA in complex editorial products, CSS performance and technical-debt reduction across the group's titles.

More recently AI has widened that scope. Rather than treating it as an assistant, I design the context it works inside — the rules, knowledge and governance that keep AI-assisted execution inside a system instead of around it.

Based in
Madrid, Spain
Languages
Spanish (native) · English (working proficiency)
Education
Ciencias de la Información, UCM · Graphic design, Escuela Arteneo
Focus
Design systems · front-end architecture · AI-assisted product

Contact

If any of this is useful to you, write to me.

Happy to talk about design systems, front-end architecture, editorial products, or how to keep AI-assisted work inside a system rather than around it.