Analyse du design system

duotraiteuramiens.fr

duotraiteuramiens.fr is built on a soft, near-white canvas (rgb(250, 251, 252)). The system uses rgb(175, 47, 130) 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. A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 66 keyframe animations plus transition-driven interactions.

Accent #af2f82 · 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://duotraiteuramiens.fr/ ·extrait le 2026-08-18 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

28 couleurs mesurées · clique une pastille pour copier

Canvas

#fafbfc

AAA 8.14:1

Ink

#3a4f66

AAA 8.14:1

Accent

#af2f82

AA 5.71:1

Line

#24292e

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

28 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl48px · 700

display lg

display-lg46px · 700 · ×1.04

display md

display-md43px · 700 · ×1.07

headline

headline39px · 700 · ×1.10

body

body16px · 400 · ×2.44

body sm

body-sm25px · 700 · ×0.64

caption

caption36px · 400 · ×0.69

button

button22px · 400 · ×1.64

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 · 25px

xl · 70px

2xl · 80px

3xl · 90px

Arrondis

none
0px

xs
3px

sm
6px

md
50px

lg
9999px

xl
10007px

full
9999px

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

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

shadow-1

shadow-2

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-2cubic-bezier(0.455, 0.03, 0.515, 0.955)

transition-3ease-in-out

66 animations keyframes extraites

spin

blink

cmplz-fadein

eicon-spin

swiper-preloader-spin

shake

bounce-in

move-in

move-out

fa-spin

mc_slideIn

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
nav Links	×6
testimonial	×6
heading H3	×6
buttons	×4
divider	×4
tabs	×2
footer Links	×2
eyebrow Labels	×2
badges	×1
heading H1	×1
heading H2	×1
heading H5	×1

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

Buttons

Pill

Background: transparent
Text: #af2f82 {colors.primary}
Padding: 12px 24px
Radius: 50px
Border: 2px solid rgb(175, 47, 130)
Font: 13px weight 600
Use: Status pills, tags, chips

Primary Brand

Background: #af2f82 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 12px 24px
Radius: 3px
Font: 22px weight 400
Use: Primary CTA / brand action

Secondary

Background: #24292e {colors.hairline}
Text: #ffffff {colors.on-primary}
Padding: 10px 20px
Radius: 0px
Font: 16px weight 400
Use: Secondary action

Tabs

Ghost Tab

Background: transparent
Text: #3a4f66 {colors.ink-muted}
Padding: 15px
Radius: 0px
Font: 16px weight 700
Use: Navigation tabs, filter tabs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Widthmin(100%, calc(90vw - 0px * 2))

header Height120px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

21 points de rupture lus dans le CSS live

350px

425px

479px

480px

599px

600px

601px

689px

690px

767px

768px

781px

782px

783px

999px

1000px

1023px

1024px

1025px

1439px

1440px

À faire / À éviter

13 règles applicables, verbatim de la spec

À faire

Use Off-White (`#fafbfc`) as the page background — it's intentionally not pure white

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

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

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

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

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

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

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

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

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

Guide agent & export

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

Construis une UI dans le design system de duotraiteuramiens.fr. Fond #fafbfc · encre #3a4f66 · accent #af2f82. 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 duotraiteuramiens

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