Ce qui compose le site
Design system
Un design system est une bibliothèque centralisée qui regroupe tous les éléments visuels et fonctionnels d’un produit digital : couleurs, typographie, composants, règles d’usage. Pour les designers, c’est un langage commun qui garantit cohérence et rapidité. Pour les clients, c’est l’assurance que leur produit reste uniforme à chaque évolution.
Logos et Favicon
Polices
/***************************************************************************************************************************
* Font : police de caractères : Utliser que des polices web Google fonts : https://fonts.google.com/
* Une police unique doit être utilisée pour tous les titres (h1, h2, h3, h4, h5, h6)
******************************************************************************************************************************/
/* 1. Texte courant : Moderne et aéré */
$font0: 'Montserrat', sans-serif; // pour tous les textes en paragraphes police par défaut
/* 2. Titres principaux */
$font1: 'Outfit', sans-serif;
/* 3. Titres secondaires */
$font2: 'Roboto Slab', serif;
/* 4. Sous-titres ou Accents */
$font3: 'Arvo', serif;
Couleur
color1
color2
color3
color4
color5
color6
bgcolor1
bgcolor2
bgcolor3
bgcolor4
bgcolor5
bgcolor6
Primary
gris1
gris2
gris3
gris4
gris5
$colors: (
"primary": #3b414c, // Couleur des paragraphes par défaut
"noir": #000000, // Noir ne pas toucher
"blanc": #ffffff, // Blanc ne pas toucher
// Nuances de gris
"gris1": #F2F2F2,
"gris2": #EEEEEE,
"gris3": #707070,
"gris4": #333333,
"gris5": #1C1C1C,
// Couleurs design
"color1": #02415d, // Primaire — bleu pétrole
"color2": #00a29e, // Secondaire — turquoise
"color3": #e8833a, // CTA principal — orange ambré
"color4": #c46420, // CTA secondaire — orange brûlé
"color5": #1a6685, // Bleu intermédiaire
"color6": #6fb8c9, // Bleu glacier
// Couleurs de background design
"bgcolor1": #e6eef2, // Wash bleu pétrole
"bgcolor2": #E9F3F3, // Wash turquoise
"bgcolor3": #f0ece6, // Wash orange
"bgcolor4": #eef4f7, // Bleu très pâle
"bgcolor5": #dce9ef, // Bleu poudré
"bgcolor6": #c7dde6, // Bleu nuage
);
Dégradé
/*****************************************************************************************************************************
* VARIABLES PAS UTILISEES POUR CE SITE
* Degrade : pour les backgrounds : ex : @include degrad_1;
******************************************************************************************************************************/
@mixin degrad_1 {
background: linear-gradient(0deg, rgba(238,237,237,1) 0%, rgba(248,248,248,1) 100%);
}
@mixin degrad_2 {
background: linear-gradient(0deg, rgba(238,237,237,1) 0%, rgba(248,248,248,1) 100%);
}
@mixin degrad_3 {
background: linear-gradient(0deg, rgba(238,237,237,1) 0%, rgba(248,248,248,1) 100%);
}
Radius
/*****************************************************************************************************************************
* Radius : pour les bordures : ex : @include radius_1;
* Ne radius_1 ne peut pas être changé
* Respecter le nomme qui ammplique un roduis de plus en plus important
******************************************************************************************************************************/
//@include radius_1;
@mixin radius_1 {
border-radius: 50%;
}
@mixin radius_2 {
border-radius: 6px;
}
@mixin radius_3 {
border-radius: 12px;
}
@mixin radius_4 {
border-radius: 24px;
}
Pages
titre de page : titre_1 - $font2
titre de page : titre_2 - $font2
titre de page : titre_2_center - $font2
titre de page : titre_3 - $font2
titre de page : titre_4 - $font2
titre de page : titre_5 - $font2
Post
titre de post : post_titre_1 - $font2
titre de post : post_titre_2 - $font2
titre de post : post_titre_3 - $font2
titre de post : post_titre_4 - $font2
Accroche & spe
titre accroche : titre_accroche_1 - $font2
titre special : titre_spe_1 - $font2
Texte body paragraphe
body_s
font-size: 0.75rem; // 12px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
body_m = Taille de body par défault
font-size: 0.938rem; // 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
body_l
font-size: 1.063rem; // 17px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
body_xl
font-size: 1.25rem; // 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Couleur tag de texte
Contenu tag - txt_tag_1
Contenu tag - txt_tag_2
Contenu tag - txt_tag_3
Contenu tag - txt_tag_gris3
Contenu tag - txt_tag_gris4
Contenu tag - txt_tag_gris5
Bouton CTA :
btn_cta_1
btn_cta_2
Bouton link
btn_link_1
btn_link_2
btn_more
liens de texte
link_color_0
link_color_1
link_color_2
link_color_3
Padding container
/******************************
* IMPORTANT = Padding container
******************************/
.row_pad {
padding: 3rem 1rem !important;
}
.row_pad_top {
padding: 3rem 1rem 0rem 1rem !important;
}
.row_pad_bottom {
padding: 0rem 1rem 3rem 1rem !important;
}
Paragraphe 0 marge
/******************************
* Padding / margin spe : suppression des marges et paddings par défaut sur les paragraphes
******************************/
.textmarg_0 {
p {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
}
Liste à puces
liste_puce_1
- Liste à puce 1
- Liste à puce 1
- Liste à puce 1
- Liste à puce 1
- Liste à puce 1
- Liste à puce 1
liste_puce_2
- Liste à puce 2
- Liste à puce 2
- Liste à puce 2
- Liste à puce 2
- Liste à puce 2
- Liste à puce 2
liste_puce_3
- Liste à puce 3
- Liste à puce 3
- Liste à puce 3
- Liste à puce 3
- Liste à puce 3
- Liste à puce 3
liste_puce_4
- Liste à puce 4
- Liste à puce 4
- Liste à puce 4
- Liste à puce 4
- Liste à puce 4
- Liste à puce 4