Analyse du design system

brasserie-cafeteriaducentre.fr

brasserie-cafeteriaducentre.fr is built on a warm, off-white canvas (rgb(253, 252, 252)). The system uses rgba(212, 154, 50, 0.5) as the high-saturation accent for primary actions. Generously rounded CTAs (64px) suggest approachable, content-first design alongside Montserrat as the primary typeface. A layered elevation system (8 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 22 keyframe animations plus transition-driven interactions.

Accent #d49a32 · 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://www.brasserie-cafeteriaducentre.fr ·extrait le 2026-07-21 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

40 couleurs mesurées · clique une pastille pour copier

Canvas

#fdfcfc

AAA 8.25:1

Ink

#4d4d4d

AAA 8.25:1

Accent

#d49a32

Fail 2.42:1

Line

#4d4d4d

AAA 8.25:1

États sémantiques

error#ff6666success#b7f075warning#ffb74dinfo#6eb9ff

4 rôles sémantiques trouvés.

40 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl54.56px · 700

display md

display-md20px · 700 · ×2.73

headline

headline18px · 700 · ×1.11

body

body16px · 400 · ×1.13

body sm

body-sm10.5px · 400 · ×1.52

button

button18px · 500 · ×0.58

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 4px

sm · 9px

md · 12px

base · 16px

lg · 26px

xl · 30px

2xl · 44px

3xl · 60px

Arrondis

none
0px

xs
4px

sm
6px

md
12px

lg
20px

xl
40px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1cubic-bezier(0.4, 0.1, 0.2, 1)

22 animations keyframes extraites

dropdownIn

fadeIn

fadeInDown

fadeInUp

fadeInLeft

fadeInRight

showDown

showUp

panelShowUp

hide

zoomIn

arrowtoRight

Composants — le vocabulaire fermé

14 familles de composants · 76 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
badges	×10
nav Links	×10
footer Links	×10
links	×10
heading H2	×9
cards	×8
cta Banner	×2
tooltip	×2
heading H1	×1
heading H3	×1
heading H4	×1
eyebrow Labels	×1
captions	×1

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

Buttons

Ghost

Background: transparent
Text: #222222
Padding: 13px
Radius: 4px
Border: 2px solid rgba(0, 0, 0, 0)
Font: 12px weight 400
Use: Subtle action, toolbar, nav button
Focus: outline: rgb(112, 72, 0) none 0px
Active: boxShadow: rgba(249, 161, 0, 0.15) 0px 0px 0px 0.56

Pill

Background: transparent
Text: #704800 {colors.primary-hover}
Padding: 8.75px
Radius: 56px
Border: 1px solid rgb(112, 72, 0)
Font: 14px weight 500
Use: Status pills, tags, chips
Focus: outline: rgb(112, 72, 0) none 0px
Active: boxShadow: rgba(249, 161, 0, 0.15) 0px 0px 0px 0.56

Pill

Background: #cd0000
Text: #fff5f5
Padding: 8.75px
Radius: 56px
Border: 1px solid rgba(205, 0, 0, 0.15)
Font: 14px weight 500
Use: Status pills, tags, chips
Focus: outline: rgb(112, 72, 0) none 0px
Active: boxShadow: rgba(249, 161, 0, 0.15) 0px 0px 0px 0.56

Icon Button

Background: transparent
Text: #704800 {colors.primary-hover}
Padding: 8.75px
Radius: 56px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 14px weight 500
Use: Toolbar/UI icons
Focus: outline: rgb(112, 72, 0) none 0px
Active: boxShadow: rgba(249, 161, 0, 0.15) 0px 0px 0px 0.56

Cards & Containers

Standard Card

Background: #f5f2ef
Padding: 35px
Radius: 40px
Use: Content containers, listing items

CTA Banners

Full-width CTA

Background: #cd0000
Text: rgba(255, 245, 245, 0.85)
Padding: 17.5px 63.2px

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1440px

header Height63px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

13 points de rupture lus dans le CSS live

23px

47px

48px

64px

76px

77px

104px

105px

160px

500px

640px

800px

850px

À faire / À éviter

21 règles applicables, verbatim de la spec

À faire

Use Pure White (`#fdfcfc`) as the page background — it's intentionally not pure white

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

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 Translucent Accent Shadow (50%) (`rgba(212, 154, 50, 0.5)`) as the primary accent — it's the brand's signature interactive color

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

Apply 35px padding inside cards — matches the design system's content breathing room

Use 40px border-radius on cards — consistent with the grid card corners

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

Use a 3-column grid on desktop — density matters for this content type

Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

À éviter

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

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

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 — 56px 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, 13 links)

Guide agent & export

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

Construis une UI dans le design system de brasserie-cafeteriaducentre.fr. Fond #fdfcfc · encre #4d4d4d · accent #d49a32. 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 brasserie-cafeteriaducentre

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