Analyse du design system

lesterrassesduz5.fr

lesterrassesduz5.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(131, 86, 45) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Playfair Display as the primary typeface. Playfair Display is paired with themify for secondary roles. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 35 keyframe animations plus transition-driven interactions.

Accent #83562d · police principale Playfair Display

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.

https://lesterrassesduz5.fr ·extrait le 2026-08-07 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

24 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 7.46:1

Ink

#555555

AAA 7.46:1

Accent

#83562d

AA 6.3:1

Line

#555555

AAA 7.46:1

États sémantiques

error#cc1818

1 rôle sémantique trouvé.

24 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

6 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl70px · 400

display lg

display-lg69px · 400 · ×1.01

body

body12px · 600 · ×5.75

body sm

body-sm22px · 400 · ×0.55

caption

caption15px · 400 · ×1.47

button

button48px · 400 · ×0.31

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 8px

sm · 10px

md · 15px

base · 20px

lg · 30px

xl · 35px

2xl · 50px

3xl · 55px

Arrondis

none
0px

xs
4px

sm
5px

md
34px

lg
42px

xl
50px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

4 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

shadow-2

shadow-3

shadow-4

Motion — courbes, transitions & keyframes réels

2 courbes d’easing · 35 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-2cubic-bezier(0.645, 0.045, 0.355, 1)

transition-3linear

35 animations keyframes extraites

fa-spin

bapf_loader

sbi-sk-scaleout

wc-skeleton-shimmer

blowUpContent

blowUpContentTwo

blowUpModal

blowUpModalTwo

tp-rotateplane

tp-fade-in

tp-rotate

spin

Composants — le vocabulaire fermé

7 familles de composants · 28 variantes comptées sur le DOM live

Composant	Variantes
links	×10
buttons	×5
badges	×5
nav Links	×3
heading H1	×3
cards	×1
divider	×1

Specs de style des composants (§4)déplier

Cards & Containers

Standard Card

Background: transparent
Padding: 35px 0px 50px
Radius: 0px
Use: Content containers, listing items

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

39 points de rupture lus dans le CSS live

24px

38px

40px

44px

56px

59px

320px

360px

380px

400px

479px

480px

576px

600px

601px

640px

667px

673px

767px

768px

782px

800px

801px

960px

961px

981px

985px

992px

1024px

1025px

1040px

1099px

1100px

1110px

1168px

1218px

1430px

1720px

2200px

À faire / À éviter

13 règles applicables, verbatim de la spec

À faire

Use Playfair Display as the primary typeface — it defines the brand personality

The system uses a single text weight (400) — hierarchy comes from size and color, not weight

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use Chocolate (`#83562d`) as the primary accent — it's the brand's signature interactive color

Apply 35px 0px 50px padding inside cards — matches the design system's content breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Each card includes a top image — imagery is part of the card identity, not optional

Use a 4-column grid on desktop — density matters for this content type

À éviter

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't introduce bolder or lighter weights — 400 is the only weight in this system

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't over-build the footer — this design keeps it minimal (2 cols, 4 links)

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de lesterrassesduz5.fr. Fond #ffffff · encre #555555 · accent #83562d. Typo : Playfair Display — 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.

$ npx prism-design add lesterrassesduz5

Repeindre ce design · éditeur live DESIGN.md · narrative spec tokens.json