prismdinstrument
EXTRACTED · 10 SECTIONS · 8 COLORS · GRADE D

bmw-m.com

Accent #5e6ad2 · BMWTypeNextLatin — every value below measured via getComputedStyle(), not asserted by hand.

8
colors
3
faces
4
shadows
9
keyframes
DESIGN.md tokens.json
bmw-m.com
real render · source of truth

bmw-m.com is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(28, 105, 212) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside BMWTypeNextLatin Light as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 9 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

8 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 15.13:1
Ink
#262626
AAA 15.13:1
Accent
#1c69d4
AA 5.22:1
Line
#3c3c3c
AAA 11.03:1
Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

8 colors mined from the live renderexpand
02

Type — the ladder, in the real face

7 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl
display-xl60px · 300
display lg
display-lg40px · 300 · ×1.50
display md
display-md24px · 400 · ×1.67
headline
headline16px · 400 · ×1.50
body
body16px · 700 · ×1.00
button
button16px · 700 · ×1.00
eyebrow
eyebrow20px · 400 · ×0.80
04

Depth — elevation is extracted, not invented

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
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 6px
sm · 8px
md · 12px
base · 16px
lg · 24px
xl · 40px
2xl · 45px
3xl · 100px
Radius
none
0px
xs
24px
sm
32px
md
40px
lg
48px
xl
56px
full
9999px
06

Components — the closed vocabulary

11 component families · 36 variants counted on the live DOM

ComponentVariants 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

header 82px 1600px max-width
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.
Every value above was getComputedStyle-verified.
$ npx prismd add bmw-m
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press