The Quiet Curator

01 Couleurs

Palette organique et restreinte, nommée comme shadcn/ui : un rôle, un token. Les mêmes noms servent en clair et dans un conteneur .dark, qui ne fait que changer les valeurs.

Clair :root

• --background #faf8f5 fond de page
• --foreground #1a1410 texte principal (16:1)
• --card #ffffff carte posée sur un fond (admin)
• --primary #2a2420 CTA, bandeaux sombres
• --primary-foreground #f5f0ea texte sur primary
• --secondary #f0ebe4 bouton secondaire, survols, bandes
• --muted #f5f0ea sections, zones discrètes
• --muted-foreground #5e5450 texte secondaire (6.9:1)
• --accent #7a5c38 cuivre : kickers, liens (5.8:1)
• --accent-foreground #faf8f5 texte sur accent
• --destructive #9b3a3a erreur, vendu, suppression
• --success #3d6b4a en cours, disponible, envoyé
• --warning #8a5a1c nouveau, à traiter
• --info #3d5a74 confirmé
• --border color-mix(in srgb, var(--foreground) 10%, transparent) filets, séparateurs
• --input color-mix(in srgb, var(--foreground) 20%, transparent) contours de champ, bouton outline
• --ring var(--primary) anneau de focus
• --overlay color-mix(in srgb, var(--foreground) 60%, transparent) voile derrière un dialogue

Sombre .dark

Dégradés

• --gradient-primary bois poli : CTA, bandeaux sombres
• --gradient-placeholder papier éclairé : visuel manquant
• Titre sur photo --gradient-overlay voile de lisibilité : texte sur photo

Empilement des surfaces

02 Typographie

Noto Serif porte la voix éditoriale (titres, citations, corps). Inter assure l'utilitaire (labels, boutons, navigation) en capitales espacées — les « étiquettes d'exposition ».

Familles

• Aa Noto Serif --font-serif L'ART AU FÉMININ, de A à Z — 0123456789
• Aa Inter --font-sans L'ART AU FÉMININ, de A à Z — 0123456789
• Aa Monospace système --font-mono L'ART AU FÉMININ, de A à Z — 0123456789

Échelle

• --text-4xl 44 → 72px — héros

  Le silence des salles

• --text-3xl 36 → 56px — titres de page

  Le silence des salles

• --text-2xl 28 → 36px — titres de section

  Le silence des salles

• --text-xl 22px — titres de cartes

  Le silence des salles

• --text-lg 18px — texte lead, sous-titres

  Le silence des salles

• --text-base 16px — corps de texte

  Le silence des salles

• --text-sm 14px — métadonnées, boutons, légendes

  Le silence des salles

• --text-xs 12px — labels capitales, kickers, badges

  Le silence des salles

Interlettrage

• --tracking-tight -0.02em

  Exposition

• --tracking-normal 0em

  Exposition

• --tracking-wide 0.08em

  Exposition

• --tracking-wider 0.18em

  Exposition

• --tracking-widest 0.28em

  Exposition

Composition éditoriale

03 Espacement & relief

Base 4px. En cas de doute, on augmente le token. L'élévation est une question de lumière et de matière : glissements tonals d'abord, ombres ambiantes teintées ensuite.

Espacement

• --space-1 0.25rem · 4px
• --space-2 0.5rem · 8px
• --space-3 0.75rem · 12px
• --space-4 1rem · 16px
• --space-5 1.25rem · 20px
• --space-6 1.5rem · 24px
• --space-7 1.75rem · 28px
• --space-8 2rem · 32px
• --space-10 2.5rem · 40px
• --space-12 3rem · 48px
• --space-16 4rem · 64px
• --space-20 5rem · 80px
• --space-24 6rem · 96px
• --space-28 7rem · 112px

Transitions

• --transition-fast 0.18s ease — survoler
• --transition-base 0.25s ease — survoler
• --transition-medium 0.35s ease — survoler

04 Composants

API à la shadcn : une classe de base, des variantes et des tailles composables. Les exemples ci-dessous sont statiques, chaque zone de démonstration est un cran de surface plus bas que la page.

Boutons .btn

Classes libres dans n'importe quel ordre : variantes et tailles ne posent que des variables --btn-*. Sur un fond particulier, surcharger ces variables plutôt que les propriétés.

Rangée de boutons .btn-row

Les boutons passent à la ligne quand la place manque.

Badges .badge

Kickers .kicker

Fil d'Ariane .breadcrumb

Champs .field

Cartes .card

Dialogue .dialog

QR code .qr-panel

Cartel .cartel

Panneau en verre sombre de la galerie 3D, pour une œuvre ou un livre. Chaque bloc est optionnel : le cartel se cale sur son contenu. Sous 768 px, il devient une feuille pleine largeur en bas de l'écran, image au-dessus du texte — réduire la fenêtre pour la voir.