4 box-shadows measured on the live page · click a tile to copy its raw value
shadow-1
shadow-2
shadow-3
shadow-4
05
Motion — easings, transitions & live keyframes
1 easing curve · 9 keyframes · hover a tile to preview
Easing & transitions
transition-2ease-in-out
9 keyframe animations extracted
rotate
backdrop-fade-in
backdrop-fade-in-dark
slidein
pwri-minute
pwri-hour
pwri-scroll
dialog-fade-in
button-fade-in
06
Components — the closed vocabulary
11 component families · 36 variants counted on the live DOM
Component
Variants found
buttons
×8
badges
×6
nav Links
×5
links
×5
heading H2
×3
footer Links
×2
heading H3
×2
eyebrow Labels
×2
search Bar
×1
heading H1
×1
heading H5
×1
Component style specs (§4)expand
Buttons
Ghost
Background: transparent
Text: #ffffff{colors.on-primary}
Padding: 1px 6px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button
Ghost
Background: transparent
Text: #ffffff{colors.on-primary}
Padding: 12px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button
Primary Brand
Background: #1c69d4{colors.primary}
Text: #ffffff{colors.on-primary}
Padding: 0px 20px
Radius: 0px
Font: 16px weight 700
Use: Primary CTA / brand action
Pill
Background: #1c69d4{colors.primary}
Text: #ffffff{colors.on-primary}
Padding: 16px 18px 16px 14px
Radius: 24px
Shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px 0px
Font: 16px weight 400
Use: Status pills, tags, chips
Pill
Background: #3c3c3c{colors.hairline}
Text: #bbbbbb
Padding: 16px 14px 16px 18px
Radius: 24px
Shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px 0px
Font: 16px weight 400
Use: Status pills, tags, chips
Primary Brand
Background: #1c69d4{colors.primary}
Text: #ffffff{colors.on-primary}
Padding: 8px
Radius: 0px
Font: 16px weight 400
Use: Primary CTA / brand action
Inputs & Forms
Text Input
Background: #f8f8f8{colors.surface-2}
Text: #000000
Padding: 0px 24px
Radius: 0px
Border: 0px none rgb(0, 0, 0)
07
Layout — structure & dimensions
4 layout metrics measured
max Width1600px
header Height82px
sidebar Width0px
container Padding0px
08
Responsive — real breakpoints
13 media-query stops read from the live CSS
375px
480px
640px
767px
768px
919px
920px
1023px
1024px
1280px
1440px
1599px
1600px
09
Do's & Don'ts
15 enforceable rules pulled verbatim from the spec
Do
Use Near-Black (`#262626`) for text — not pure black, it's warmer and more readable
Use BMWTypeNextLatin as the primary typeface — it defines the brand personality
Keep font weights between 300-400 — 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 M Tricolor Blue (`#1c69d4`) as the primary accent — it's the brand's signature interactive color
Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
Include a search input directly in the nav — discoverability is a primary UX value here
Each card includes a top image — imagery is part of the card identity, not optional
Don't
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 use weight 700 (bold) or above — 400 is the maximum weight in this system
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 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
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the bmw-m.com design system.
Canvas #ffffff · ink #262626 · accent #1c69d4.
Type: BMWTypeNextLatin — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.