Creating the boost.
IFEMA digital design system
Creating the boost.
IFEMA digital design system
Fields
Design Systems
Product Design
Industry
Conferences
Exhibitions
Events
Date
Date
October 23'
Role
Sr. Product Designer
Product Designer
Studio
Garaje de Ideas
Studio
Garaje de Ideas
Date
October 23'
Role
Product Designer
Studio
Garaje de Ideas
A place to connect
Founded in 1980, IFEMA MADRID is a consortium formed by the Community of Madrid, the Madrid City Council, the Chamber of Commerce and Industry and the Montemadrid Foundation. It's activity has an economic impact for the territory of 5,104 million euros and generates more than 39,000 jobs.
They have a very clear objective: to be a place to connect. Connecting interests, challenges, concerns, knowledge, hobbies and passions. For 40 years IFEMA has been designing environments and spaces where people meet and share growth.
For several years now, IFEMA has chosen Garaje de Ideas as its main design partner to create and iterate its digital product ecosystem.
Facing a huge digital ecosystem
IFEMA has a wide and varied digital universe. Its central axis is formed by its institutional website (ifema.es) along with its more than 90 fairs, each with an independent website. In addition, there is an independent digital app called LIVE Connect, a place focused on the creation and enrichment of professional relationships between trade show exhibitors, buyers and visitors.
Non solic core, non direction
While creating new products and websites, we realized that there weren’t solid pillars to start from, such as a design system with strong foundations core and tokens implementation. The five blocks presented above had independent and outdated libraries, which made it very difficult to gain time in the design phases. There was no unidirectional common language.
New Design Principles
As a starting chapter, the design team held a collaborative tone and voice workshop with marketing, business, branding and development teams in order to establish the Design Principles jointly. During the workshop, all the teams worked together to identify the values and objectives and establish the principles that would guide the design system development.
Inspiration, Experimentation, Facilitation, Connection and Growth. According to all teams, these concepts represent IFEMA's value proposition and philosophy. Each of them is further divided into three verbs that reinforce their meaning.
The organism
IFEMA is a digital environment with a very powerful modular system, so it was essential that our foundations core was solid and consistent.
This enabled us to create a robust component library with which to shape the modules for finally building the templates. In this way, all digital experiences are maintained within a unified framework.
Our token strategy
To enable a fully automated, scalable system, we built a tokenization plan covering color and typography, IFEMA's two most critical elements.
Typography tokens were classified by size and weight rather than resolution, decoupling styles from screen sizes so future changes propagate automatically across the codebase. Color tokens followed a semantic structure, layered on top of primitive brand colors, so any change to a primitive updates everywhere it's used.
Fare libraries swap
IFEMA's biggest challenge was scale: dozens of trade fairs, each with its own website and color identity, but sharing the same typography, page structures and modules.
That consistency was the key, by building independent token libraries per fair, with color tokens defined by semantic use, switching a site's entire chromatic identity became a simple token-library swap, taking no more than 10 seconds.
The final test
Once Boost was properly tested to avoid technical errors, it was presented to all stakeholders. In this presentation, the design team not only went through the whole process from the beginning, but also performed a live demo in which they proceeded to build new templates from scratch with our new tokenised system.
The aim of this demo was for all stakeholders to see the real and tangible value of having a live automated design organism.
Our job is never finished, after the first release, updates have been released periodically with new modules, components, and even a new motion movement system.
Building a cornestore
The following objectives we were pursuing were mainly determined by two factors: agility and consistency.
To build a common language between Business, Design, IT, SEO, Brand, Data and Marketing teams.
To establish a strong consistency in IFEMA's digital product ecosystem.
To build a common pillar of shared knowledge, generating a memorable, clean and seamless user experience at the same time.
To save time on repetitive tasks, using it for problem solving and business hypotheses validations.
What we achieved
by doing it together
All the teams are alligned in the same direction and educated with the same values.
A lot of time is being saved in decision making to build digital products much faster.
To build a common pillar of shared knowledge, generating a memorable, clean and seamless user experience at the same time.
Design culture is created with stakeholders, and they are conscientized on the organization value.
Facing a huge
digital ecosistem
IFEMA has a wide and varied digital universe. Its central axis is formed by its institutional website (ifema.es) along with its more than 90 fairs, each with an independent website. In addition, there is an independent digital app called LIVE Connect, a place focused on the creation and enrichment of professional relationships between trade show exhibitors, buyers and visitors.
Non solid core,
non direction
While creating new products and websites, we realized that there weren’t solid pillars to start from, such as a design system with strong foundations core and tokens implementation. The five blocks presented above had independent and outdated libraries, which made it very difficult to gain time in the design phases. There was no unidirectional common language.
Building
a cornerstone
The following objectives we were pursuing were mainly determined by two factors: agility and consistency.
To build a common language between Business, Design, IT, SEO, Brand, Data and Marketing teams.
To establish a strong consistency in IFEMA's digital product ecosystem.
To build a common pillar of shared knowledge, generating a memorable, clean and seamless user experience at the same time.
To save time on repetitive tasks, using it for problem solving and business hypotheses validations.
New Design Principles
As a starting chapter, the design team held a collaborative tone and voice workshop with marketing, business, branding and development teams in order to establish the Design Principles jointly. During the workshop, all the teams worked together to identify the values and objectives and establish the principles that would guide the design system development.
Inspiration, Experimentation, Facilitation, Connection and Growth. According to all teams, these concepts represent IFEMA's value proposition and philosophy. Each of them is further divided into three verbs that reinforce their meaning.
What we achieved
by doing it together
All the teams are alligned in the same direction and educated with the same values.
A lot of time is being saved in decision making to build digital products much faster.
Design culture is created with stakeholders, and they are conscientized on the organization value.
The organism
IFEMA is a digital environment with a very powerful modular system, so it was essential that our foundations core was solid and consistent.
This enabled us to create a robust component library with which to shape the modules for finally building the templates. In this way, all digital experiences are maintained within a unified framework.
Our token strategy
To enable a fully automated, scalable system, we built a tokenization plan covering color and typography, IFEMA's two most critical elements.
Typography tokens were classified by size and weight rather than resolution, decoupling styles from screen sizes so future changes propagate automatically across the codebase. Color tokens followed a semantic structure, layered on top of primitive brand colors, so any change to a primitive updates everywhere it's used.
Fare libraries swap
IFEMA's biggest challenge was scale: dozens of trade fairs, each with its own website and color identity, but sharing the same typography, page structures and modules.
That consistency was the key, by building independent token libraries per fair, with color tokens defined by semantic use, switching a site's entire chromatic identity became a simple token-library swap, taking no more than 10 seconds.
The final test
Once Boost was properly tested to avoid technical errors, it was presented to all stakeholders. In this presentation, the design team not only went through the whole process from the beginning, but also performed a live demo in which they proceeded to build new templates from scratch with our new tokenised system.
The aim of this demo was for all stakeholders to see the real and tangible value of having a live automated design organism.
Our job is never finished, after the first release, updates have been released periodically with new modules, components, and even a new motion movement system.
Keep
exploring
Other projects
Other projects
Casa del Libro
Product Design
Casa del Libro
Product Design
Casa del Libro
Product Design
Tagoro Dive
Brand Identity
Tagoro Dive
Brand Identity
Tagoro Dive
Brand Identity
Facing a huge digital ecosystem
IFEMA has a wide and varied digital universe. Its central axis is formed by its institutional website (ifema.es) along with its more than 90 fairs, each with an independent website. In addition, there is an independent digital app called LIVE Connect, a place focused on the creation and enrichment of professional relationships between trade show exhibitors, buyers and visitors.
Non solid core, non direction
While creating new products and websites, we realized that there weren’t solid pillars to start from, such as a design system with strong foundations core and tokens implementation. The five blocks presented above had independent and outdated libraries, which made it very difficult to gain time in the design phases. There was no unidirectional common language.
Building a cornestore
The following objectives we were pursuing were mainly determined by two factors: agility and consistency.
To build a common language between Business, Design, IT, SEO, Brand, Data and Marketing teams.
To establish a strong consistency in IFEMA's digital product ecosystem.
To build a common pillar of shared knowledge, generating a memorable, clean and seamless user experience at the same time.
To save time on repetitive tasks, using it for problem solving and business hypotheses validations.
What we achieved
by doing it together
All the teams are alligned in the same direction and educated with the same values.
A lot of time is being saved in decision making to build digital products much faster.
To build a common pillar of shared knowledge, generating a memorable, clean and seamless user experience at the same time.
Design culture is created with stakeholders, and they are conscientized on the organization value.
New design principles
As a starting chapter, the design team held a collaborative tone and voice workshop with marketing, business, branding and development teams in order to establish the Design Principles jointly. During the workshop, all the teams worked together to identify the values and objectives and establish the principles that would guide the design system development.
Inspiration, Experimentation, Facilitation, Connection and Growth. According to all teams, these concepts represent IFEMA's value proposition and philosophy. Each of them is further divided into three verbs that reinforce their meaning.
The organism
IFEMA is a digital environment with a very powerful modular system, so it was essential that our foundations core was solid and consistent.
This enabled us to create a robust component library with which to shape the modules for finally building the templates. In this way, all digital experiences are maintained within a unified framework.
Our token strategy
To enable a fully automated, scalable system, we built a tokenization plan covering color and typography, IFEMA's two most critical elements.
Typography tokens were classified by size and weight rather than resolution, decoupling styles from screen sizes so future changes propagate automatically across the codebase. Color tokens followed a semantic structure, layered on top of primitive brand colors, so any change to a primitive updates everywhere it's used.
Fare libraries swap
IFEMA's biggest challenge was scale: dozens of trade fairs, each with its own website and color identity, but sharing the same typography, page structures and modules.
That consistency was the key, by building independent token libraries per fair, with color tokens defined by semantic use, switching a site's entire chromatic identity became a simple token-library swap, taking no more than 10 seconds.
The final test
Once Boost was properly tested to avoid technical errors, it was presented to all stakeholders. In this presentation, the design team not only went through the whole process from the beginning, but also performed a live demo in which they proceeded to build new templates from scratch with our new tokenised system.
The aim of this demo was for all stakeholders to see the real and tangible value of having a live automated design organism.
Our job is never finished, after the first release, updates have been released periodically with new modules, components, and even a new motion movement system.
Creating the boost.
IFEMA digital design system
Curiosity?
Location
Jaime Lucero
Digital Designer
Multidisciplinary Photographer
Reach me at:
jaime.luceromarcos@gmail.com +34 646 13 44 86
Currently:
Based in Madrid
Open from:
Monday
Friday
9 AM
17 PM
Design & dev — Jaime Lucero®, 2026
Dribbble
Curiosity?
Location
Jaime Lucero
Creative Designer
Multidisciplinary Photographer
Reach me at:
+34 646 13 44 86
jaime.luceromarcos@gmail.com
Currently:
Based in Madrid
Open from:
Monday
Friday
9 AM
17 PM
Design & dev — Jaime Lucero®, 2026
Dribbble
Curiosity?
Digital Designer
Multidisciplinary Photographer
Jaime Lucero
Reach me at:
jaime.luceromarcos@gmail.com +34 646 13 44 86
Location
Currently:
Based in Madrid
Open from:
Monday
Friday
9 AM
17 PM
Design & dev — Jaime Lucero®, 2026
Dribbble