Foundation
Design tokens
Color, typo, spacing, radius. Tout part d'ici.
01 - Colors
Colors
Teal
Primary brand. Dark teal crée le brand voice; stormy is the default action color.
Dark Teal
--color-teal-dark
Headings + nav
Stormy Teal
--color-teal-stormy
CTA + links
Teal Light
--color-teal-light
UI surfaces
Almond
Secondary warm. Toasted is the old accent tone and the soft CTA fill.
Toasted Almond
--color-almond-toasted
Accent highlight
Dark Almond
--color-almond-dark
Accent hover
Almond Light
--color-almond-light
Panels + tags
Peach Hover
--color-almond-hover
Soft hover state
Neutrals
Pure black on white per brief. Grays for borders and supporting copy only.
Black
--color-black
Primary text
White
--color-white
Background
Gray 900
--color-gray-900
Titles + strong UI
Gray 700
--color-gray-700
Secondary text
Gray 500
--color-gray-500
Muted labels
Gray 300
--color-gray-300
Keyline borders
Gray 100
--color-gray-100
Soft backgrounds
02 - Type
Typography
Line-height lisible, contrastes propres, et tonalite editoriale nette.
Display / H1
L'aventure etudiante, ailleurs.
Display / H2
On vous emmene au bon endroit.
Display / H3
Une approche editoriale, claire.
Display / H4
Sous-titres et libelles forts.
Display / H5
Un niveau plus discret.
Display / H6
Micro-titre pour des details ou des etiquettes.
Body/Large
Paragraphe d'introduction qui pose le ton sans surcharger la page.
Body/Base
Texte courant, lisible en mobile et desktop, avec un contraste net.
Body/Small
Texte courant, lisible en mobile et desktop, avec un contraste net.
Eyebrow
Texte courant, lisible en mobile et desktop, avec un contraste net.
Caption
Texte courant, lisible en mobile et desktop, avec un contraste net.
03 - Components
Buttons, Inputs, Image
Buttons
Card sample
Image + content block
Exemple de bloc visuel avec image, titre, texte et actions.