template
Style Guide
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 · …
↳ Secondary · …
↳ Secondary/Blanc · …
↳ Text · …
↳ Text/Icône · …
Couleurs
La palette de couleurs globale.
Base / système
Blanc · #FFFFFF · fond
Noir · #1F2122 · titres · liens
Transparent · #FFFFFF
Gris foncé · #63635E · texte
Gris · #AAAAAA
Gris clair · #D2D2D2
Gris très clair · #F2F2F2
Couleurs de marque
Primaire · #FFBB00
Primaire léger · #FFFCE8
Formulaire
Les champs de formulaire.