haven-annecy.fr is built on a warm, off-white canvas (rgb(255, 250, 247)).
The system uses rgb(193, 100, 59) as the accent for primary actions and brand signals.
PFDINTextPro-BoldItal as the primary typeface.
Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
Interactions are smoothed by transitions across many elements, with little or no keyframe animation.
Accent #c1643b · police principale din-2014
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.
2 courbes d’easing · 3 keyframes · survole une tuile pour prévisualiser
Courbes & transitions
transition-4ease-in-out
transition-5cubic-bezier(0.2, 0.8, 0.2, 1)
3 animations keyframes extraites
writeLetter
fillLetter
drawSVG
06
Composants — le vocabulaire fermé
6 familles de composants · 27 variantes comptées sur le DOM live
Composant
Variantes
links
×10
nav Links
×7
footer Links
×4
heading H2
×4
cards
×1
heading H1
×1
07
Mise en page — structure & dimensions
5 métriques de layout mesurées
max Width1200px
header Height112px
sidebar Width0px
gap16px
container Padding0px
08
Responsive — vrais breakpoints
18 points de rupture lus dans le CSS live
479px
480px
639px
640px
767px
768px
959px
960px
1079px
1080px
1279px
1280px
1359px
1360px
1479px
1480px
1679px
1680px
09
À faire / À éviter
15 règles applicables, verbatim de la spec
À faire
Use Off-White (`#fffaf7`) as the page background — it's intentionally not pure white
Use Texts (`#2b1a12`) for text — not pure black, it's warmer and more readable
Use din-2014 as the primary typeface — it defines the brand personality
Use Terracotta (`#c1643b`) as the primary accent — it's the brand's signature interactive color
Maintain nav height at 84.8438px — consistent vertical space for the navigation bar
Respect the 7px–126px spacing range — the design uses a wide scale for visual breathing room
Each card uses an icon (not photo) — the visual language is illustrative, not photographic
À éviter
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't make the nav sticky — this design lets it scroll away to maximize content focus
Don't put a CTA button in the nav — this design uses links only at the top
Don't over-build the footer — this design keeps it minimal (1 cols, 5 links)
10
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page
Construis une UI dans le design system de haven-annecy.fr.
Fond #fffaf7 · encre #2b1a12 · accent #c1643b.
Typo : din-2014 — respecte l’échelle taille/graisse du §3.
Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique).
La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.
Chaque valeur ci-dessus est vérifiée par getComputedStyle.
