Skip to content

00 - Classes CSS

Des classes CSS peuvent être ajoutées à des blocs individuels afin de personnaliser encore davantage l'aspect et la convivialité. Pour ce faire, il suffit de sélectionner un bloc et, dans la barre latérale droite, sous la section "Avancé", d'ajouter la ou les classes dans le champ "Classe(s) CSS supplémentaire(s)". Vous pouvez ajouter plusieurs classes en les séparant par un espace (par exemple, "exemple-classe-1 exemple-classe-2").

Si l'un des styles de ce guide de style nécessite une classe utilitaire, celle-ci sera ajoutée à proximité et stylisée comme ceci : exemple-classe-1

01 - Iconographie

Logo principal

Ceux-ci doivent être exportés en tant que SVG mais si un PNG est nécessaire, ils doivent être exportés à 2x pour préserver la qualité de l'image.

Favicons

Ceux-ci doivent être exportés en tant que SVG mais si un PNG est nécessaire, ils doivent être exportés à 2x pour préserver la qualité de l'image.

Petites icônes

Ces icônes ont été conçues à 24px avec une épaisseur de trait de 2,5px. Elles ne doivent être exportées qu'au format SVG.

Grandes icônes

Ces icônes ont été conçues à 80px avec une épaisseur de trait de 5px. Elles ne doivent être exportées qu'au format SVG.

02 - Couleurs

Couleurs primaires

Ils ont été choisis pour incarner le cœur de la marque et peuvent être utilisés pour les boutons, les styles de survol et d'autres éléments de l'interface utilisateur.

Octane Orange
RGB 245 / 126 / 37
#f57e25

Octane Gold
RGB 253 / 161 / 0
#fda100

Noir
RGB 36 / 36 / 41
#242429

Blanc
RGB 255 / 255 / 255
#ffffff

Couleurs secondaires

Ils ont été choisis pour soutenir le cœur de la marque et peuvent être utilisés pour le corps du texte, les icônes et d'autres éléments secondaires de l'interface utilisateur.

Gris 1
RGB 74 / 72 / 78
#4a484e

Gris 2
RGB 117 / 117 / 117
#757575

Gris 3
RGB 227 / 227 / 227
#e3e3e3

Gris 4
RGB 244 / 244 / 244
#f4f4f4

États de retour d'information

Ils sont utilisés pour transmettre un retour d'information à l'utilisateur (erreur, avertissement, succès).

Retour d'erreur
RGB 245 / 56 / 10
#f5380a
erreur de texte (texte)
bg-error (arrière-plan)

Commentaires d'avertissement
Utilisations (Octane Gold)

Feedback sur le succès
RGB 29 / 171 / 111
#1dab6f
texte-succès (texte)
bg-succès (arrière-plan)

03 - Typographie

Polices de caractères

Les polices de caractères présentées ci-dessous indiquent quelles polices de caractères peuvent être utilisées sur le site. La Phonk et la Readex Pro peuvent toutes deux être téléchargé ici.

Readex Pro - Light

Readex Pro - Régulier

Readex Pro - SemiBold

Readex Pro - Gras

font-readex (par défaut)

PHONK - RÉGULIER

font-phonk

Styles d'en-tête

Toutes les tailles de police, hauteurs de ligne et espacements de lettres sont indiqués ci-dessous en pixels. Les titres peuvent utiliser n'importe quelle police de caractères indiquée ci-dessus, selon les besoins. (D=Desktop & M=Mobile)

StylesNom de la policeTaille de la police
(D / M)
Hauteur de la ligne
(D / M)
Espacement des lettres
(D / M)
Classe CSS
Titre 2XLPhonk54px / 36px74px / 36px2px / 2pxtexte-titre-2xl
Titre XLPhonk36px / 26px42px / 30px2px / 2pxtext-title-xl
Grand TitrePhonk22px32px0pxtext-title-lg
TitreReadex Pro20px28px0pxtexte-titre
DéfautReadex Pro14px26px0pxN/A (par défaut)
Petit titreReadex Pro12px15px1pxtext-title-sm
Remarque : le tableau ci-dessus utilise le style "Stripes". Le style "Default" permet d'afficher des bordures autour de toutes les cellules du tableau.

04 - Champs d'entrée

Champs de formulaire

Cases à cocher

Boutons radio

05 - Boutons

Bouton primaire

Bouton secondaire

Bouton tertiaire

Bouton de pilule

Pagination

06 - Autres IU

Ombres

Images du produit

Carte de navigation

Blog Info

Télécharger les composants

Cartes de blog

Cartes de localisation