2019-2024 Medium 

Sorare Design System

Throughout my journey at Sorare, I had the opportunity to develop and improve the design system.

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.

navigation-03

Structure

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.

brand-01

Typography

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.

fonts-01
fonts-02

Colors

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.

colors-02
colors-01

Graphic Assets

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.

graphic-01
graphic-02

Components

This file brings together all the main components, with the idea of providing a toolkit of essential elements without restricting the creativity of designers.

components-06
components-05

Component doc

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.

components-01

Detailed sheet

components-02

Construction

components-03

Variables

components-04

Practical examples

Navigation

It also includes navigation elements for all platforms: Android, iOS, and Desktop.

shift-01

iOs / Android navigation

shift-02

Desktop navigation

Spacing & radius

Thanks to local variables, it also includes rules for spacing and border radius.

rules-01

Styleguide

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.

guide-01
layout-01
layout-02

Like what you see?