Analyse du design system

pierre-gagnaire.com

pierre-gagnaire.com is built on a pure-white canvas (rgb(255, 255, 255)). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Arial as the primary typeface. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 37 keyframe animations plus transition-driven interactions.

Accent #0066ff · police principale object-fit: cover

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.pierre-gagnaire.com/ ·extrait le 2026-07-19 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

22 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AA 4.67:1

Ink

#747474

AA 4.67:1

Accent

#0066ff

AA 4.83:1

Line

#747474

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

22 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

5 rôles · rendu live dans la vraie object-fit: cover (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl27px · 400

body

body15px · 300 · ×1.80

body sm

body-sm25px · 400 · ×0.60

button

button15px · 400 · ×1.67

mono

mono24px · 400 · ×0.63

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 8px

sm · 10px

md · 12px

base · 17px

lg · 20px

xl · 30px

2xl · 40px

3xl · 60px

Arrondis

none
0px

xs
4px

sm
6px

md
12px

lg
34px

xl
42px

full
9999px

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

7 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

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

Courbes & transitions

transition-1cubic-bezier(0.43, 0.01, 0.44, 1)

transition-2cubic-bezier(0.165, 0.84, 0.44, 1)

transition-4cubic-bezier(0.25, 0.46, 0.45, 0.94)

37 animations keyframes extraites

placeholder-shimmer

spin

page-fade-in-up

page-fade-in-up-out

page-slide-reveal-across

page-slide-reveal-across-out

page-slide-reveal-down

page-slide-reveal-down-out

overlay-on

overlay-off

full-overlay-on

full-overlay-off

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
nav Links	×7
buttons	×5
badges	×2
inputs	×1
search Bar	×1
heading H1	×1
heading H2	×1

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

Buttons

Ghost

Background: transparent
Text: #000000
Padding: 20px 30px
Radius: 0px
Font: 15px weight 400
Use: Subtle action, toolbar, nav button
Active: backgroundColor: rgb(242, 242, 242)

Outline

Background: transparent
Text: #ffffff {colors.background}
Padding: 0px 14px
Radius: 2px
Border: 1px solid rgb(255, 255, 255)
Font: 14px weight 400
Use: Secondary action with border
Active: backgroundColor: rgb(242, 242, 242)

Icon Button

Background: #eeeeee {colors.surface-1}
Text: #747474 {colors.hairline}
Padding: 4px 16px
Radius: 0px
Font: 15px weight 300
Use: Toolbar/UI icons
Active: backgroundColor: rgb(242, 242, 242)

Inputs & Forms

Text Input

Background: transparent
Text: #c7c7c7
Padding: 8px 10px
Radius: 0px
Border: 0px none rgb(199, 199, 199)
Font: 24px weight 400
Use: Text fields, search inputs
Active: borderColor: rgb(116, 116, 116)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height60px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

400px

480px

533px

540px

589px

590px

750px

768px

769px

961px

992px

1024px

1025px

1050px

1140px

1200px

1320px

1400px

1500px

1600px

À faire / À éviter

9 règles applicables, verbatim de la spec

À faire

Keep font weights between 300-400 — 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 small 2px radius for buttons — this design system uses subtle rounding, not pill shapes

Include a search input directly in the nav — discoverability is a primary UX value here

À éviter

Don't reach for weight 700 (bold) or above — 400 is the heaviest weight this design paints

Don't invent new shadow values — use only the extracted shadow levels

Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

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, 5 links)

Guide agent & export

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

Construis une UI dans le design system de pierre-gagnaire.com. Fond #ffffff · encre #747474 · accent #0066ff. Typo : object-fit: cover — 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 pierre-gagnaire

DESIGN.md · narrative spec tokens.json