Renfe - Infinity Design System

Renfe - Infinity Design System

Renfe - Infinity Design System

Design System Designer

Design System Designer

Overview

Overview

Renfe's digital ecosystem spans eight products across three channels; web, mobile app, and self-service kiosks. Despite operating under a single brand umbrella, each product had grown independently and in different decades, with no shared design language, no governance, and no consistency between channels. Infinity is the design system built to change that.

Architected as a multi-brand system from the ground up, not a single-brand library extended to cover more products, but a foundation designed to support any number of brands without duplicating components, tokens, or decisions. The project covers everything from a full ecosystem audit to token architecture, component design, library structure, and live documentation.

Renfe's digital ecosystem spans eight products across three channels; web, mobile app, and self-service kiosks. Despite operating under a single brand umbrella, each product had grown independently and in different decades, with no shared design language, no governance, and no consistency between channels. Infinity is the design system built to change that.

Architected as a multi-brand system from the ground up, not a single-brand library extended to cover more products, but a foundation designed to support any number of brands without duplicating components, tokens, or decisions. The project covers everything from a full ecosystem audit to token architecture, component design, library structure, and live documentation.

Context & Justification

Context & Justification

78% of Renfe's tickets are sold digitally; yet the self-service kiosks, responsible for 6 million annual transactions, still run on a 2005 interface. Three channels, no shared design language, no consistency. Compounded costs, accessibility gaps, and a fragmented user experience across every product. At this scale, inconsistency isn't a design problem, it's a business problem.

78% of Renfe's tickets are sold digitally; yet the self-service kiosks, responsible for 6 million annual transactions, still run on a 2005 interface. Three channels, no shared design language, no consistency. Compounded costs, accessibility gaps, and a fragmented user experience across every product. At this scale, inconsistency isn't a design problem, it's a business problem.

14%

14%

In-Person Sales (Ticket Offices)

Support channel for complex post-sale transactions and users with lower digital adoption.

8%

8%

Self-Service Kiosks

Around 6 million tickets sold annually through a 2005 interface — inconsistent, outdated, and used mainly for last-minute purchases and changes..

78%

78%

Digital Channels (Web & App)

The company's strategic core. Dynamic pricing and seat reservations make web and app the preferred channels for planned travel.

Audit

Audit

Before building anything, the project started with a full audit of the existing ecosystem. The numbers told a clear story: 56 unique colors across the three channels with only 3 shared, 83 unique spacing values on web alone with no consistent pattern, zero grids defined on any channel, five shadow definitions on web with zero shared with any other channel, and a z-index value of 2,147,483,646 used as a reactive patch. No channel had a design system. No team had shared ownership of the visual language.

Before building anything, the project started with a full audit of the existing ecosystem. The numbers told a clear story: 56 unique colors across the three channels with only 3 shared, 83 unique spacing values on web alone with no consistent pattern, zero grids defined on any channel, five shadow definitions on web with zero shared with any other channel, and a z-index value of 2,147,483,646 used as a reactive patch. No channel had a design system. No team had shared ownership of the visual language.

Architecture and anatomy

Architecture and anatomy

The token system is the core of Infinity. Four layers, each with a distinct responsibility: Primitives (203 variables, raw values, never published) → Brand (multi-brand modes, one per product) → Theme (Light and High Contrast modes) → Global (215 variables, universal, no modes). The architecture is deliberately brand-agnostic, adding a new brand requires only adding a mode to the Brand collection. No new components, no new tokens, no structural changes. The system scales horizontally across brands without growing in complexity.

The token system is the core of Infinity. Four layers, each with a distinct responsibility: Primitives (203 variables, raw values, never published) → Brand (multi-brand modes, one per product) → Theme (Light and High Contrast modes) → Global (215 variables, universal, no modes). The architecture is deliberately brand-agnostic, adding a new brand requires only adding a mode to the Brand collection. No new components, no new tokens, no structural changes. The system scales horizontally across brands without growing in complexity.

Foundation

Foundation

Foundations cover every visual primitive the system needs: a color palette of ten families with eleven stops each, two typefaces (Alliance for the primary type system, DM Mono for fields requiring character-level precision), five breakpoints including a dedicated Kiosk specification, a spacing scale based on a 4px base unit, shadow and z-index frameworks replacing the existing unprincipled values, and the first defined grid system in Renfe's digital history.

Foundations cover every visual primitive the system needs: a color palette of ten families with eleven stops each, two typefaces (Alliance for the primary type system, DM Mono for fields requiring character-level precision), five breakpoints including a dedicated Kiosk specification, a spacing scale based on a 4px base unit, shadow and z-index frameworks replacing the existing unprincipled values, and the first defined grid system in Renfe's digital history.

Font Family & Color

Font Family & Color

Z-Index & Border

Z-Index & Border

Component

Component

Each component in Infinity is built token-first; every color, spacing value, type style, and border radius references a semantic token rather than a hard-coded value. This means components aren't designed for a single context. They're designed to travel: across states, across brands, across channels. The token layer absorbs the variation so the component never has to.

Each component in Infinity is built token-first; every color, spacing value, type style, and border radius references a semantic token rather than a hard-coded value. This means components aren't designed for a single context. They're designed to travel: across states, across brands, across channels. The token layer absorbs the variation so the component never has to.

Documentation

Documentation

Documentation lives in Supernova, connected directly to the Figma library. Every component page covers usage guidelines, anatomy, states, boolean properties, and do/don'ts; written for the designers and developers who will consume the system, not for the people who built it. When the component updates in Figma, the documentation updates with it. The system and its documentation are the same source of truth.

Documentation lives in Supernova, connected directly to the Figma library. Every component page covers usage guidelines, anatomy, states, boolean properties, and do/don'ts; written for the designers and developers who will consume the system, not for the people who built it. When the component updates in Figma, the documentation updates with it. The system and its documentation are the same source of truth.

Product

Product

The system applied. A complete purchase flow; search, results, passengers, payment, where every decision made at the token level surfaces as a coherent, consistent experience for the user.

The system applied. A complete purchase flow; search, results, passengers, payment, where every decision made at the token level surfaces as a coherent, consistent experience for the user.

Home

Work

About