pasinohotellehavre.com
pasinohotellehavre.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(137, 110, 41) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside poppins-light as the primary typeface. Poppins-light is paired with poppins-bold for secondary roles. A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 25 keyframe animations plus transition-driven interactions.
Accent #896e29 · police principale poppins-light
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
4 rôles sémantiques trouvés.
22 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
6 rôles · rendu live dans la vraie poppins-light (woff2 capturé) · lignes éditables, clique une spec pour copier
Espacements & arrondis, rendus spatiaux
9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes
0px
3.024px
8px
30px
100px
108px
9999px
Profondeur — l’élévation est extraite, pas inventée
6 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 · 25 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
15 familles de composants · 53 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| nav Links | ×10 |
| links | ×10 |
| footer Links | ×6 |
| reservation Card | ×5 |
| buttons | ×4 |
| badges | ×4 |
| breadcrumb | ×4 |
| inputs | ×2 |
| logo Tile | ×2 |
| cards | ×1 |
| tabs | ×1 |
| cta Banner | ×1 |
| heading H1 | ×1 |
| date Picker | ×1 |
| price Tag | ×1 |
Specs de style des composants (§4)déplier
Buttons
Pill
- Background:
#896e29{colors.primary} - Text:
#ffffff{colors.background} - Padding: 10px 25px
- Radius: 30px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 15px weight 400
- Use: Status pills, tags, chips
Primary Brand
- Background:
#896e29{colors.primary} - Text:
#ffffff{colors.background} - Padding: 10px 25px
- Radius: 0px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 15px weight 400
- Use: Primary CTA / brand action
Cards & Containers
Standard Card
- Background:
transparent - Padding: 13px 0px 0px
- Radius: 0px
- Use: Content containers, listing items
Inputs & Forms
Text Input
- Background:
transparent - Text:
#515358 - Padding: 1px 2px 1px 0px
- Radius: 0px
- Border: 0px none rgb(81, 83, 88)
- Font: 15px weight 400
- Use: Text fields, search inputs
- Focus: outline:
rgb(81, 83, 88) none 0px
Navigation
Main Nav
- Background:
#ffffff{colors.background} - Padding: 12px 0px 0px
- Radius: none
- Shadow:
rgba(0, 0, 0, 0.1) 0px 2px 6px 0px - Font: 15px weight 300
- Use: Fixed/sticky block nav — N/A items
- Hover: color:
#896e29, border:0px none rgb(137, 110, 41), borderColor:#896e29
CTA Banners
Full-width CTA
- Background:
transparent - Text:
#413b3a{colors.hairline} - Padding: 0px 0px 0px 30px
- Radius: 0px
- Font: 15px weight 300
- Use: Full-width conversion strip with headline + button
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
21 points de rupture lus dans le CSS live
À faire / À éviter
16 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page