Analyse du design system

la-table-des-poetes.com

la-table-des-poetes.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(106, 17, 40) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Montserrat as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

Accent #6a1128 · police principale Montserrat

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-table-des-poetes.com/ ·extrait le 2026-08-19 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

24 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 7.58:1

Ink

#545453

AAA 7.58:1

Accent

#6a1128

AAA 12.18:1

Line

#545453

AAA 7.58:1

États sémantiques

error#e02424success#057a55

2 rôles sémantiques trouvés.

24 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-xl37px · 500

body

body13.3333px · 400 · ×2.78

body sm

body-sm14px · 500 · ×0.95

button

button16px · 300 · ×0.88

mono

mono13.3333px · 400 · ×1.20

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

lg · 20px

xl · 32px

2xl · 48px

3xl · 65px

Arrondis

none
0px

xs
4px

sm
12px

md
24px

lg
46px

xl
50px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1ease-in-out

transition-5linear

200 animations keyframes extraites

fadeIn

fadeOut

slideInUp

slideOutDown

slideInDown

slideOutUp

fadeInRightShort

fadeInLeftShort

et_social_fadeIn

et_social_fadeOut

et_social_fadeInRight

et_social_fadeInBottom

Composants — le vocabulaire fermé

10 familles de composants · 40 variantes comptées sur le DOM live

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

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

Buttons

Primary Brand

Background: #6a1128 {colors.primary-hover}
Text: #ffffff {colors.on-primary}
Padding: 5px
Radius: 0px
Border: 2px outset rgb(0, 0, 0)
Font: 13.3333px weight 400
Use: Primary CTA / brand action
Hover: backgroundColor: #281f22
Focus: backgroundColor: rgb(40, 31, 34)

Primary Brand

Background: #6a1128 {colors.primary-hover}
Text: #ffffff {colors.on-primary}
Padding: 18px 32px
Radius: 0px
Font: 16px weight 300
Use: Primary CTA / brand action
Hover: backgroundColor: #281f22
Focus: backgroundColor: rgb(40, 31, 34)

Light / Invert

Background: #f0ebe6 {colors.surface-1}
Text: #281f22
Padding: 17px 32px
Radius: 0px
Font: 16px weight 300
Use: Bright CTA on dark sections
Hover: backgroundColor: #281f22
Focus: backgroundColor: rgb(40, 31, 34)

Outline

Background: transparent
Text: #6a1128 {colors.primary-hover}
Padding: 13px 33px
Radius: 0px
Border: 1px solid rgba(106, 17, 40, 0.61)
Font: 14px weight 300
Use: Secondary action with border
Hover: backgroundColor: #281f22
Focus: backgroundColor: rgb(40, 31, 34)

Ghost

Background: transparent
Text: #671730
Padding: 4.2px 28px 4.2px 0px
Radius: 0px
Font: 14px weight 500
Use: Subtle action, toolbar, nav button
Hover: backgroundColor: #281f22
Focus: backgroundColor: rgb(40, 31, 34)

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #4e4e4e
Padding: 2px

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height67px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

320px

380px

420px

479px

480px

481px

600px

767px

768px

769px

782px

800px

900px

980px

981px

1024px

1025px

1100px

1350px

1405px

À faire / À éviter

16 règles applicables, verbatim de la spec

À faire

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

Keep font weights between 400-600 — 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 Crimson (`#6a1128`) as the primary accent — it's the brand's signature interactive color

Style form inputs with a `1px solid rgb(187, 187, 187)` border — use border-based inputs, not floating labels or underline-only

Transition button background to Near-Black (`#281f22`) on hover — this is the extracted interactive state

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

À é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 — 600 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 remove the input border — the border is the primary affordance indicator for form fields

Don't use opacity or brightness filter for button hover — the design uses an explicit background color change

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 la-table-des-poetes.com. Fond #ffffff · encre #545453 · accent #6a1128. Typo : Montserrat — 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-table-des-poetes

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