Typographie
Titres
Espacement entre exemples — padding: var(--space-9) 0 (24px)
H1 — Bree Serif — 3rem — line-height 1.1
H2 — Bree Serif — 2.5rem — line-height 1.1
H3 — Bree Serif — 2rem — line-height 1.1
H4 — Bree Serif — 1.7rem — line-height 1.1
H5 — Bree Serif — var(--text-sm) / 16px — line-height 1.1
H6 — Bree Serif — var(--text-xs) / 14px — line-height 1.1
Titre sur deux lignes
Titre sur deux lignes
Corps de texte
p — margin: 0 0 1em (.prose p), padding: 0 (aucun padding)
Paragraphe — Open Sans, 16px (1rem), line-height 1.4. Lorem ipsum dolor sit amet consectetur adipiscing elit, lien dans le texte, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Liste à puces
ul/ol — font-size: 16px, line-height: 1.4, padding-left: 1em, puces en --color-primary (.prose ul : pas d'espace entre items)
- Premier élément de la liste
- Deuxième élément, un peu plus long pour voir le retour à la ligne et l'alignement du texte
- Troisième élément
Échelle de tailles (--text-*)
--text-xs | 14px | Aa — méta articles, nav dropdown |
--text-sm | 16px | Aa — corps de texte |
--text-base | 18px | Aa — boutons, titres cards blog |
--text-md | 20px | Aa — titres secondaires medium |
--text-lg | 26px | Aa — citations col 1/2 |
--text-xl | 32px | Aa — titres de sections |
--text-2xl | 48px | Aa — grands titres |
--text-3xl | 3rem | Aa — headings hero secondaires |
--text-hero | 6rem | Aa |
Graisses (--weight-*)
Light (200) — sous-titres citation
Regular (400) — texte courant
Medium (500) — navigation principale
Bold (700) — sous-menus, méga-menu
Heavy (800) — chevron dropdown
Polices
--font-body | Open Sans — corps de texte |
--font-button | Bree Serif — titres, boutons |
Couleurs de texte
--color-text — texte courant (#333333)
--color-text-muted — méta, secondaire (#666666)
--color-text-subtle — très secondaire (#999999)
--color-text-faint — désactivé (#bbbbbb)
--color-primary — bleu marine (#000086)
--color-accent — jaune doré (#fec417)