name: bmw-design
version: alpha
description: >
  A bright, premium automotive canvas: near-white surfaces (#f6f6f6) carrying
  full-bleed cinematic vehicle photography, set in BMW Type Next — a humanist
  grotesque run at a light default weight (300) that turns up to 500 only for
  actions and links. The single brand voltage is BMW Blue (#1c69d4), reserved
  almost exclusively for the primary CTA. Geometry is uncompromisingly sharp
  (0px radius everywhere) and the page is entirely flat — no shadows, no
  gradients on surfaces. Signature moves: giant ultralight model wordmarks
  (X6, M440i) over dark imagery, and tiny wide-tracked uppercase eyebrows.
colors:
  # Brand
  primary: '#1c69d4'          # BMW Blue — the CTA voltage
  on-primary: '#ffffff'
  primary-hover: '#0653b6'
  primary-disabled: '#bbd2f3'
  # Text / ink
  on-surface: '#262626'       # heading + copy ink (warm near-black, not #000)
  on-surface-secondary: '#666666'  # disclaimers, captions
  on-surface-muted: '#8e8e8e'
  # Surface
  surface: '#ffffff'
  surface-secondary: '#f6f6f6'  # page + footer fill
  surface-field-disabled: '#f2f2f2'
  # Hairlines
  hairline: '#e6e6e6'
  border-input: '#8e8e8e'
  border-input-hover: '#4d4d4d'
  # Secondary action (dark "Next Best Action" buttons)
  nba: '#262626'
  on-nba: '#ffffff'
  nba-hover: '#4d4d4d'
  # Semantic
  error: '#d20000'
  error-bg: '#f7e7e9'
  warning: '#ffad1f'
  warning-bg: '#fbedc9'
  success: '#3db014'
  success-bg: '#e8f2eb'
  information: '#1c69d4'
  information-bg: '#dde8f9'
  # Inverse (navigation/hero overlays only — text & logo flip to white over imagery)
  on-inverse: '#ffffff'
typography:
  font-family-sans: 'bmwTypeNextWeb, Arial, Helvetica, Roboto, sans-serif'  # closest OSS: "Titillium Web" / a humanist grotesque
  weights:
    default: 300            # body, headlines (BMW runs headlines LIGHT)
    input: 400
    clickable: 500          # buttons
    link: 500
    price: 700              # price tags only
  stage-model:              # the giant hero wordmark (X6 / M440i)
    fontSize: 210px         # 13.125rem
    lineHeight: 186px       # 11.625rem
    fontWeight: 300
  stage-single-row:
    fontSize: 74px          # 4.625rem
    lineHeight: 76px
    fontWeight: 300
  headline-1:
    fontSize: 43px          # 2.6875rem
    lineHeight: 60px
    fontWeight: 300
  headline-2:
    fontSize: 35px          # 2.1875rem
    lineHeight: 50px
    fontWeight: 300
  headline-3:
    fontSize: 28px          # 1.75rem
    lineHeight: 40px
    fontWeight: 300
  subsection-1:
    fontSize: 23px          # 1.4375rem
    lineHeight: 36px
    fontWeight: 300
  body-1:
    fontSize: 18px          # 1.125rem
    lineHeight: 28px
    fontWeight: 300
  body-2:
    fontSize: 15px          # 0.9375rem — base body
    lineHeight: 24px
    fontWeight: 300
  body-3:
    fontSize: 12px          # 0.75rem
    lineHeight: 18px
    fontWeight: 300
  eyebrow:                  # "THE NEW", "THE BMW 7 RANGE"
    fontSize: 15px          # 0.9375rem
    lineHeight: 12px
    fontWeight: 500
    letterSpacing: 0.6em    # extreme wide tracking, uppercase
    textTransform: uppercase
  label:
    fontSize: 12px
    lineHeight: 16px
rounded:
  none: 0px                 # everything. BMW is sharp-cornered.
spacing:                    # rem-based; main gutter is 6rem on desktop
  base: 16px
  scale: [4px, 8px, 16px, 24px, 32px, 48px, 64px, 96px]
  page-gutter: 96px         # 6rem (--grid-main-container-width = 100vw - 6rem*2)
components:
  button-cta:               # primary "Know more" / "Skip Boring"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-2}'
    fontWeight: '{typography.weights.clickable}'
    rounded: '{rounded.none}'
    height: 52px            # 3.25rem large / 2.25rem small
    padding: '0 24px'
    hover-bg: '{colors.primary-hover}'
  button-nba:               # dark secondary action
    backgroundColor: '{colors.nba}'
    textColor: '{colors.on-nba}'
    rounded: '{rounded.none}'
    hover-bg: '{colors.nba-hover}'
  button-outline:           # "Register Your Interest", "Search now", "Discover now"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'   # white over imagery
    borderWidth: 1px        # thickens to 2px on hover (no layout shift via inset)
    borderColor: '{colors.on-surface}'
    rounded: '{rounded.none}'
  link-cta:
    textColor: '{colors.primary}'
    fontWeight: '{typography.weights.link}'
    hover: '{colors.primary-hover}'
  input:
    backgroundColor: '{colors.surface}'
    borderWidth: 1px
    borderColor: '{colors.border-input}'
    rounded: '{rounded.none}'
    placeholderColor: '{colors.on-surface-secondary}'
  filter-tag:
    textColor: '{colors.on-surface-secondary}'
    selected-bg: '{colors.nba}'
    selected-text: '{colors.on-nba}'
    rounded: '{rounded.none}'
motion:
  scroll-behavior: smooth
  # Subtle, mechanical; no playful springs. Image/poster cross-fades dominate.
icons:
  style: outline            # thin monoline pictograms (car icons, chevrons)
  stroke: ~1.5px
  sizes: { sm: 16px, md: 24px }
  color-rules: 'Inherit ink (#262626) on light; white over imagery. Chevron ">" pairs with links.'

BMW

bmw-design — version alpha

Surfaces studied via Playwright (bmw.com, India market home): computed styles + :root custom properties (the site exposes a full --cta/--nba/--headline-* token system). Provenance is high-confidence — values are extracted, not inferred.

Overview

BMW's web canvas is bright and architectural: a near-white {colors.surface-secondary} (#f6f6f6) page that exists mainly to frame full-bleed cinematic car photography. Content alternates between white editorial bands and edge-to-edge dark hero images, each carrying a single vehicle and a giant wordmark. Type is BMW Type Next, a proprietary humanist grotesque, and BMW's most distinctive type decision is restraint: headlines are set LIGHT (weight 300), not bold — even the enormous "X6" model wordmark. Weight climbs to 500 only for the things you click. The brand color, BMW Blue {colors.primary} (#1c69d4), is rationed hard: it is the primary CTA color and almost nothing else. Everything is sharp ({rounded.none} — 0px radius on buttons, inputs, cards) and flat (no shadows on surfaces), which reads as precise and engineered rather than soft. The signature moves are (1) the oversized ultralight model name over dark imagery and (2) the tiny, extremely wide-tracked uppercase eyebrow ("THE NEW", letter-spacing 0.6em).

Colors

• BMW Blue — {colors.primary} #1c69d4. The single brand voltage. Used for the filled primary CTA (Know more, Skip Boring), text-link hover/active states, and the "information" semantic. Hover deepens to {colors.primary-hover} #0653b6, disabled fades to #bbd2f3. Discipline rule: blue is for action, not decoration — surfaces and text never use it.
• Ink — {colors.on-surface} #262626. Note this is a warm near-black, not pure #000 — softer for long-form reading. Carries all headings and copy on light. Secondary ink {colors.on-surface-secondary} #666 is for disclaimers/legal; muted #8e8e8e for the lowest tier.
• Surfaces. White {colors.surface} for cards/inputs; {colors.surface-secondary} #f6f6f6 for the page body and footer. Hairlines are {colors.hairline} #e6e6e6.
• Dark action (NBA) — {colors.nba} #262626. A "Next Best Action" dark button used where blue would compete with imagery; hover #4d4d4d.
• Semantic set. error #d20000 / success #3db014 / warning #ffad1f / information #1c69d4, each with a soft tinted background (e.g. error-bg #f7e7e9).
• Inverse. Over photography the navigation, logo and outline buttons flip to white {colors.on-inverse}; a linear-gradient(0, transparent, #0006) scrim protects legibility.

Typography

• Family: BMW Type Next (bmwTypeNextWeb), with Arial, Helvetica, Roboto fallbacks. Closest open-source substitute: Titillium Web (or a humanist grotesque like Source Sans 3) — both share the slightly condensed, engineered humanist feel.
• Weight strategy is the defining trait: 300 default for body and headlines, 500 for clickable/link, 700 reserved for price tags only. There is essentially no bold body or bold headline.
• Tracking: normal across body/headlines; the eyebrow is the exception at 0.6em uppercase.

Token	Size	Weight	Line-height	Tracking	Usage
stage-model	210px	300	186px	normal	Giant hero model wordmark (X6, M440i, iX1)
stage-single-row	74px	300	76px	normal	Hero headline single line
headline-1	43px	300	60px	normal	Section headlines ("Find your BMW.")
headline-2	35px	300	50px	normal	Sub-headlines
headline-3	28px	300	40px	normal	Card titles
subsection-1	23px	300	36px	normal	Lead-ins
body-1	18px	300	28px	normal	Emphasised body
body-2	15px	300	24px	normal	Base body
body-3	12px	300	18px	normal	Fine print
eyebrow	15px	500	12px	0.6em, UPPER	"THE NEW", range labels
price	—	700	—	normal	Price figures only

Layout

Base unit is 16px on a rem scale; the desktop content container is 100vw − (6rem × 2), i.e. a 6rem (96px) page gutter. The dominant layout primitive is the full-width stacked band: alternating white editorial sections and edge-to-edge image stages, each occupying a full viewport-width row with the vehicle bled to the edges. Inside editorial bands, content is centered or split into 2–3 equal columns (footer = 3 columns: Contact, Services, Models). Whitespace is generous and calm; imagery does the heavy lifting.

Elevation & Depth

Essentially flat. Computed box-shadow is none on surfaces, buttons and cards; border-radius is 0. Depth comes exclusively from photography and dark/light banding, plus a navigation gradient scrim over hero images. BMW pointedly avoids card shadows and surface gradients.

Shapes

Sharp, rectilinear, engineered. Radius vocabulary is a single value: {rounded.none} (0px). Buttons, inputs, filter tags, and image frames are all hard rectangles. This geometric severity is the visual signature of precision/engineering.

Components

• CTA button {components.button-cta} — solid BMW Blue, white label, weight 500, 0px radius, ~52px tall (large) / 36px (small), hover → #0653b6. One per decision point.
• Outline button {components.button-outline} — transparent with a 1px border ({colors.on-surface} or white over imagery); on hover the border thickens to 2px (implemented without layout shift). Used for "Register Your Interest", "Discover now", "Search now".
• NBA dark button {components.button-nba} — #262626 fill for actions placed over busy/blue-clashing contexts.
• Text link {components.link-cta} — ink by default, turns BMW Blue on hover, often paired with a thin chevron "›".
• Input {components.input} — white, 1px #8e8e8e border (→ #4d4d4d hover), 0px radius, #666 placeholder.
• Filter tag {components.filter-tag} — pill-less rectangular chip; selected state fills dark (#262626) with white text.

Motion

Quiet and mechanical. scroll-behavior: smooth is set globally; the most visible motion is video/poster cross-fades on hero stages and subtle hover transitions (border thickening, color shift). There are no playful springs, no parallax fly-ins, no fade-up cascades — motion supports the imagery rather than performing.

Iconography

Thin outline monoline pictograms — the car-with-plus "Build your own", car-with-magnifier "Book a test drive", chevrons, and account/cart/heart/hamburger in the nav. Stroke ~1.5px, sizes 16/24px. Icons inherit ink #262626 on light and flip white over imagery.

Do's and Don'ts

• Do set headlines LIGHT (weight 300), including the giant model wordmark — never bold a hero headline.
• Do reserve BMW Blue {colors.primary} for the primary CTA and link interaction; keep at most one blue CTA per viewport.
• Do keep every corner sharp (0px) and every surface flat (no shadow, no surface gradient).
• Do use the tiny uppercase eyebrow at 0.6em tracking above model names.
• Do use warm ink #262626 for text, not pure black.
• Don't round buttons/cards or add drop shadows to "lift" them.
• Don't tint surfaces or text blue, or use blue as a decorative accent.
• Don't introduce a second accent hue — semantic colors (red/green/amber) appear only in their alert contexts.
• Don't let typography compete with the photography; the car is always the hero.

Known Gaps

• Exact BMW Type Next weight axis names and any italic usage were not enumerated (font is proprietary/licensed).
• Spacing scale is inferred from rem usage and the 6rem gutter; BMW does not expose a single canonical spacing-token list in :root.