Analyse du design system

evasion-restaurant.fr

evasion-restaurant.fr is built on a near-black canvas (rgb(17, 20, 36)). The system uses rgb(239, 167, 101) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Yeseva One as the primary typeface. 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 — 72 keyframe animations plus transition-driven interactions.

Accent #efa765 · police principale Varela Round

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://www.evasion-restaurant.fr ·extrait le 2026-07-25 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

10 couleurs mesurées · clique une pastille pour copier

Canvas

#111424

AAA 13.84:1

Ink

#e0e0e0

AAA 13.84:1

Accent

#efa765

AAA 9.04:1

Line

#000000

Fail 1.15:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

10 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl80px · 400

display md

display-md34px · 400 · ×2.35

body

body13px · 400 · ×2.62

button

button24px · 400 · ×0.54

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 10px

sm · 12px

md · 20px

base · 25px

lg · 35px

xl · 40px

2xl · 50px

3xl · 70px

Arrondis

none
0px

xs
2px

sm
8px

md
14px

lg
20px

xl
32px

full
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

shadow-1

shadow-2

Motion — courbes, transitions & keyframes réels

1 courbe d’easing · 72 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1linear

72 animations keyframes extraites

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

Composants — le vocabulaire fermé

10 familles de composants · 33 variantes comptées sur le DOM live

Composant	Variantes
links	×9
nav Links	×7
heading H2	×4
footer Links	×3
heading H3	×3
buttons	×2
badges	×2
cards	×1
status Badge	×1
heading H1	×1

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

Buttons

Primary Brand

Background: #efa765 {colors.primary}
Text: #ffffff
Padding: 12px
Radius: 2px
Font: 24px weight 400
Use: Primary CTA / brand action

Outline

Background: transparent
Text: #efa765 {colors.primary}
Padding: 18px 28px
Radius: 0px
Border: 1px solid rgb(239, 167, 101)
Font: 13px weight 400
Use: Secondary action with border

Ghost

Background: transparent
Text: #3a3a3a
Padding: 14.4px
Radius: 0px
Font: 24px weight 400
Use: Subtle action, toolbar, nav button

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height110px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

21 points de rupture lus dans le CSS live

420px

421px

479px

480px

543px

544px

600px

767px

768px

769px

782px

921px

922px

992px

993px

1024px

1025px

1200px

1201px

1439px

1440px

À faire / À éviter

18 règles applicables, verbatim de la spec

À faire

Use dark background (`#111424`) as the foundation — this is a dark-mode-native design

Use Varela Round as the primary typeface — it defines the brand personality

Keep font weights between 400-400 — the system uses a narrow weight range for subtle hierarchy (CSS declares up to 600, but the heaviest weight actually painted is 400)

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

Use Tangerine (`#efa765`) as the primary accent — it's the brand's signature interactive color

Maintain nav height at 110px — consistent vertical space for the navigation bar

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

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card uses an icon (not photo) — the visual language is illustrative, not photographic

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

À éviter

Don't use light backgrounds — the dark canvas is the native medium

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

Don't reach for weight 700 (bold) or above — 400 is the heaviest weight this design paints

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 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

Guide agent & export

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

Construis une UI dans le design system de evasion-restaurant.fr. Fond #111424 · encre #e0e0e0 · accent #efa765. Typo : Varela Round — 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 evasion-restaurant

DESIGN.md · narrative spec tokens.json