Design system

Voici les matériaux avec lesquels votre site est construit : vos couleurs, vos fonds, votre typographie et vos éléments d'interface. Chaque tuile mène au détail. Tout s'affiche en clair comme en sombre, selon la préférence de vos visiteurs.

Couleurs

Primary
Accent
Validation
Alerte

Typographie secondaire

[Police secondaire]
Aa

En situation

[La promesse du client, dans ses mots.]

[Une phrase de preuve qui l'accompagne.]

[Action principale] [Lien secondaire]

Fonds

Le plus clair
Cartes
Page
Bandeaux
Le plus dense

Badges

[Secteur] Nouveau En production

Avatars

AB CD EF

Couleurs

Affichage clair

Affichage sombre

Fonds

Affichage clair

Encarts, champs de saisie
Cartes
Fond de page
Bandeaux de section
Zones en creux

Affichage sombre

Encarts, champs de saisie
Cartes
Fond de page
Bandeaux de section
Zones en creux

Affichage clair

Zone en creux-2
Bandeau de section-1
Fond de page0
Carte+1
Encart, champ de saisie+2

Le niveau le plus proche du lecteur.

Affichage sombre

Zone en creux-2
Bandeau de section-1
Fond de page0
Carte+1
Encart, champ de saisie+2

Le niveau le plus proche du lecteur.

Texte

Affichage clair

Titres et chiffres clés

Corps de texte

Descriptions, sous-titres

Éléments inactifs

Filets, séparateurs

Affichage sombre

Titres et chiffres clés

Corps de texte

Descriptions, sous-titres

Éléments inactifs

Filets, séparateurs

Typographie

Titre d'ouverture

[Titre d'ouverture]

Chapô

[Le chapô qui suit le titre, deux lignes au plus.]

Titre de section

[Titre de section]

Intertitre

[Intertitre]

Corps de texte

[Un paragraphe de corps de texte, avec la longueur d'une vraie phrase pour juger la mesure et l'interlignage.]

Métadonnée

[Réf 001 · Catégorie]

Badges

Affichage clair

Métadonnée, le défaut

[Secteur] [Catégorie] [Thème]

Marqueur fort, rare

Nouveau

États

En production Validé Bloquant

Affichage sombre

Métadonnée, le défaut

[Secteur] [Catégorie] [Thème]

Marqueur fort, rare

Nouveau

États

En production Validé Bloquant

Avatars

Tailles

AB CD EF GH

Avec nom

[Prénom Nom] [Fonction]

En groupe

AB CD EF +3 [Six personnes à [Ville]]

Éléments

Carte de contenu

[Secteur] [Stade]

[Titre de la carte]

[Deux lignes de description qui donnent envie d'ouvrir.]

Lire

Champs de contact

Icônes