Analyse du design system

thefatduck.co.uk

thefatduck.co.uk is built on a warm, off-white canvas (rgb(255, 253, 250)). The system uses rgb(255, 0, 0) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Cormorant Garamond as the primary typeface. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 33 keyframe animations plus transition-driven interactions.

Accent #1a1a1a · police principale Cormorant Garamond

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.thefatduck.co.uk ·extrait le 2026-07-13 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

12 couleurs mesurées · clique une pastille pour copier

Canvas

#fffdfa

AAA 15.19:1

Ink

#212529

AAA 15.19:1

Accent

#1a1a1a

AAA 17.14:1

Line

#585858

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

12 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl40px · 500

body

body18px · 500 · ×2.22

body sm

body-sm20px · 500 · ×0.90

button

button20px · 400 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 10px

sm · 15px

md · 16px

base · 20px

lg · 24px

xl · 30px

2xl · 38px

3xl · 63px

Arrondis

none
0px

xs
5px

sm
6px

md
25px

lg
30px

xl
32px

full
9999px

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

7 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

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

Courbes & transitions

transition-1ease-out

transition-4ease-in-out

33 animations keyframes extraites

scrollLine

fadein

marching-ants

Toastify__trackProgress

Toastify__bounceInRight

Toastify__bounceOutRight

Toastify__bounceInLeft

Toastify__bounceOutLeft

Toastify__bounceInUp

Toastify__bounceOutUp

Toastify__bounceInDown

Toastify__bounceOutDown

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
nav Links	×8
buttons	×4
footer Links	×2
heading H1	×1
captions	×1

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

Buttons

Ghost

Background: #000000
Text: #ffffff {colors.on-primary}
Padding: 7px 20px
Radius: 0px
Border: 1px solid rgba(0, 0, 0, 0)
Shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px 0px
Font: 20px weight 400
Use: Subtle action, toolbar, nav button

Light / Invert

Background: #ffffff {colors.on-primary}
Text: #1b1c1e
Padding: 0px
Radius: 6px
Border: 1px solid rgb(0, 0, 0)
Font: 14px weight 400
Use: Bright CTA on dark sections

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height0px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

45px

64px

400px

480px

550px

576px

600px

640px

700px

767px

768px

800px

875px

900px

990px

992px

1050px

1200px

1255px

1500px

À faire / À éviter

20 règles applicables, verbatim de la spec

À faire

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

Use Near-Black (`#212529`) for text — not pure black, it's warmer and more readable

Use Cormorant Garamond as the primary typeface — it defines the brand personality

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

Use 6px border-radius on buttons — the standard corner rounding for interactive elements

Keep the hero centered and text-driven — no decorative media, typography carries the message

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

À éviter

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

Don't use pure black (`#000000`) for text — the near-black adds warmth

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

Don't reach for weight 700 (bold) or above — 500 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 add hero illustrations or photos — they'll break the typographic restraint

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

Guide agent & export

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

Construis une UI dans le design system de thefatduck.co.uk. Fond #fffdfa · encre #212529 · accent #1a1a1a. Typo : Cormorant Garamond — 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 thefatduck

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