Brand / blue--brand-blue
Le style guide.
Les fondations utilisées sur ce site. Des références à adapter au projet, en ajoutant uniquement ce qui devient nécessaire.
Les couleurs.
Brand, Neutral et Others composent la palette de Base. Les variables de Theme associent ces valeurs aux fonds, aux textes et aux boutons.
Brand / blue-dark--brand-blue-dark
Neutral / paper--neutral-paper
Neutral / ink--neutral-ink
Neutral / white--neutral-white
Neutral / gray--neutral-gray
Others / green--other-green
Others / purple--other-purple
La typographie.
Inter Variable, chargée localement. Les titres utilisent text-wrap: balance, les descriptions text-wrap: pretty.
DisplayUne base claire.
SectionChaque élément
à sa place.
ComposantLes détails font le système.
DescriptionDes styles cohérents pour composer les pages, partager les mêmes repères et garder une lecture confortable sur toutes les tailles d’écran.
Les espacements.
Une échelle courte en rem. Les marges de page passent de 1.25rem à 2.5rem ; les sections de 4.5rem à 7rem à partir de 48rem.
tiny
small
medium
large
xlarge
Les boutons.
Une action principale, une alternative plus discrète. Essayez aussi la navigation au clavier pour voir le focus.
Les composants.
Un défilement horizontal avec un fondu sur les bords. Les commandes restent à l’extérieur du masque.
Des actions lisibles
Un bouton principal, un lien secondaire et un focus visible.
Des titres équilibrés
Une famille, une échelle et des styles de texte regroupés.
Des espacements partagés
Des valeurs en rem, adaptées aux petits et grands écrans.
Des couleurs par rôle
Les usages font référence à la palette du projet.
Des composants simples
Une section et un conteneur communs aux différentes pages.