Analyse du design system

capperi.fr

capperi.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(122, 99, 39) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside -apple-system as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 11 keyframe animations plus transition-driven interactions.

Accent #7a6327 · police principale Roboto

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

Desktop · source de vérité

Mobile

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

18 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 10.35:1

Ink

#334155

AAA 10.35:1

Accent

#7a6327

AA 5.77:1

Line

#1e293b

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

18 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

5 rôles · fallback système — aucun woff2 capturé · lignes éditables, clique une spec pour copier

display xl

display-xl36px · 700

display lg

display-lg36px · 700 · ×1.00

body

body13px · 500 · ×2.77

body sm

body-sm13px · 700 · ×1.00

button

button24px · 400 · ×0.54

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 12px

sm · 16px

md · 20px

base · 21px

lg · 32px

xl · 48px

2xl · 52px

3xl · 64px

Arrondis

none
0px

xs
2px

sm
9999px

md
10007px

lg
10015px

xl
10023px

full
9999px

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1linear

11 animations keyframes extraites

turn-on-visibility

turn-off-visibility

lightbox-zoom-in

lightbox-zoom-out

overlay-menu__fade-in-animation

fadein

slidein

spin

spinner__animation

loading__animation

dotPulse

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×6
nav Links	×3
buttons	×1
cards	×1
badges	×1
status Badge	×1
heading H1	×1
heading H2	×1
code Block	×1

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

Buttons

Outline

Background: transparent
Text: #046bd2 {colors.primary-hover}
Padding: 12px
Radius: 2px
Border: 1px solid rgb(4, 107, 210)
Font: 24px weight 400
Use: Secondary action with border

Primary Brand

Background: rgba(122, 99, 39, 0.7) {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 15px 30px
Radius: 0px
Font: 13px weight 500
Use: Primary CTA / brand action

Code Blocks

Inline Code / Pre

Background: #eceff3
Text: #334155 {colors.ink-muted}
Padding: 20.8px
Radius: 0px
Font: 13px weight 400 — "Courier 10 Pitch"
Use: Code samples, CLI commands, syntax highlighting blocks

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height113px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

21 points de rupture lus dans le CSS live

420px

421px

480px

481px

543px

544px

545px

600px

700px

768px

769px

781px

782px

783px

921px

922px

992px

993px

1168px

1200px

1201px

À faire / À éviter

12 règles applicables, verbatim de la spec

À faire

Use Oxygen-Sans as the primary typeface — it defines the brand personality

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Chocolate (`#7a6327`) as the primary accent — it's the brand's signature interactive color

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

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

À éviter

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

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

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

Guide agent & export

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

Construis une UI dans le design system de capperi.fr. Fond #ffffff · encre #334155 · accent #7a6327. Typo : Roboto — 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 capperi

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