Skip to content

Product Design · Design Systems · Front-End · AI

I studied journalism. I build the systems other people build on.

Product Designer & Front-End Engineer at Prensa Ibérica. Nineteen years across agency, telecom, real estate 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 About me

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 a shared SCSS architecture where 97% of the code is common to every brand.

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.

VISUAL CRAFT / SPORT

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

Seven of the seventeen 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

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 →

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 a core shared across the group. Multi-brand systems3.1 yr

Thesis

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

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 under hard budgets: 33 KB brand cores against AMP's 75 KB ceiling.

Tools

Design & foundations

  • Figma
  • Affinity
  • Storybook

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 journalism (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, and the shared SCSS architecture behind 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
Journalism (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.