Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Jetons de conception

Comment incorporer nos jetons de conception dans votre CSS ou SASS.

Fonctionnement des jetons de conception

Les jetons de conception vous permettent d’intégrer des valeurs tirées du système de conception aux fichiers CSS supplémentaires que vous créez pour soutenir votre site Web ou votre application. En utilisant des jetons de conception, vous vous assurez que les valeurs de vos fichiers CSS supplémentaires resteront à jour au fil des mises à jour du système de conception.

Les noms attribués aux jetons de conception dans les fichiers CSS doivent respecter le format suivant :

CSS

CSS

.your-class {background-color: var(--gnb-blue);}

Jetons de couleur

Couleur Jeton
Couleurs de la marque
Bleu gnb-blue
Vert gnb-green
Jaune gnb-yellow
Rouge gnb-red
Couleurs de statut
Succès gnb-success
Attention gnb-warning
Danger gnb-critical
Info gnb-info
Échelle de gris
Blanc gnb-white
Gris 100 gnb-gray-100
Gris 200 gnb-gray-200
Gris 300 gnb-gray-300
Gris 400 gnb-gray-400
Gris 500 gnb-gray-500
Gris 600 gnb-gray-600
Noir gnb-black

Jetons de typographie

Famille de polices Jeton
DM Serif Text font-family-serif
Public Sans font-family-sans-serif
Font Awesome (police d'icônes) font-family-icon

Jetons d’espacement

Taille Valeur Jeton
aucun 0 gnb-spacing-none
xxs 0,25rem (4px) gnb-spacing-xxs
xs 0,5rem (8px) gnb-spacing-xs
sm 1rem (16px) gnb-spacing-sm
md 1,5rem (24px) gnb-spacing-md
lg 2rem (32px) gnb-spacing-lg
xl 3rem (48px) gnb-spacing-xl
xxl 4rem (64px) gnb-spacing-xxl

Jetons de points de rupture

Taille Valeur Jeton
xs 576px gnb-breakpoint-xs
sm 768px gnb-breakpoint-sm
md 992px gnb-breakpoint-md
lg 1200px gnb-breakpoint-lg

Jetons de bordure

Attribut Valeur Jeton
Largeur de la bordure 1px gnb-border-width
Couleur de la bordure #ddd gnb-border-color
Rayon de la bordure .25rem gnb-border-radius
Rayon de la petite bordure .2rem gnb-border-radius-sm
Rayon de la grande bordure .3rem gnb-border-radius-lg
Rayon de la bordure en forme de pilule 50rem gnb-border-radius-pill

Jetons de bordure

Attribut Valeur Jeton
Ombre de la boîte 0 2px 4px rgba(0, 0, 0, 0.08) gnb-box-shadow