Flat Design System

Project Overview

Client: Flat 101
Industry: Design
My Role: Product Designer & Accessibility Consultant

In this project, we conducted a thorough audit of all projects developed within the company to identify and gather best practices in component design and development. Based on this analysis, we defined a solid foundation of principles and patterns that would allow us to build a scalable, accessible, and adaptable Design System for future projects.

During the creation of the new components, we focused on ensuring 100% accessible design, following the Web Content Accessibility Guidelines (WCAG).

First step - Components audit

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.

Components planning

After reviewing the UI Kits and Design Systems of 8 clients, we gathered best practices and selected the components that best suited our needs. To do this, we analyzed 23 types of components, evaluating their usage, consistency, and accessibility. We organized all this information in a comparative table, which allowed us to visualize patterns, identify opportunities for improvement, and define a clear direction for the development of our Design System.

Components construction

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 and ARIA 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.

Button

Contrast - A11Y review

Documentation

We have developed detailed documentation for each component of the Design System, defining its usage, styles, variants, states, and accessible implementation according to WCAG and WAI-ARIA guidelines. Our approach aims to ensure a consistent, flexible, and accessible user experience across all projects.

Following this methodology, we have documented 30 components, creating a structured guide that standardizes design, optimizes implementation, and ensures adaptability to different brands and needs.

Conclusions

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 :)