CHAMPAGNEMAISON D'EXCEPTION

Design system · v1.0

UI Kit du site
Maison d'Exception

Documentation de l'identité visuelle et des composants d'interface du site vitrine : couleurs, typographies, boutons et éléments récurrents.

01 — Identité

Logotype

Logotype purement typographique : le mot-symbole en Cormorant Garamond, interlettré, surmonté de la signature « Maison d'Exception » en Montserrat capitales espacées.

Sur fond clair
CHAMPAGNEMAISON D'EXCEPTION
Sur fond sombre
CHAMPAGNEMAISON D'EXCEPTION
Version dorée · usages ponctuels
CHAMPAGNEMAISON D'EXCEPTION

02 — Couleurs

Palette

Une palette resserrée : deux neutres, un noir profond et un or unique. L'or est réservé aux accents — jamais en aplat de fond sur de grandes surfaces.

Or
#C9A45C · --color-gold
Accents, bordures de boutons, sous-titres, hover.
Or clair
#D9BD85 · --color-gold-light
Déclinaison sur fonds sombres, signatures.
Noir profond
#111111 · --color-dark
Sections sombres, header scrollé, footer.
Encre
#1A1A1A · --color-text
Couleur de texte principale.
Crème
#F8F5EF · --color-bg
Fond général du site.
Blanc
#FFFFFF
Cartes, formulaires, surfaces posées sur le fond crème.

03 — Typographie

Typographies & échelle

Un duo classique : une serif de caractère pour les titres, une sans-serif discrète pour le texte courant et les éléments d'interface.

Aa Bb Cc — 1234
Cormorant Garamond · 300 → 700
Titres (H1–H3), logotype, chiffres mis en avant. Graisse de référence : 500.
Aa Bb Cc — 1234
Montserrat · 300 → 500
Texte courant (300), navigation, labels et boutons en capitales espacées.
H1 — HeroSerif 500 · clamp 38→64px · lh 1.05
L'expression d'un terroir
H2 — SectionSerif 500 · clamp 28→44px
Trois expressions d'un même terroir
H3 — CarteSerif 500 · 28–35px
Blanc de Noirs
Sous-titreSans 500 · 12px · caps · +3px
Au cœur de la Champagne
Corps de texteSans 300 · 15px · lh 1.8
Chacune de nos cuvées révèle une facette différente de notre domaine, entre puissance, équilibre et élégance.
Label / boutonSans 400 · 12px · caps · +2-3px
Découvrir le domaine

04 — Boutons

Boutons & interactions

Le bouton principal est un contour or sur fond transparent ; le survol inverse le rapport en remplissant d'or. Transitions longues (.4s) pour un effet feutré.

Principal · repos Découvrir le domaine
Principal · survol Découvrir le domaine
Formulaire · repos (survolez)
Sur fond clair (survolez)

05 — Composants

Composants récurrents

Les éléments d'interface du site, réutilisables tels quels : carte cuvée, champs de formulaire et liste de coordonnées.

Carte cuvée · hover : translateY(-15px)
Champagne Brut Réserve

Brut Réserve

Assemblage Pinot Noir · Chardonnay

L'équilibre entre finesse et caractère : une cuvée polyvalente, vive et enveloppante.

Champs de formulaire
Liste de coordonnées
  • Adresse12 rue des Vignes, 10340 Les Riceys
  • Téléphone03 25 00 00 00
  • HorairesDu lundi au samedi, sur rendez-vous

06 — Règles d'usage

À faire / à éviter

Quelques garde-fous pour préserver la cohérence de l'identité.

✓ À faire

Réserver l'or aux accents : bordures, sous-titres, états de survol. C'est sa rareté qui crée le sentiment de luxe.

✓ À faire

Poser les titres en Cormorant Garamond graisse 500, avec des interlignages serrés (1.05–1.2) sur les grands corps.

✓ À faire

Espacer généreusement : sections en clamp(70px, 10vw, 140px), marges latérales de 8 à 10 %.

✗ À éviter

Aplats d'or en fond de section ou de bouton au repos — l'or plein est un état de survol, pas un état par défaut.

✗ À éviter

Graisses lourdes (bold) en texte courant : le corps reste en Montserrat 300 pour préserver la légèreté.

✗ À éviter

Introduire de nouvelles couleurs ou déformer le logotype (étirement, ombres, contours).