prism·mdthe design press
EXTRACTED · 10 SECTIONS · 16 COLORS · GRADE C 65/100

bmw.com

16 colours · bmwTypeNextWeb woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

16
colors
5
faces
5
shadows
58
keyframes
01

Color — roles, semantics & the full census

16 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
#000000
AAA 21:1
Semantic states
error#d20000success#3db014warning#ffad1f

3 semantic roles found.

16 colors mined from the live renderexpand
02

Type — the ladder, in the real face

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

display xl
display-xl43px · 300
display md
display-md23px · 300 · ×1.87
body
body15px · 300 · ×1.53
button
button20px · 300 · ×0.75
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 · 96px
3xl · 104px
Radius
none
0px
xs
3px
sm
8px
md
14px
lg
20px
xl
32px
full
9999px
04

Depth — elevation is extracted, not invented

5 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05

Motion — easings, transitions & live keyframes

3 easing curves · 58 keyframes · hover a tile to preview

Easing & transitions
transition-2ease-in-out
transition-4cubic-bezier(0, 0.5, 0.5, 1)
transition-5cubic-bezier(0.5, 0, 0.5, 1)
58 keyframe animations extracted
fade-in
spin
grow
cmp-search__loading-indicator-spin
grow-up
label-fade-in
label-arrows-left-fade-out
label-arrows-right-fade-out
pulse-single
pulse-double
grow-icon
fade-icon
06

Components — the closed vocabulary

8 component families · 38 variants counted on the live DOM

ComponentVariants found
buttons×10
badges×10
heading H2×5
nav Links×3
heading H3×3
links×3
footer Links×2
divider×2
Component style specs (§4)expand

Buttons

Ghost

  • Background: transparent
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px 12px
  • Radius: 0px
  • Font: 15px weight 500
  • Use: Subtle action, toolbar, nav button

Ghost

  • Background: transparent
  • Text: #000000
  • Padding: 16px
  • Radius: 0px
  • Font: 12px weight 500
  • Use: Subtle action, toolbar, nav button

Light / Invert

  • Background: #ffffff {colors.on-primary}
  • Text: #262626 {colors.ink}
  • Padding: 0px
  • Radius: 50%
  • Shadow: rgba(0, 0, 0, 0.16) 0px 6px 20px 0px, rgba(0, 0, 0, 0.24) 0px 0px 1px 0px
  • Font: 15px weight 500
  • Use: Bright CTA on dark sections

Subtle

  • Background: rgba(221, 232, 249, 0.5) {colors.surface-1}
  • Text: #262626 {colors.ink}
  • Padding: 12px 20px
  • Radius: 3px
  • Font: 15px weight 500
  • Use: Quiet action against page bg

Light / Invert

  • Background: #ffffff {colors.on-primary}
  • Text: #262626 {colors.ink}
  • Padding: 12px 20px
  • Radius: 3px
  • Font: 15px weight 300
  • Use: Bright CTA on dark sections

Primary Brand

  • Background: #1c69d4 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 4px
  • Radius: 3px
  • Font: 15px weight 500
  • Use: Primary CTA / brand action
07

Layout — structure & dimensions

4 layout metrics measured

header 0px calc(100vw - 0px - 6rem*2) max-width
max Widthcalc(100vw - 0px - 6rem*2)
header Height0px
sidebar Width314px
container Padding0px
08

Responsive — real breakpoints

14 media-query stops read from the live CSS

46px
60px
73px
480px
599px
767px
768px
992px
1023px
1024px
1279px
1280px
1919px
1920px
09

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Do
Use Near-Black (`#262626`) for text — not pure black, it's warmer and more readable
Use bmwTypeNextWeb 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 Link Cta (`#1c69d4`) as the primary accent — it's the brand's signature interactive color
Use small 3px radius for buttons — this design system uses subtle rounding, not pill shapes
Maintain nav height at 84px — 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
Include exactly 8 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Use a 3-column grid on desktop — density matters for this content type
Build a content-dense footer (6 columns, ~68 links) — this site treats the footer as a sitemap, not an afterthought
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 invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
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.com design system. Canvas #ffffff · ink #262626 · accent #1c69d4. Type: bmwTypeNextWeb — 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.
A · InstrumentB · Press