Guide de style

Ce guide de style sert de document de référence présentant des illustrations claires sur la typographie, les schémas de couleurs et autres éléments de design.

Aa

Logo sombre

Logo lumineux

Ne pas étirer

N'ajoutez pas d'ombres

Ne changez pas les couleurs

Ne pas tracer

Ne pas faire tourner

Ne pas réduire l'opacité

Charte graphique

Maintenir un espace dégagé

Assurez un contraste suffisant

Mode clair

Mode sombre

nuances

Teintes

Mode clair

Mode sombre

nuances

Teintes

Mode clair

Mode sombre

nuances

Teintes

Mode clair

Mode sombre

nuances

Teintes

Mode clair

Mode sombre

nuances

Teintes

Police du corps : Quelque chose

.text-4xl

.text-3xl

.text-2xl

.text-xl

.text-l

.text-m

.text-s

.text-xs

.font-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Police d'en-tête : Quelque chose

Ceci est un lien hypertexte

Légende:

AA Conforme aux normes WCAG AA (rapport de contraste >= 4,5)

AAA Conforme aux exigences WCAG AAA (taux de contraste >= 7)

AA Grand Passes pour texte de grande taille uniquement (rapport de contraste >= 3)

DNP Ne passe pas (rapport de contraste) < 3)

Texte \ Arrière-plan	primaire	primaire-d-1	primaire-d-2	primaire-d-3	primaire-d-4	primaire-l-1	primaire-l-2	primaire-l-3	primaire-l-4	secondaire	secondaire-d-1	secondaire-d-2	secondaire-d-3	secondaire-d-4	secondaire-l-1	secondaire-l-2	secondaire-l-3	secondaire-l-4	tertiaire	tertiaire-d-1	tertiaire-d-2	tertiaire-d-3	tertiaire-d-4	tertiaire-l-1	tertiaire-l-2	tertiaire-l-3	tertiaire-l-4	ora-vert	ora-vert-d-1	ora-vert-d-2	ora-vert-d-3	ora-vert-d-4	ora-vert-d-6	ora-vert-d-7	ora-vert-d-8	ora-vert-l-1	ora-vert-l-2	ora-vert-l-3	base	base-d-1	base-d-2	base-d-3	base-d-4	base-l-1	base-l-2	base-l-3	base-l-4	corps de fond	surface de fond	corps du texte	titre du texte	lumière	lumière neutre	sombre	succès	erreur
primaire
primaire-d-1
primaire-d-2
primaire-d-3
primaire-d-4
primaire-l-1
primaire-l-2
primaire-l-3
primaire-l-4
secondaire
secondaire-d-1
secondaire-d-2
secondaire-d-3
secondaire-d-4
secondaire-l-1
secondaire-l-2
secondaire-l-3
secondaire-l-4
tertiaire
tertiaire-d-1
tertiaire-d-2
tertiaire-d-3
tertiaire-d-4
tertiaire-l-1
tertiaire-l-2
tertiaire-l-3
tertiaire-l-4
ora-vert
ora-vert-d-1
ora-vert-d-2
ora-vert-d-3
ora-vert-d-4
ora-vert-d-6
ora-vert-d-7
ora-vert-d-8
ora-vert-l-1
ora-vert-l-2
ora-vert-l-3
base
base-d-1
base-d-2
base-d-3
base-d-4
base-l-1
base-l-2
base-l-3
base-l-4
corps de fond
surface de fond
corps du texte
titre du texte
lumière
lumière neutre
sombre
succès
erreur

Guide de style

En-tête 1

En-tête 2

En-tête 3

En-tête 4

En-tête 5

En-tête 6