Analyse du design system

la-casiniere.fr

la-casiniere.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(31, 26, 21) as a near-neutral accent (low saturation). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Work Sans as the primary typeface. Work Sans is paired with Roboto for secondary roles. 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 — 83 keyframe animations plus transition-driven interactions.

Accent #1f1a15 · police principale Work Sans

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://la-casiniere.fr/ ·extrait le 2026-07-13 ·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

AA·lg 3.59:1

Ink

#878787

AA·lg 3.59:1

Accent

#1f1a15

AAA 17.26:1

Line

#878787

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

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

display xl

display-xl50px · 700

display md

display-md24px · 600 · ×2.08

headline

headline16px · 600 · ×1.50

body

body15px · 400 · ×1.07

body sm

body-sm20px · 600 · ×0.75

caption

caption17px · 400 · ×1.18

caption sm

caption-sm9px · 400 · ×1.89

button

button13px · 400 · ×0.69

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 9px

md · 12px

base · 18px

lg · 20px

xl · 40px

2xl · 58px

3xl · 79px

Arrondis

none
0px

xs
4px

sm
5px

md
34px

lg
52px

xl
60px

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

Courbes & transitions

transition-1ease-out

transition-2cubic-bezier(0.694, 0.0482, 0.335, 1)

83 animations keyframes extraites

spin

blink

blowUpContent

blowUpContentTwo

blowUpModal

blowUpModalTwo

fa-spin

outer

inner

arc

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×8
nav Links	×5
badges	×4
testimonial	×4
heading H6	×4
heading H5	×3
buttons	×2
footer Links	×2
heading H2	×2
heading H3	×2
price Tag	×2
heading H1	×1

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

Buttons

Ghost

Background: #000000
Text: #ffffff {colors.on-primary}
Padding: 9px 12px
Radius: 0px
Font: 13px weight 400
Use: Subtle action, toolbar, nav button
Focus: backgroundColor: rgb(33, 28, 23), border: 0px solid rgb(45, 44, 44), borderColor: rgb(45, 44, 44)

Secondary

Background: #1f1a15 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 0px 45px
Radius: 0px
Font: 16px weight 600
Use: Secondary action
Focus: backgroundColor: rgb(33, 28, 23), border: 0px solid rgb(45, 44, 44), borderColor: rgb(45, 44, 44)

Secondary

Background: #1f1a15 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 0px 45px
Radius: 0px
Font: 16px weight 600
Use: Secondary action
Focus: backgroundColor: rgb(33, 28, 23), border: 0px solid rgb(45, 44, 44), borderColor: rgb(45, 44, 44)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height100px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

43 points de rupture lus dans le CSS live

320px

350px

420px

479px

480px

500px

567px

576px

600px

601px

680px

681px

736px

767px

768px

769px

783px

800px

801px

900px

985px

991px

992px

1000px

1024px

1025px

1100px

1199px

1200px

1201px

1280px

1281px

1300px

1301px

1366px

1400px

1401px

1440px

1441px

1500px

1600px

1680px

1921px

À faire / À éviter

15 règles applicables, verbatim de la spec

À faire

Use Work Sans as the primary typeface — it defines the brand personality

Use negative letter-spacing (-3px) at display sizes for compressed, editorial headlines

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

Use Near-Black (`#1f1a15`) as the primary accent — it's the brand's signature interactive color

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

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

Lay out testimonials in a grid (32+ items) — quantity signals scale and trust

À éviter

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

Don't increase letter-spacing on headings — the type is designed to run tight at scale

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

Guide agent & export

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

Construis une UI dans le design system de la-casiniere.fr. Fond #ffffff · encre #878787 · accent #1f1a15. Typo : Work Sans — 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 la-casiniere

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