Analyse du design system

la-pizzeria-franceschini-restaurant-angers.fr

la-pizzeria-franceschini-restaurant-angers.fr is built on a warm, off-white canvas (rgb(255, 255, 243)). The system uses rgb(9, 79, 39) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Cinzel as the primary typeface. Cinzel is paired with Lato for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 33 keyframe animations plus transition-driven interactions.

Accent #094f27 · police principale Helvetica Neue

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.la-pizzeria-franceschini-restaurant-angers.fr ·extrait le 2026-07-22 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

la-pizzeria-franceschini-restaurant-angers.fr desktop

Mobile

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

20 couleurs mesurées · clique une pastille pour copier

Canvas

#fffff3

AAA 12.54:1

Ink

#333333

AAA 12.54:1

Accent

#094f27

AAA 9.66:1

Line

#333333

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

20 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl60px · 400

display lg

display-lg47px · 400 · ×1.28

body

body13px · 400 · ×3.62

body sm

body-sm25px · 700 · ×0.52

caption

caption45px · 400 · ×0.56

button

button14px · 700 · ×3.21

mono

mono14px · 400 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 3px

sm · 6px

md · 10px

base · 15px

lg · 25px

xl · 30px

2xl · 44px

3xl · 57px

Arrondis

none
0px

xs
4px

sm
14px

md
22px

lg
30px

xl
32px

full
9999px

Motion — courbes, transitions & keyframes réels

3 courbes d’easing · 33 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1linear

transition-2cubic-bezier(0.5, 0, 0, 1)

transition-3ease-in-out

33 animations keyframes extraites

progress-bar-stripes

spin1

spin2

colorchange

showSweetAlert

hideSweetAlert

slideFromTop

slideToTop

slideFromBottom

slideToBottom

animateSuccessTip

animateSuccessLong

Composants — le vocabulaire fermé

9 familles de composants · 36 variantes comptées sur le DOM live

Composant	Variantes
links	×8
heading H3	×7
eyebrow Labels	×6
cards	×5
heading H2	×3
rating Display	×3
buttons	×2
inputs	×1
badges	×1

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

Buttons

Ghost

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 2px 6px 0px
Radius: 0px
Font: 14px weight 700
Use: Subtle action, toolbar, nav button
Hover: color: #2d2d2d, backgroundColor: #f3f3f3, borderColor: #2d2d2d

Outline

Background: transparent
Text: #094f27 {colors.primary}
Padding: 11px 25px
Radius: 0px
Border: 2px solid rgb(9, 79, 39)
Font: 14px weight 400
Use: Secondary action with border
Hover: color: #2d2d2d, backgroundColor: #f3f3f3, borderColor: #2d2d2d

Secondary

Background: #094f27 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 11px 25px
Radius: 0px
Border: 2px solid rgb(9, 79, 39)
Font: 14px weight 400
Use: Secondary action
Hover: color: #2d2d2d, backgroundColor: #f3f3f3, borderColor: #2d2d2d

Light / Invert

Background: #ffffff {colors.on-primary}
Text: #094f27 {colors.primary}
Padding: 10px
Radius: 14px
Font: 16px weight 400
Use: Bright CTA on dark sections
Hover: color: #2d2d2d, backgroundColor: #f3f3f3, borderColor: #2d2d2d

Cards & Containers

Standard Card

Background: #094f27 {colors.primary}
Padding: 25px 30px 15px
Radius: 20px 20px 0px 0px
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #333333 {colors.hairline}
Padding: 1px 2px 1px 5px
Radius: 0px
Border: 0px none rgb(51, 51, 51)
Font: 14px 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 Padding24px

Responsive — vrais breakpoints

29 points de rupture lus dans le CSS live

25px

31px

36px

41px

77px

379px

400px

440px

467px

480px

500px

502px

540px

601px

640px

700px

767px

768px

769px

845px

900px

991px

992px

1020px

1106px

1199px

1200px

1319px

1320px

À faire / À éviter

16 règles applicables, verbatim de la spec

À faire

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

Use Charcoal (`#333333`) for text — not pure black, it's warmer and more readable

Use Helvetica Neue as the primary typeface — it defines the brand personality

Use Teal (`#094f27`) as the primary accent — it's the brand's signature interactive color

Apply 25px 30px 15px padding inside cards — matches the design system's content breathing room

Use 20px 20px 0px 0px border-radius on cards — consistent with the grid card corners

Transition button background to Off-White (`#f3f3f3`) on hover — this is the extracted interactive state

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

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

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

À éviter

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

Don't use pure black (`#000000`) for text — the near-black adds warmth

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 over-build the footer — this design keeps it minimal (2 cols, 2 links)

Guide agent & export

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

Construis une UI dans le design system de la-pizzeria-franceschini-restaurant-angers.fr. Fond #fffff3 · encre #333333 · accent #094f27. Typo : Helvetica Neue — 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 la-pizzeria-franceschini-restaurant-angers

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