bouillonsaintjean.fr
bouillonsaintjean.fr is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(36, 37, 37) as a near-neutral accent (low saturation). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Yeseva One as the primary typeface. A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 12 keyframe animations plus transition-driven interactions.
Accent #242525 · police principale Nunito Sans
Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.
Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.
Couleurs — rôles, sémantique & recensement complet
14 couleurs mesurées · clique une pastille pour copier
Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.
14 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
8 rôles · rendu live dans la vraie Nunito Sans (woff2 capturé) · lignes éditables, clique une spec pour copier
Espacements & arrondis, rendus spatiaux
9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes
0px
4px
8px
14px
20px
32px
9999px
Profondeur — l’élévation est extraite, pas inventée
2 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
Motion — courbes, transitions & keyframes réels
1 courbe d’easing · 12 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
13 familles de composants · 54 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| buttons | ×10 |
| links | ×10 |
| nav Links | ×9 |
| footer Links | ×7 |
| inputs | ×3 |
| reservation Card | ×3 |
| badges | ×2 |
| heading H2 | ×2 |
| heading H5 | ×2 |
| captions | ×2 |
| divider | ×2 |
| heading H1 | ×1 |
| heading H3 | ×1 |
Specs de style des composants (§4)déplier
Buttons
Secondary
- Background:
#242525{colors.primary} - Text:
#d3d3d3 - Padding: 8px 16px
- Radius: 0px
- Border: 1px solid rgb(36, 37, 37)
- Font: 12px weight 700
- Use: Secondary action
Outline
- Background:
transparent - Text:
#191d25{colors.ink-muted} - Padding: 8px 16px
- Radius: 0px
- Border: 1px solid rgb(36, 37, 37)
- Font: 12px weight 700
- Use: Secondary action with border
Icon Button
- Background:
transparent - Text:
#8c8e92 - Padding: 0px
- Radius: 0px
- Border: 1px solid rgb(36, 37, 37)
- Font: 18px weight 300
- Use: Toolbar/UI icons
Light / Invert
- Background:
#ffffff{colors.on-primary} - Text:
#242525{colors.primary} - Padding: 8px 16px
- Radius: 0px
- Border: 1px solid rgb(36, 37, 37)
- Font: 12px weight 700
- Use: Bright CTA on dark sections
Inputs & Forms
Text Input
- Background:
#ffffff{colors.on-primary} - Text:
#000000 - Padding: 10px
- Radius: 0px
- Border: 0px none rgb(0, 0, 0)
- Font: 14px weight 400
- Use: Text fields, search inputs
- Focus: outline:
rgb(0, 0, 0) solid 3px
Navigation
Main Nav
- Background:
#ffffff{colors.on-primary} - Padding: 0px 24px
- Radius: none
- Shadow:
rgba(9, 17, 47, 0.1) 0px 8px 40px 0px - Font: 16px weight 300
- Use: Fixed/sticky flex nav — N/A items
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
9 points de rupture lus dans le CSS live
À faire / À éviter
13 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page