Analyse du design system

madame-moustache.fr

madame-moustache.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(173, 135, 98) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Pacifico 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 — 174 keyframe animations plus transition-driven interactions.

Accent #ad8762 · police principale Anek Bangla

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.madame-moustache.fr ·extrait le 2026-07-17 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

9 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#ad8762

AA·lg 3.27: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.

9 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl50px · 300

display lg

display-lg50px · 300 · ×1.00

body

body14px · 400 · ×3.57

body sm

body-sm16px · 800 · ×0.88

button

button22px · 500 · ×0.73

mono

mono14px · 400 · ×1.57

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 6px

sm · 10px

md · 12px

base · 14px

lg · 27px

xl · 54px

2xl · 60px

3xl · 80px

Arrondis

none
0px

xs
4px

sm
7px

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 · 174 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1ease-in-out

174 animations keyframes extraites

spin

blink

fadeIn

fadeOut

slideInUp

slideOutDown

slideInDown

slideOutUp

bounce

flash

pulse

rubberBand

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
nav Links	×5
divider	×4
buttons	×2
footer Links	×2
cards	×1
status Badge	×1
heading H2	×1

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

Buttons

Secondary

Background: #ad8762 {colors.primary}
Text: #ffffff {colors.surface-1}
Padding: 6.6px 22px
Radius: 20px
Font: 22px weight 500
Use: Secondary action
Focus: outline: rgb(16, 16, 16) auto 5px, textDecoration: underline

Inputs & Forms

Text Input

Background: transparent
Text: #333333 {colors.hairline}
Padding: 6px 12px
Radius: 4px
Border: 0px none rgb(51, 51, 51)
Shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset
Font: 14px weight 400
Use: Text fields, search inputs
Focus: borderColor: rgb(102, 175, 233), boxShadow: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset, rgba(102, 175, 2

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height84px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

25 points de rupture lus dans le CSS live

38px

44px

56px

59px

390px

479px

480px

500px

673px

767px

768px

800px

900px

980px

981px

991px

992px

1040px

1100px

1110px

1168px

1199px

1200px

1218px

1350px

À faire / À éviter

16 règles applicables, verbatim de la spec

À faire

Use Anek Bangla as the primary typeface — it defines the brand personality

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 Honey (`#ad8762`) as the primary accent — it's the brand's signature interactive color

Use 20px border-radius on primary buttons — the brand uses generously-rounded CTAs

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

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

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

À é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 — 400 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 use sharp-cornered or pill buttons — 20px is the CTA border-radius standard

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

Guide agent & export

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

Construis une UI dans le design system de madame-moustache.fr. Fond #ffffff · encre #111111 · accent #ad8762. Typo : Anek Bangla — 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 madame-moustache

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