burgerandbeyond.co.uk is built on a pure-white canvas (rgb(255, 255, 255)).
The system uses rgb(255, 93, 1) as the high-saturation accent for primary actions.
Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Neuehaasdisplaymediu 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 — 25 keyframe animations plus transition-driven interactions.
Accent #ffffff · police principale Neuehaasdisplayroman
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.
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
05
Motion — courbes, transitions & keyframes réels
1 courbe d’easing · 25 keyframes · survole une tuile pour prévisualiser
Courbes & transitions
transition-4linear
25 animations keyframes extraites
spin
marching-ants
Toastify__trackProgress
Toastify__bounceInRight
Toastify__bounceOutRight
Toastify__bounceInLeft
Toastify__bounceOutLeft
Toastify__bounceInUp
Toastify__bounceOutUp
Toastify__bounceInDown
Toastify__bounceOutDown
Toastify__zoomIn
06
Composants — le vocabulaire fermé
10 familles de composants · 27 variantes comptées sur le DOM live
Composant
Variantes
cards
×5
links
×5
badges
×4
nav Links
×3
heading H2
×3
footer Links
×2
cta Banner
×2
buttons
×1
heading H1
×1
heading H3
×1
07
Mise en page — structure & dimensions
5 métriques de layout mesurées
max Width1200px
header Height900px
sidebar Width0px
gap16px
container Padding24px
08
Responsive — vrais breakpoints
8 points de rupture lus dans le CSS live
479px
480px
767px
768px
991px
1199px
1200px
1440px
09
À faire / À éviter
18 règles applicables, verbatim de la spec
À faire
Use Charcoal (`#333333`) for text — not pure black, it's warmer and more readable
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 full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use Bright Orange (`#ff5d01`) as the primary accent — it's the brand's signature interactive color
Keep navigation fixed to the top — the design uses a persistent navigation pattern
Maintain nav height at 88px — consistent vertical space for the navigation bar
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Build the hero as a split layout with media on the right — text and visual share equal weight
Make the navigation fixed — it stays visible during scroll, signaling content depth
Each card includes a top image — imagery is part of the card identity, not optional
À éviter
Don't use pure black (`#000000`) for text — the near-black adds warmth
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 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 collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't over-build the footer — this design keeps it minimal (1 cols, 13 links)
10
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page
Construis une UI dans le design system de burgerandbeyond.co.uk.
Fond #ffffff · encre #333333 · accent #ffffff.
Typo : Neuehaasdisplayroman — 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.
