grand-hotel-de-nimes.com
grand-hotel-de-nimes.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(9, 6, 47) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Dancing Script as the primary typeface. Dancing Script is paired with Linearicons for secondary roles. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 198 keyframe animations plus transition-driven interactions.
Accent #09062f · police principale Pompiere
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
22 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.
22 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
8 rôles · rendu live dans la vraie Pompiere (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
7px
16px
18px
32px
9999px
Profondeur — l’élévation est extraite, pas inventée
7 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
Motion — courbes, transitions & keyframes réels
2 courbes d’easing · 198 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
19 familles de composants · 80 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| buttons | ×10 |
| links | ×10 |
| price Tag | ×10 |
| cards | ×8 |
| nav Links | ×6 |
| date Picker | ×6 |
| heading H2 | ×5 |
| captions | ×5 |
| inputs | ×4 |
| heading H3 | ×3 |
| reservation Card | ×3 |
| badges | ×2 |
| footer Links | ×2 |
| search Bar | ×1 |
| pricing Card | ×1 |
| logo Tile | ×1 |
| heading H1 | ×1 |
| heading H4 | ×1 |
| tooltip | ×1 |
Specs de style des composants (§4)déplier
Buttons
Dark / Solid
- Background:
#09062f{colors.primary} - Text:
#ffffff{colors.on-primary} - Padding: 16.368px 28.8px
- Radius: 0px
- Border: 1px solid rgb(255, 255, 255)
- Font: 13px weight 400
- Use: Solid dark CTA
- Hover: transform:
matrix(1, 0, 0, 1, 0, 0)
Dark / Solid
- Background:
#09062f{colors.primary} - Text:
#ffffff{colors.on-primary} - Padding: 10px 25px
- Radius: 0px
- Border: 1px solid rgb(255, 255, 255)
- Font: 17px weight 600
- Use: Solid dark CTA
- Hover: transform:
matrix(1, 0, 0, 1, 0, 0)
Primary Brand
- Background:
#bd0d0d - Text:
#ffffff{colors.on-primary} - Padding: 0px
- Radius: 2px
- Font: 13px weight 400
- Use: Primary CTA / brand action
- Hover: transform:
matrix(1, 0, 0, 1, 0, 0)
Dark / Solid
- Background:
#09062f{colors.primary} - Text:
#ffffff{colors.on-primary} - Padding: 15px
- Radius: 0px
- Border: 2px solid rgb(255, 255, 255)
- Font: 18px weight 400
- Use: Solid dark CTA
- Hover: transform:
matrix(1, 0, 0, 1, 0, 0)
Inputs & Forms
Text Input
- Background:
#f8f8f8 - Text:
#858585{colors.hairline} - Padding: 4.8px 20px
- Radius: 0px
- Border: 1px solid rgb(218, 218, 218)
- Font: 14px weight 400
- Use: Text fields, search inputs
Navigation
Main Nav
- Background:
transparent - Padding: 50px 30px
- Radius: none
- Font: 25px weight 400
- Use: Static block nav — N/A items
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
35 points de rupture lus dans le CSS live
À faire / À éviter
20 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page