⏤ Approch for Design System

A streamlined approach to standardize, guide and document the System to promote common components without hindering innovation.

⏤ Why this document?
The increasing complexity of digital products and cross-platform usage has become a major challenge for businesses where loss of growth and consistency is often the result. I note the emergence of the Design System as a solution to these problems of scalability.

⏤ For who ?
This document is the result of my learning about implementation of design systems at Qwant, Ekwateur and Anycommerce. As a designer in this type of company which has in common the fact of being very mature in the production and feature development processes it is important to be able to ensure consistency through design.

⏤ It starts with primitives

⏤ What ?
To keep in mind that is evoluting, use simple naming to implement your colors, fonts, sizing, shadow, radius, motion time, opacity...

⏤ But why ?
Primitives are useful to create the first structure with value as a point of reference to easly update brand system.

Colors
#FFF8F5
:
orange 100
#FFF1EB
:
orange 200
#FFE2D6
:
orange 300
etc...
Fonts
Georgia
:
heading
Aa
Great Vibes
:
title
Aa
Open Sans
:
body
Aa
etc...
Sizes
4px
:
size 100
8px
:
size 200
12px
:
size 300
etc...
EXEMPLES

⏤ Then by semantic

⏤ What ?
To structure your UI assets start by define the specific name of every element used on your system.

⏤ But why ?
Semantics link to primitive allows you to speak the same language, adapted to the use of your system as a point of consistency.

Background-colors
Surface-Default
:
orange 100
Surface-Raised
:
orange 200
Surface-Overlay
:
orange 300
etc...
Heading-fonts
H1
:
heading
Aa
size 900
H2
:
heading
Aa
size 800
H3
:
heading
Aa
size 600
etc...
Padding-sizes
x-small
:
size 100
small
:
size 200
medium
:
size 300
etc...
EXEMPLES

⏤ Used to create components

⏤ What ?
Build your component to create the system by using your semantic.

⏤ But why ?
To standardize the System and optimize the creation process with a rationalized approach.

Buttons-primary
default
:
primary-default
size-large
Body
Aa
gap-medium
padding-medium
hovered
:
primary-hovered
size-large
Body
Aa
gap-medium
padding-medium
pressed
:
primary-pressed
size-large
Body
Aa
gap-medium
padding-medium
etc...
Tags-primary
default
:
primary-default
size-small
label
Aa
padding-small
gap-small
highlight
:
highlight
size-small
label
Aa
padding-small
gap-small
error
:
info-error
size-small
label
Aa
padding-small
gap-small
etc...
EXEMPLES

⏤ And finally build layouts

⏤ What ?
Create only the page templates that you identify with redundancies in your use

⏤ But why ?
To standardize, guide and document the content pages.

Templates
full-page
:
Breakpoint-large
surface-default
gap-large
margin-x-large
column-page
:
Breakpoint-large
surface-default
gap-medium
margin-x-large
drawer-overlay
:
Breakpoint-medium
surface-overlay
gap-medium
margin-x-large
etc...
Utilites
error-404
:
Breakpoint-large
surface-default
gap-large
margin-x-large
error-501
:
Breakpoint-large
surface-default
gap-large
margin-x-large
password
:
Breakpoint-large
surface-default
gap-large
margin-x-large
etc...
EXEMPLES

⏤ et Voila !

Hope it was useful.