Analyse du design system

planetpizz.fr

planetpizz.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(224, 43, 32) as the high-saturation accent for primary actions. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside wendy-one as the primary typeface. A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 21 keyframe animations plus transition-driven interactions.

Accent #e02b20 · police principale open-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://planetpizz.fr ·extrait le 2026-07-25 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

26 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AA 5.74:1

Ink

#666666

AA 5.74:1

Accent

#e02b20

AA 4.63:1

Line

#666666

AA 5.74: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.

26 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl35px · 500

display md

display-md20px · 500 · ×1.75

headline

headline34px · 500 · ×0.59

body

body12px · 400 · ×2.83

body sm

body-sm16px · 600 · ×0.75

button

button20px · 600 · ×0.80

mono

mono13.3333px · 400 · ×1.50

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 4px

sm · 8px

md · 10px

base · 15px

lg · 24px

xl · 28px

2xl · 52px

3xl · 72px

Arrondis

none
0px

xs
4px

sm
6px

md
11px

lg
20px

xl
47px

full
9999px

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

6 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

2 courbes d’easing · 21 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1ease-in-out

transition-4linear

21 animations keyframes extraites

spin

wobble-hor-bottom

fa-spin

multi-view-image-fade

fadeBottom

fadeLeft

fadeRight

fadeTop

fadeIn

fadeOutTop

fadeInTop

fadeInBottom

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
buttons	×9
nav Links	×3
heading H4	×3
footer Links	×2
heading H5	×2
cards	×1
badges	×1
status Badge	×1
heading H1	×1
heading H2	×1
heading H3	×1
divider	×1

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

Buttons

Outline

Background: transparent
Text: #d0d0d0
Padding: 8px 28px 8px 14px
Radius: 2px
Border: 2px solid rgb(208, 208, 208)
Font: 14px weight 500
Use: Secondary action with border

Primary Brand

Background: #e02b20 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 6px 24px 6px 34px
Radius: 4px
Font: 16px weight 900
Use: Primary CTA / brand action

Outline

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 4px 35px
Radius: 3px
Border: 2px solid rgb(255, 255, 255)
Font: 35px weight 500
Use: Secondary action with border

Outline

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 4px 48px
Radius: 3px
Border: 2px solid rgb(255, 255, 255)
Font: 35px weight 500
Use: Secondary action with border

Outline

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 4px 47px
Radius: 3px
Border: 2px solid rgb(255, 255, 255)
Font: 35px weight 500
Use: Secondary action with border

Primary Brand

Background: #e02b20 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 6px 20px
Radius: 5px
Font: 20px weight 600
Use: Primary CTA / brand action

Primary Brand

Background: #e02b20 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 4.8px 16px
Radius: 5px
Font: 16px weight 600

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height80px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

29 points de rupture lus dans le CSS live

38px

44px

56px

59px

352px

380px

400px

410px

425px

479px

480px

540px

550px

576px

600px

620px

640px

673px

767px

768px

980px

981px

992px

1040px

1110px

1120px

1168px

1218px

1350px

À faire / À éviter

17 règles applicables, verbatim de la spec

À faire

Use open-sans as the primary typeface — it defines the brand personality

Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy

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

Use M Tricolor Red (`#e02b20`) as the primary accent — it's the brand's signature interactive color

Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes

Style form inputs with a `2px solid rgb(199, 212, 219)` border — use border-based inputs, not floating labels or underline-only

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

À éviter

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

Don't reach for weight 700 (bold) or above — 500 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 over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

Don't remove the input border — the border is the primary affordance indicator for form fields

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

Don't over-build the footer — this design keeps it minimal (1 cols, 3 links)

Guide agent & export

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

Construis une UI dans le design system de planetpizz.fr. Fond #ffffff · encre #666666 · accent #e02b20. Typo : open-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 planetpizz

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