Analyse du design system

sushishop.fr

sushishop.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(180, 168, 149) as the singular interactive color. Generously rounded CTAs (44px) suggest approachable, content-first design alongside sofia-pro as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 16 keyframe animations plus transition-driven interactions.

Accent #b4a895 · police principale sofia-pro

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.sushishop.fr/fr/restaurant/metz-st-louis ·extrait le 2026-08-16 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

16 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#b4a895

Fail 2.34:1

Line

#777777

AA·lg 4.48: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.

16 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl34px · 400

body

body16px · 400 · ×2.13

body sm

body-sm14px · 400 · ×1.14

button

button17px · 400 · ×0.82

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 2px

sm · 8px

md · 13px

base · 16px

lg · 24px

xl · 72px

2xl · 86px

3xl · 99px

Arrondis

none
0px

xs
4px

sm
5px

md
24px

lg
30px

xl
37px

full
9999px

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-5ease-in-out

16 animations keyframes extraites

rcTriggerZoomIn

rcTriggerZoomOut

rcTriggerMaskFadeIn

rcDialogFadeOut

mapboxgl-spin

mapboxgl-user-location-dot-pulse

IG-slide-down

IG-slide-up

bannerSlideDown

bannerSlideUp

noticeFadeOut

scrollText

Composants — le vocabulaire fermé

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

Composant	Variantes
buttons	×6
links	×6
footer Links	×5
badges	×3
accordion	×3
eyebrow Labels	×2
inputs	×1
heading H1	×1
heading H2	×1
rating Display	×1

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

Buttons

Pill

Background: #ffffff {colors.background}
Text: #1b1a16
Padding: 13px 10px
Radius: 44px
Font: 15px weight 400
Use: Status pills, tags, chips
Focus: outline: rgb(16, 16, 16) auto 1px

Pill

Background: #b4a895 {colors.primary}
Text: #ffffff {colors.background}
Padding: 10px 32px
Radius: 40px
Border: 1px solid rgb(180, 168, 149)
Font: 17px weight 400
Use: Status pills, tags, chips
Focus: outline: rgb(16, 16, 16) auto 1px

Inputs & Forms

Text Input

Background: transparent
Text: #777777 {colors.hairline}
Padding: 1px 2px
Radius: 0px
Border: 0px none rgb(119, 119, 119)
Font: 17px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

350px

375px

414px

479px

480px

600px

767px

768px

769px

800px

960px

991px

992px

993px

1200px

1280px

1281px

1460px

1600px

1650px

À faire / À éviter

16 règles applicables, verbatim de la spec

À faire

Use sofia-pro 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 negative letter-spacing (-0.96px) at display sizes for compressed, editorial headlines

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

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

Use 44px border-radius on primary buttons — the brand uses generously-rounded CTAs

Respect the 2px–72px spacing range — the design uses a wide scale for visual breathing room

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

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

Include a newsletter signup in the footer — email capture is part of the conversion funnel

À é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 increase letter-spacing on headings — the type is designed to run tight at scale

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 use sharp-cornered or pill buttons — 44px is the CTA border-radius standard

Guide agent & export

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

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

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