Project
A scalable and accessible Design System
A scalable and accessible Design System
A scalable and accessible Design System
Project Overview
Designed and improved a scalable Design System with accessibility at its core, enabling teams to build consistent, inclusive, and efficient digital products.
Scope: Audit → Definition → System creation → Adoption
Impact: Reduced design debt, improved consistency, and embedded accessibility across teams
Project Overview
Designed and improved a scalable Design System with accessibility at its core, enabling teams to build consistent, inclusive, and efficient digital products.
Scope: Audit → Definition → System creation → Adoption
Impact: Reduced design debt, improved consistency, and embedded accessibility across teams
Problem
The existing system had multiple issues:
Inconsistent components across products
Lack of accessibility standards
This resulted in:
Inefficient workflows between design and development
Accessibility gaps across interfaces
Poor scalability of the product ecosystem
A common issue: accessibility is often treated as an afterthought instead of a core design principle
Problem
The existing system had multiple issues:
Inconsistent components across products
Lack of accessibility standards
This resulted in:
Inefficient workflows between design and development
Accessibility gaps across interfaces
Poor scalability of the product ecosystem
A common issue: accessibility is often treated as an afterthought instead of a core design principle
Research
The first step in creating this Design System was to conduct a thorough audit of all components designed at Flat 101 for various clients. We analyzed each project to identify patterns, inconsistencies, and best design practices used in different contexts.
Based on this audit, we created a base template, organizing components using the Atomic Design methodology, separating them into atoms and molecules to structure them clearly and scalably. In this template, we considered key aspects such as color, typography, layout, naming conventions, development status, accessibility (a11y), and interaction states, ensuring a solid and standardized foundation for building the system.
Research
The first step in creating this Design System was to conduct a thorough audit of all components designed at Flat 101 for various clients. We analyzed each project to identify patterns, inconsistencies, and best design practices used in different contexts.
Based on this audit, we created a base template, organizing components using the Atomic Design methodology, separating them into atoms and molecules to structure them clearly and scalably. In this template, we considered key aspects such as color, typography, layout, naming conventions, development status, accessibility (a11y), and interaction states, ensuring a solid and standardized foundation for building the system.
Design
For the Design System, we focused on creating components that are 100% accessible and highly flexible to adapt to each client’s visual identity. Following WCAG guidelines, we ensured that every element had adequate contrast, was keyboard-navigable, and compatible with screen readers.
Additionally, we defined a modular structure that allows customization without compromising accessibility, ensuring that colors, typography, and styles can be adjusted according to each brand’s identity without losing consistency or usability. This combination of accessibility and flexibility guarantees a scalable, adaptable system centered on the user experience.
Design
For the Design System, we focused on creating components that are 100% accessible and highly flexible to adapt to each client’s visual identity. Following WCAG guidelines, we ensured that every element had adequate contrast, was keyboard-navigable, and compatible with screen readers.
Additionally, we defined a modular structure that allows customization without compromising accessibility, ensuring that colors, typography, and styles can be adjusted according to each brand’s identity without losing consistency or usability. This combination of accessibility and flexibility guarantees a scalable, adaptable system centered on the user experience.
Solution
The creation of this Design System has allowed us to establish a solid, scalable, and accessible foundation that optimizes our internal processes and facilitates adaptation to future needs and brands. Thanks to the initial audit, we identified best practices in design and development, ensuring a coherent, flexible system aligned with WCAG standards.
One of the greatest lessons from this project was proving that designing for accessibility does not mean designing something unattractive or limiting creativity. On the contrary, integrating accessibility from the start allowed us to build more functional, intuitive, and adaptable interfaces without compromising aesthetics. We broke the myth that accessibility is a barrier and turned it into a competitive advantage by creating components that not only comply with regulations but also improve the experience for all users.
This project not only represents progress in standardizing component design and development but also lays the groundwork for the evolution and expansion of new Design Systems. With this approach, we ensure more inclusive, efficient, and consistent digital experiences for everyone :)
Solution
The creation of this Design System has allowed us to establish a solid, scalable, and accessible foundation that optimizes our internal processes and facilitates adaptation to future needs and brands. Thanks to the initial audit, we identified best practices in design and development, ensuring a coherent, flexible system aligned with WCAG standards.
One of the greatest lessons from this project was proving that designing for accessibility does not mean designing something unattractive or limiting creativity. On the contrary, integrating accessibility from the start allowed us to build more functional, intuitive, and adaptable interfaces without compromising aesthetics. We broke the myth that accessibility is a barrier and turned it into a competitive advantage by creating components that not only comply with regulations but also improve the experience for all users.
This project not only represents progress in standardizing component design and development but also lays the groundwork for the evolution and expansion of new Design Systems. With this approach, we ensure more inclusive, efficient, and consistent digital experiences for everyone :)