DESIGN SYSTEM – Site Internet Fenix Project

Définition des styles de titres (H1 → H4)

H1 – Poppins – 48px – Bold (700) #2E2E2E

H2 – Poppins – 36px – Semi-Bold (600) #2E2E2E

H3 – Poppins – 28px – Semi-Bold (600) #2E2E2E

H4 – Poppins – 22px – Semi-Bold (600) #2E2E2E

H5 – Poppins – 16px – Semi-Bold (600) #2E2E2E

H1 – Poppins – 48px – Bold (700)

H2 – Poppins – 36px – Semi-Bold (600)

H3 – Poppins – 28px – Semi-Bold (600)

H4 – Poppins – 22px – Semi-Bold (600)

H5 – Poppins – 16px – Semi-Bold (600)

Typographie utilisée dans le contenu

Ce paragraphe utilise la police Mulish en taille 16px, poids 400, avec un interligne de 1.6 pour assurer une bonne lisibilité. Il sert de référence pour le style du texte courant dans votre design system, tel qu’utilisé pour les descriptions, articles, ou contenus éditoriaux.

Ce paragraphe utilise la police Mulish avec un poids de 600 pour un rendu en gras. Il permet de mettre en valeur un contenu important dans une section de texte courant tout en restant lisible et harmonieux avec la charte graphique du site.

Ce paragraphe utilise la police Mulish avec un poids de 700, soit le niveau de gras maximal pour cette fonte. Il est utilisé pour les éléments de texte à forte emphase ou pour attirer l’attention dans une section de contenu dense.

Couleurs & intentions

Rayon de bordure : 3px
Marge : 7px
Largueur de bordure : 1px
Couleur de bordure : #2E2E2E
Icônes des boutons ci dessous indiquées

#e95137
Couleur principale 1

#FFC93C
Couleur principale 2

#2E2E2E
Noir léger

#3978A9
Bleu Entreprise

#3978A9
Noir léger

#2E2E2E
Noir léger

Styles de boutons : couleurs, forme, état

Rayon de bordure : 3px
Marge : 7px
Largeur de bordure : 1px
Couleur de bordure : #2E2E2E
Interlignage : 13px (centrer le texte par rapport à l’icône)
Icônes des boutons ci-dessous indiquées

Les boutons peuvent être utilisés avec un texte et une bordure de couleur blanche ou noire, selon le fond sur lequel ils sont placés.

Recommandations d’usage :

Utiliser la version blanche (texte + bordure blancs) sur fond coloré ou foncé, pour garantir la lisibilité et le contraste.

Utiliser la version noire (texte + bordure noirs) sur fond clair, neutre ou très pâle.

Ne pas utiliser ces variantes sur des fonds photographiques complexes ou peu contrastés sans ajouter un fond semi-transparent ou un contour supplémentaire.

Éviter l’usage sur fonds de couleur similaire (ex : bouton blanc sur fond crème).