Analyse du design system

restaurantgric.fr

restaurantgric.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(226, 181, 101) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside monospace typography (Courier Prime) — developer-first identity. A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 69 keyframe animations plus transition-driven interactions.

Accent #e2b565 · police principale Lato

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.restaurantgric.fr/ ·extrait le 2026-08-18 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

19 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#e2b565

Fail 1.9:1

Line

#4e4e4e

AAA 8.32: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.

19 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-xl26px · 700

body

body14px · 600 · ×1.86

body sm

body-sm20px · 300 · ×0.70

caption

caption20px · 400 · ×1.00

button

button52px · 300 · ×0.38

mono

mono17px · 400 · ×3.06

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 10px

md · 12px

base · 27px

lg · 30px

xl · 32px

2xl · 59px

3xl · 90px

Arrondis

none
0px

xs
5px

sm
20px

md
28px

lg
36px

xl
44px

full
9999px

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

5 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

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

Courbes & transitions

transition-1ease-in-out

69 animations keyframes extraites

cf7ic-load

rotate-forever

spinner-loader

spin

blink

ellipsis

fadeInLeft

fadeOutRight

fadeOutLeft

fadeInRight

multi-view-image-fade

fadeBottom

Composants — le vocabulaire fermé

8 familles de composants · 32 variantes comptées sur le DOM live

Composant	Variantes
nav Links	×10
links	×10
footer Links	×4
buttons	×3
badges	×2
cards	×1
status Badge	×1
heading H2	×1

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

Buttons

Ghost

Background: transparent
Text: #000000
Padding: 27px 0px
Radius: 0px
Font: 20px weight 500
Use: Subtle action, toolbar, nav button

Outline

Background: transparent
Text: #e2b565 {colors.primary}
Padding: 5.1px 17px
Radius: 0px
Border: 1px solid rgb(226, 181, 101)
Font: 17px weight 500
Use: Secondary action with border

Inputs & Forms

Text Input

Background: #f4f1e9 {colors.surface-1}
Text: #000000
Padding: 12px 10px
Radius: 0px
Border: 0px none rgb(0, 0, 0)
Font: 17px weight 400
Use: Text fields, search inputs
Focus: color: rgb(62, 62, 62), borderColor: rgb(45, 57, 64), outline: rgb(62, 62, 62)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height144px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

21 points de rupture lus dans le CSS live

380px

479px

480px

500px

680px

767px

768px

769px

782px

800px

900px

980px

981px

991px

1024px

1100px

1101px

1240px

1241px

1350px

1405px

À faire / À éviter

12 règles applicables, verbatim de la spec

À faire

Use Lato as the primary typeface — it defines the brand personality

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

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

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

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

Use a 3-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 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 over-build the footer — this design keeps it minimal (1 cols, 8 links)

Guide agent & export

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

Construis une UI dans le design system de restaurantgric.fr. Fond #ffffff · encre #111111 · accent #e2b565. Typo : Lato — 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 restaurantgric

Repeindre ce design · éditeur live DESIGN.md · liste d'attente gratuite tokens.json · liste d'attente gratuite