LIFFEY 2026

Liffey is a design system built to unify one of Europe’s busiest digital platforms. From color tokens and typography to components, grid, and accessibility. One source of truth for every screen, every team, every decision.

LIFFEY

Ryanair needed more than a visual refresh. With inconsistent colors, mismatched components, and no shared logic between teams, the platform was scaling in the wrong direction.

We built Liffey — a design system that brings structure, clarity, and a single source of truth to one of Europe’s busiest digital products.

FROM AUDIT TO ARCHITECTURE

The interface had accumulated years of ungoverned decisions: multiple blues and yellows that didn’t belong to the same scale, two typefaces used without criteria, and buttons that looked different on every screen.

Liffey didn’t patch those problems. It replaced the foundation.

Unified color tokens. A single typeface chosen for interface legibility. Components with defined roles, documented states, and real behavioral guidance for the teams that would build with them.

COLOR BUILT TO SCALE

The existing palette wasn’t a palette — it was a collection of one-off decisions made over time.

We defined a controlled scale for both blue and yellow, anchored to Ryanair’s official brand identity. From there, semantic tokens reference those base values and nothing else. One change propagates everywhere. No more hex values scattered across files.

ONE TYPEFACE. ONE DECISION.

Roboto and Arial coexisted without logic. Neither was chosen for interface work — one was designed for Android, the other for print.

We migrated the system to Inter: built from scratch for screens, with high x-height and open apertures that hold up at the sizes where Ryanair users actually read — prices, dates, conditions, fine print.

Nine weights. Variable font support. No additional licenses. The system’s typographic hierarchy runs entirely on a single, intentional choice.

BUTTONS WITH A JOB TO DO

Three variants. Three roles. No ambiguity.

Primary carries the main action of each screen. CTA — in Ryanair yellow — is the conversion button: reserve, pay, confirm. The color isn’t decorative. It’s the most valuable element in the funnel, and it looks like it. Secondary handles supporting actions without competing for attention.

Every variant ships with every state: Default, Hover, Pressed, Disabled, Focus, Icon. That’s not a detail — that’s the contract between design and development.

SPACE WITH RULES

More than 60% of low-cost traffic comes from mobile. The grid starts there.

Four breakpoints, each with a functional rationale: a single column for mobile checkout, two columns for tablet comparison, four columns for desktop scanning, and a contained wide layout that stops content from breaking apart on large screens.

The grid isn’t decorative. It’s the agreement that makes every new component land in the right place without negotiation.

FIXING WHAT WAS SEMANTICALLY WRONG

Return trip and One way are mutually exclusive options. They had never been radio buttons — and they should have been from day one.

The original interface combined checkbox iconography with radio button patterns in the same decision. Assistive technologies read them differently. Users process them differently. We corrected the component, documented the reasoning, and aligned it with how Vueling and Lufthansa handle the same interaction.

The user doesn’t notice the fix. That’s the point.

MORE THAN SPECS. REAL GUIDANCE

Every component in Liffey ships with documentation that goes beyond visual specs: usage patterns, accepted prop values, placeholder limits, platform constraints, and accessibility rules written for the developers who will implement them — not just the designers who drew them.

The system is still growing. And the product works better because of it.