2019-2024 Medium
In 2023, following a navigation reorganization project, the entire Sorare experience was optimized, and the design system also evolved to better meet the product's needs.
The design system is structured into four main files: colors, typography, graphic assets, and components. These files are designed for use in both web and native design. A styleguide file outlines the system’s choices and principles.
This separation ensures clear foundations and minimizes the risk of introducing critical errors. The files dedicated to colors or typography, are not meant to be frequently modified.
A minimalist approach was adopted with a single typeface: Helvetica, available in two weights (Regular and Bold).
The file structure is organized by application: display, headline, body, and label. The goal was to create a clear and intuitive system, making choices obvious.
The color system is designed to work in both light and dark modes. With Figma's local variables, switching between the two modes is quick and seamless.
Colors are organized by their usage:
Surface: Shades for background surfaces.
OnBase: Applied to content (icons, text, etc.) on Background and Primary Containers.
Elevated: Applied to content on Secondary and Tertiary Containers.
UI: Used for strokes and separators.
Scoring: Dedicated to displaying player scores.
Buttons: For interactive buttons.
In terms of naming, we kept it neutral—no token explicitly mentions a color, ensuring greater adaptability.
This includes all graphic elements: icons, badges, branding elements, cosmetics, cards, ratios, patterns, etc. It is a library consisting of graphic components with multiple variables, serving as a source of assets.
Each component is accompanied by a detailed sheet outlining its structure, variables, usage, and practical examples. All components are available in both web and native versions.
Detailed sheet
Construction
Variables
Practical examples
It also includes navigation elements for all platforms: Android, iOS, and Desktop.
iOs / Android navigation
Desktop navigation
Thanks to local variables, it also includes rules for spacing and border radius.
The styleguide file serves as a practical guide to explain how the entire design system works. It also includes all the basic layouts, providing a clear reference for the consistent application of the design system.