Analyse du design system

restaurant-mifan.fr

restaurant-mifan.fr is built on a soft, near-white canvas (rgb(238, 234, 227)). The system uses rgb(181, 134, 77) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Nexa as the primary typeface. Nexa is paired with Glacial Indifference for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 169 keyframe animations plus transition-driven interactions.

Accent #b5864d · police principale Josefin Sans

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.restaurant-mifan.fr/ ·extrait le 2026-07-15 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

7 couleurs mesurées · clique une pastille pour copier

Canvas

#eeeae3

Fail 1.2:1

Ink

#ffffff

Fail 1.2:1

Accent

#b5864d

Fail 2.7:1

Line

#3f444b

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

7 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl48px · 700

body

body19px · 300 · ×2.53

caption

caption25px · 300 · ×0.76

button

button18px · 300 · ×1.39

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 15px

sm · 16px

md · 25px

base · 29px

lg · 115px

xl · 123px

2xl · 131px

3xl · 139px

Arrondis

none
0px

xs
4px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-4ease-out

169 animations keyframes extraites

sbr-sk-scaleout

spin

blink

swiper-preloader-spin

qi-addons-for-elementor-fade-in

qi-addons-for-elementor-fade-out

qodef-animate-underline-from-left

qodef-animate-underline-from-right

qodef-animate-underline-multiline

qodef-animate-highlight

qodef-qi-animate-underline-multiline-thick

qode-move-horizontal-normal-text-marquee

Composants — le vocabulaire fermé

6 familles de composants · 35 variantes comptées sur le DOM live

Composant	Variantes
nav Links	×10
links	×10
badges	×4
footer Links	×4
heading H2	×4
buttons	×3

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

Buttons

Subtle

Background: rgba(250, 240, 219, 0.88) {colors.primary-focus}
Text: #081929
Padding: 9px 12px 6px
Radius: 0px
Border: 1px solid rgba(181, 134, 77, 0)
Font: 18px weight 300
Use: Quiet action against page bg
Hover: backgroundColor: transparent, color: #faf0db, border: 1px solid rgb(250, 240, 219)
Focus: backgroundColor: rgba(8, 25, 41, 0), color: rgb(250, 240, 219), border: 1px solid rgb(250, 240, 219)
Active: transform: matrix(0.988759, 0, 0, 0.988759, 0, 0)

Subtle

Background: rgba(250, 240, 219, 0.88) {colors.primary-focus}
Text: #081929
Padding: 9px 12px 6px
Radius: 0px
Font: 18px weight 300
Use: Quiet action against page bg
Hover: backgroundColor: transparent, color: #faf0db, border: 1px solid rgb(250, 240, 219)
Focus: backgroundColor: rgba(8, 25, 41, 0), color: rgb(250, 240, 219), border: 1px solid rgb(250, 240, 219)
Active: transform: matrix(0.988759, 0, 0, 0.988759, 0, 0)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height90px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

30 points de rupture lus dans le CSS live

320px

450px

479px

480px

481px

640px

680px

681px

767px

768px

769px

1024px

1025px

1150px

1200px

1201px

1270px

1280px

1300px

1330px

1366px

1367px

1399px

1400px

1440px

1441px

1500px

1520px

1590px

1680px

À faire / À éviter

15 règles applicables, verbatim de la spec

À faire

Use Warm Cream (`#eeeae3`) as the page background — it's intentionally not pure white

Use Josefin Sans as the primary typeface — it defines the brand personality

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

Transition button background to Transparent (`transparent`) on hover — this is the extracted interactive state

Respect the 15px–123px 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

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

Repeat the primary CTA across 5 banner sections — conversion paths are layered, not single

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

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 use opacity or brightness filter for button hover — the design uses an explicit background color change

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)

Guide agent & export

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

Construis une UI dans le design system de restaurant-mifan.fr. Fond #eeeae3 · encre #ffffff · accent #b5864d. Typo : Josefin Sans — 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 restaurant-mifan

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