Analyse du design system

lepeuplier.fr

lepeuplier.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(253, 196, 20) as the high-saturation accent for primary actions. Moderately rounded CTAs (10px) — modern SaaS standard, neither sharp nor pill alongside studiofeixen as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 175 keyframe animations plus transition-driven interactions.

Accent #fdc414 · police principale Raleway

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.

http://lepeuplier.fr/ ·extrait le 2026-08-20 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

17 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#fdc414

Fail 1.61:1

Line

#333333

AAA 12.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.

17 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl42px · 500

display md

display-md20px · 500 · ×2.10

body

body12px · 500 · ×1.67

body sm

body-sm14px · 500 · ×0.86

button

button18px · 500 · ×0.78

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 8px

sm · 10px

md · 14px

base · 15px

lg · 27px

xl · 54px

2xl · 150px

3xl · 158px

Arrondis

none
0px

xs
3px

sm
10px

md
20px

lg
28px

xl
32px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1ease-in-out

175 animations keyframes extraites

wc-skeleton-shimmer

fadeInRightShort

fadeInLeftShort

evo_blinking_red

initloader

preload_anim

pinupdown

evoloader_2

evo_loader_ring

evo_trun360

evoanim_001

fontbulger

Composants — le vocabulaire fermé

12 familles de composants · 33 variantes comptées sur le DOM live

Composant	Variantes
links	×10
nav Links	×6
divider	×4
buttons	×3
heading H2	×2
heading H3	×2
cards	×1
badges	×1
status Badge	×1
footer Links	×1
heading H1	×1
tooltip	×1

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

Buttons

Secondary

Background: #97c779
Text: #ffffff {colors.background}
Padding: 15px 12px
Radius: 10px
Border: 2px solid rgb(151, 199, 121)
Font: 12px weight 500
Use: Secondary action

Outline

Background: transparent
Text: #ffffff {colors.background}
Padding: 15px 18px
Radius: 0px
Border: 2px solid rgb(255, 255, 255)
Font: 18px weight 500
Use: Secondary action with border

Primary Brand

Background: #fdc414 {colors.primary}
Text: #1b4a53 {colors.primary-hover}
Padding: 15px 18px
Radius: 10px
Border: 2px solid rgb(253, 196, 20)
Font: 18px weight 500
Use: Primary CTA / brand action

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height106px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

25 points de rupture lus dans le CSS live

320px

420px

479px

480px

481px

500px

568px

569px

600px

640px

650px

680px

734px

735px

767px

768px

782px

800px

900px

980px

981px

1024px

1068px

1168px

1350px

À faire / À éviter

14 règles applicables, verbatim de la spec

À faire

Use Raleway as the primary typeface — it defines the brand personality

The system uses a single text weight (500) — hierarchy comes from size and color, not weight

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

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

Use 10px border-radius on buttons — the standard corner rounding for interactive elements

Maintain nav height at 76px — 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 introduce bolder or lighter weights — 500 is the only weight in this system

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 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 lepeuplier.fr. Fond #ffffff · encre #111111 · accent #fdc414. Typo : Raleway — 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 lepeuplier

Repeindre ce design · éditeur live DESIGN.md · liste d'attente gratuite tokens.json · liste d'attente gratuite