Domaine des Trois Pierres Vins de Bourgogne
Réserver une dégustation
Réserver une dégustation

Starter T-IN · guide des composants

Fondations

La palette, la typographie et les utilitaires globaux. Un seul fichier pilote tout : src/styles/tokens.css — ce guide se met automatiquement aux couleurs du thème courant.

Fondations

Sections

Contenus

Immersifs

Pages de démo

Palette

Dix couleurs sémantiques. Aucune couleur en dur ailleurs que dans tokens.css : les composants ne connaissent que ces noms.

  • --paper Fond clair principal
  • --paper-soft Fond clair alterné
  • --ink Texte principal
  • --muted Texte secondaire sur clair
  • --dark Fond sombre
  • --dark-deep Fond sombre profond
  • --stone Texte secondaire sur sombre
  • --stone-deep Pierre soutenue
  • --accent Couleur de marque (sélection)
  • --detail Filet précieux, focus

Typographie

Deux familles auto-hébergées (@fontsource, importées dans Base.astro) et une échelle fluide — les tailles s'adaptent à l'écran via clamp().

Aa

Titre de page --h1

Titre de section --h2

Sous-titre --h3

Corps de texte — Jost 300, interlignage 1.65, largeur de mesure limitée à 62ch pour rester lisible. --body

Petites capitales espacées --small

Boutons & liens

Trois variantes de bouton et le lien filet animé. Sur fond sombre, utiliser btn-outline-light.

btn-solid btn-outline link-line
btn-outline-light link-line sur sombre
Voir le code 
<a class="btn btn-solid" href="/contact">Réserver</a>
<a class="btn btn-outline" href="/les-vins">Découvrir</a>
<a class="link-line" href="/actualites">Toutes les actualités</a>

<!-- sur fond sombre (.on-dark) -->
<a class="btn btn-outline-light" href="/contact">Réserver</a>

Utilitaires de composition

Les classes globales qui rythment toutes les pages : .container (largeur maîtrisée), .narrow (44rem), .section (respiration verticale), .eyebrow (surtitre), .rule (filet), .on-dark, .reveal (+ --reveal-delay), .media-frame / .media-zoom, .parallax.

Surtitre .eyebrow

Le filet .rule ci-dessus ; l'apparition .reveal est visible sur toutes les fiches de ce guide.

Voir le code 
<section class="section on-dark">
  <div class="container narrow">
    <span class="eyebrow reveal">Surtitre</span>
    <h2 class="reveal" style="--reveal-delay:0.1s">Titre</h2>
    <hr class="rule" />
  </div>
</section>
Guide