template
Style Guide
Typographies
Les polices du site : titres et corps de texte.
Titres
Les niveaux de titres, du display au H6.
Display/Text-7xl - This is a display heading.
↳ Display/Text-7xl · 72px · 600 · -0.06em
H1/Text-6xl - This is a heading.
↳ H1/Text-6xl · 60px · 500 · -0.06em
H2/Text-5xl - This is a heading.
↳ H2/Text-5xl · 48px · 500 · -0.06em
H3/Text-4xl - This is a heading.
↳ H3/Text-4xl · 40px · 500 · -0.06em
H4/Text-3xl - This is a heading.
↳ H4/Text-3xl · 32px · 500 · -0.04em
H5/Text-2xl - This is a heading.
↳ H5/Text-2xl · 28px · 500 · -0.04em
H6/Text-xl - This is a heading.
↳ H6/Text-xl · 24px · 500 · -0.04em
Textes
Corps de texte, légendes, libellés et citations.
Lead/Text-xl - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
↳ Lead/Text-xl · 24px · 400 · lh 1.6
Body/Text-lg - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non molestie ante. Curabitur et nunc aliquet, semper magna et, condimentum felis. Praesent hendrerit libero ac velit sollicitudin, at dictum nisl cursus. Quisque molestie lacinia ultricies. Maecenas id consectetur orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean pulvinar commodo dolor, sed faucibus erat semper a.
↳ Body/Text-lg · 20px · 400
Body/Text-base - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non molestie ante. Curabitur et nunc aliquet, semper magna et, condimentum felis. Praesent hendrerit libero ac velit sollicitudin, at dictum nisl cursus. Quisque molestie lacinia ultricies. Maecenas id consectetur orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean pulvinar commodo dolor, sed faucibus erat semper a.
↳ Body/Text-base · 16px · 400
Body/Text-sm - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non molestie ante. Curabitur et nunc aliquet, semper magna et, condimentum felis. Praesent hendrerit libero ac velit sollicitudin, at dictum nisl cursus. Quisque molestie lacinia ultricies. Maecenas id consectetur orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean pulvinar commodo dolor, sed faucibus erat semper a.
↳ Body/Text-sm · 14px · 400
Caption/Text-xs - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
↳ Caption/Text-xs · 12px · 400
Eyebrow/Label - This is an eyebrow
↳ Eyebrow/Label · 13px · 500 · Plus Jakarta Sans · MAJ · +0.12em
Menu/Links - This is a navigation link
↳ Menu/Links · 16px · 500 · -0.01em
Quote/Text-2xl - "The details are not the details. They make the design."
↳ Quote/Text-2xl · 28px · 400
Boutons
Les variantes de boutons du site.
↳ Primary · …
↳ Primary/Blanc · …
↳ Primary/Icône · …
↳ Secondary · …
↳ Secondary/Blanc · …
↳ Secondary/Icône · …
↳ Text · …
↳ Text/Icône · …
Couleurs
La palette de couleurs globale.
Base / système
Blanc · #FFFFFF
Transparent · #FFFFFF
Gris bordure · #D7D7D7
Couleurs de marque
Titre sombre · #1E1C19
Texte corps · #A69F92 · texte
Vert doux · #E2DFCE
Blanc cassé · #EEEAE0
Vert foncé · #233E2D · titres · liens
Vert pastel · #E6ECD6
Vert kaki · #4A5240
Vert nuit (footer) · #101603 · fond
Formulaire
Les champs de formulaire.