cravanparis.com
cravanparis.com is built on a warm, off-white canvas (rgb(248, 248, 243)). The system uses rgb(200, 16, 46) as the high-saturation accent for primary actions. Generously rounded CTAs (70px) suggest approachable, content-first design alongside Pitch Regular as the primary typeface. Pitch Regular is paired with Pitch Bold for secondary roles. 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 — 41 keyframe animations plus transition-driven interactions.
Accent #c8102e · police principale Pitch Regular
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
16 couleurs mesurées · clique une pastille pour copier
4 rôles sémantiques trouvés.
16 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
5 rôles · rendu live dans la vraie Pitch Regular (woff2 capturé) · lignes éditables, clique une spec pour copier
Espacements & arrondis, rendus spatiaux
9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes
0px
3px
8px
16px
24px
25px
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 · 41 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
12 familles de composants · 46 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| nav Links | ×10 |
| links | ×10 |
| cta Banner | ×6 |
| buttons | ×5 |
| footer Links | ×4 |
| heading H2 | ×3 |
| eyebrow Labels | ×2 |
| reservation Card | ×2 |
| inputs | ×1 |
| badges | ×1 |
| heading H1 | ×1 |
| accordion | ×1 |
Specs de style des composants (§4)déplier
Buttons
Pill
- Background:
#c8102e{colors.primary} - Text:
#f8f8f3{colors.background} - Padding: 12px 25px
- Radius: 70px
- Border: 1px solid rgb(200, 16, 46)
- Font: 16px weight 400
- Use: Status pills, tags, chips
Pill
- Background:
#f8f8f3{colors.background} - Text:
#1d1e1a{colors.ink-muted} - Padding: 12px 25px
- Radius: 70px
- Border: 1px solid rgb(248, 248, 243)
- Font: 16px weight 400
- Use: Status pills, tags, chips
Primary Brand
- Background:
#c8102e{colors.primary} - Text:
#ffffff{colors.on-primary} - Padding: 0px
- Radius: 24px
- Font: 16px weight 700
- Use: Primary CTA / brand action
Light / Invert
- Background:
#f8f8f3{colors.background} - Text:
#1d1e1a{colors.ink-muted} - Padding: 15px
- Radius: 12px 12px 0px 0px
- Shadow:
rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px - Font: 16px weight 400
- Use: Bright CTA on dark sections
Inputs & Forms
Text Input
- Background:
transparent - Text:
#000000 - Padding: 0px 0px 0px 16px
- Radius: 8px
- Border: 1px solid rgb(96, 106, 114)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: outline:
rgb(0, 0, 0) auto 2px
CTA Banners
Full-width CTA
- Background:
transparent - Text:
#1d1e1a{colors.ink-muted} - Padding: 0px 15px
- Radius: 0px
- Font: 16px weight 400
- Use: Full-width conversion strip with headline + button
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
28 points de rupture lus dans le CSS live
À faire / À éviter
19 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page