Styleguide

Domaine du soir : sombre, élégant, intime

Chaque valeur vient de src/directions/c/tokens.css, qui porte les mêmes noms que les variables du fichier Figma. Seules Base et Size changent d'une direction à l'autre ; le Thème et les composants sont ceux du modèle. Voir l’accueil

Polices (3 max)

Primary · --font-primary

Aa EB Garamond

Titres : Display → H6

Secondary · --font-secondary

Aa Jost

Texte, boutons, légendes, étiquettes (Label)

Couleurs du thème

Thème clair

  • --bg-primary
  • --bg-secondary
  • --bg-tertiary
  • --bg-accent
  • --bg-accent-2
  • --bg-accent-3
  • --bg-accent-4
  • --bg-inverse
  • --text-primary
  • --text-secondary
  • --text-tertiary
  • --text-accent
  • --text-accent-2
  • --text-accent-3
  • --text-accent-4
  • --text-on-accent
  • --text-inverse
  • --border-strong
  • --border-medium
  • --border-light

Thème sombre

  • --bg-primary
  • --bg-secondary
  • --bg-tertiary
  • --bg-accent
  • --bg-accent-2
  • --bg-accent-3
  • --bg-accent-4
  • --bg-inverse
  • --text-primary
  • --text-secondary
  • --text-tertiary
  • --text-accent
  • --text-accent-2
  • --text-accent-3
  • --text-accent-4
  • --text-on-accent
  • --text-inverse
  • --border-strong
  • --border-medium
  • --border-light

Palettes (Base)

neutral

0
50
100
200
400
600
800
900
1000

accent-1

100
500
700

accent-2

100
500
700

accent-3

100
500
700

accent-4

100
500
700

Styles de texte

Chaque taille existe dans les 2 polices. .t-h1 seul = police par défaut ; .t-h1 .f-secondary = H1 en police secondary.

.f-primary.f-secondary
.t-display DisplayDisplay
.t-h1 Titre H1Titre H1
.t-h2 Titre H2Titre H2
.t-h3 Titre H3Titre H3
.t-h4 Titre H4Titre H4
.t-h5 Titre H5Titre H5
.t-h6 Titre H6Titre H6
.t-body-l ChapeauChapeau
.t-body Texte courantTexte courant
.t-body-s Texte secondaireTexte secondaire
.t-caption Légende, dateLégende, date
.t-label ÉtiquetteÉtiquette

Espacements et rayons

--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--radius-none
--radius-xs
--radius-s
--radius-m
--radius-l
--radius-full
--radius-button (projet)

Composants de base

ChambreSuite
Chambre

La Lavande, avec une fenêtre en arche sur le champ

2 personnes · lit 160 · dès 135 € la nuit

ChambreSuite
Chambre

La Lavande, avec une fenêtre en arche sur le champ

2 personnes · lit 160 · dès 135 € la nuit