SKALES DS / Fondations

Fondations

Palette, rôles de couleur, typographie, espacements et rayons. Les composants ne référencent que ces tokens, jamais de valeur en dur.

Palette

Trois couleurs d’origine, déclinées de 50 à 900.

Vert
green-50
#ECFCEB
green-100
#D7F8D4
green-200
#B2F4AD
green-300
#82E87C
green-400
#4AD746
Origine
green-500
#00B908
green-600
#009504
green-700
#007604
green-800
#005801
green-900
#004000
Bleu
blue-50
#EDF7FC
blue-100
#D9EDF8
blue-200
#B3DBF1
blue-300
#84C0E1
blue-400
#53A3CB
blue-500
#2E87B1
blue-600
#156F95
blue-700
#005677
Origine
blue-800
#00435E
blue-900
#003045
Neutre
neutral-50
#FCFAF9
neutral-100
#F2F0EF
Origine
neutral-200
#DFDDDC
neutral-300
#C9C7C6
neutral-400
#A9A7A6
neutral-500
#8A8988
neutral-600
#706E6D
neutral-700
#565554
neutral-800
#3E3D3C
neutral-900
#272625

Rôles et contrastes

Ratios calculés selon les WCAG 2.1 (AA : 4,5:1 pour le texte courant).

Nouveau projet
Action principale
8,08:1 · AAA
action/primarybg blue-700 · texte blanc
Nouveauté
Accent
7,98:1 · AAA
accentbg green-400 · texte neutral-900
Projet actif
Succès
5,48:1 · AA
feedback/successbg green-50 · texte green-700
En configuration
Information
7,43:1 · AAA
feedback/infobg blue-50 · texte blue-700
Paramètres du projet
Texte principal
13,30:1 · AAA
text/primaryneutral-900 sur neutral-100
Modifié il y a 2 jours
Texte secondaire
7,44:1 · AAA
text/secondaryneutral-700 sur blanc
Licence expirée
Erreur
5,62:1 · AA
feedback/error#C62828 sur blanc
Nouveau projet
À éviter
1,89:1 · Échec
texte blanc sur green-400

Typographie

Le système fixe l’échelle et les graisses. Chaque client peut remplacer la famille par une Google Font.

heading/xlManrope 40 / 48 · 800
Titre de page
heading/lgManrope 32 / 40 · 700
Titre de section
heading/mdManrope 24 / 32 · 700
Titre de carte
heading/smManrope 20 / 28 · 600
Sous-titre
body/mdInter 16 / 24 · 400
Texte courant de l'interface.
body/smInter 14 / 20 · 500
Libellé de champ, cellule de tableau
captionInter 12 / 16 · 500
Légende, métadonnée

Espacements

Grille de 4 px.

space-14 px
space-28 px
space-312 px
space-416 px
space-524 px
space-632 px
space-748 px
space-864 px

Rayons

radius-sm4 · champs
radius-md8 · boutons
radius-lg12 · cartes
radius-fullpilule · statuts