# BMW USA — Design System
> Official website for BMW luxury vehicles, featuring model showcases, leasing offers, and financial services.
- **Canonical:** https://uiuxskills.com/library/bmw-usa
- **Source:** https://www.bmw.com
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:26.617Z

---

---
version: alpha
name: BMW USA
description: >-
  The official digital presence for BMW in the United States, focusing on luxury vehicle showcases,
  financing, and brand heritage.
tone: >-
  Authoritative, precise, sophisticated, and aspirational. The tone is direct and professional,
  reflecting the 'Ultimate Driving Machine' brand promise.
color-scheme: light
colors:
  primary: "#1C69D3"
  surface: "#FFFFFF"
  surface-dim: "#F6F6F6"
  surface-container: "#CACACA"
  on-surface: "#231F20"
  on-primary: "#FFFFFF"
  outline: "#221F1F"
  error: "#D32F2F"
  surface-bright: "#1B243D"
  on-surface-bright: "#FFFFFF"
typography:
  display-lg:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: BMWTypeNext, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#185AB5"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.surface-container}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.surface-container}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#185AB5"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.surface-container}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface-bright:
    backgroundColor: "{colors.on-surface-bright}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

The BMW USA digital experience is defined by a premium, high-contrast aesthetic that balances technical precision with aspirational lifestyle imagery. The design language is clean, authoritative, and deeply rooted in a "less is more" philosophy, utilizing a sophisticated palette to convey engineering excellence and the "Ultimate Driving Machine" brand promise.

## Colors

The color strategy focuses on high-contrast legibility and brand-specific accents to guide users through luxury vehicle showcases and financing tools.

*   Primary (`{colors.primary}`) (#1C69D3): The signature BMW blue used for primary calls-to-action and interactive elements.
*   Surface (`{colors.surface}`) (inferred) (#FFFFFF): The primary background color for content sections.
*   Surface Dim (`{colors.surface-dim}`) (#F6F6F6): Light gray background used to differentiate secondary content sections and card containers.
*   Surface Container (`{colors.surface-container}`) (#CACACA): Neutral gray for borders and subtle UI elements.
*   On Surface (`{colors.on-surface}`) (#231F20): The primary text color for headings and body copy.
*   On Primary (`{colors.on-primary}`) (inferred) (#FFFFFF): Text color for buttons and elements using the primary blue background.
*   Outline (`{colors.outline}`) (#221F1F): Dark border color for high-contrast UI components.
*   Error (`{colors.error}`) (inferred) (#D32F2F): Standard error color for validation states.
*   Surface Bright (`{colors.surface-bright}`) (#1B243D): Deep navy used for footer and high-emphasis dark sections.
*   On Surface Bright (`{colors.on-surface-bright}`) (inferred) (#FFFFFF): Text color for dark surface backgrounds.

## Typography

The typography utilizes the BMWTypeNext family to maintain a consistent, professional, and precise voice across all digital touchpoints.

*   Display LG (`{typography.display-lg}`) (inferred): Used for hero headlines and major campaign titles.
*   Display MD (`{typography.display-md}`) (inferred): Used for section headers.
*   Headline LG (`{typography.headline-lg}`) (inferred): Used for sub-headers and feature titles.
*   Headline MD (`{typography.headline-md}`) (inferred): Used for card titles.
*   Body MD (`{typography.body-md}`) (inferred): Standard body copy for paragraphs.
*   Label SM (`{typography.label-sm}`) (inferred): Used for legal text and small UI labels.

## Layout

The site employs a wide-container grid system that prioritizes significant whitespace to emphasize high-quality vehicle photography. Sections follow a logical flow: hero, offers, loyalty, new-models, limited-edition, navigation-links, financial-services, and footer. The hero pattern features a full-width image with a bold, left-aligned headline and a clear primary CTA. The layout is fully responsive, with navigation collapsing into a mobile-friendly menu and imagery scaling to fit smaller viewports.

## Elevation & Depth

Depth is used sparingly to maintain a clean, industrial aesthetic. The brand relies on three levels of shadow to lift interactive elements from the background:

*   Elevation SM (`{elevation.sm}`) (inferred): Subtle lift for small UI elements.
*   Elevation MD (`{elevation.md}`) (inferred): Standard lift for cards and interactive containers.
*   Elevation LG (`{elevation.lg}`) (inferred): Pronounced lift for modals or high-emphasis overlays.

## Shapes

The design language is sharp and precise, reflecting automotive engineering. Corners are generally square or have very subtle radii to maintain a professional, industrial feel.

Radius tokens range from `{rounded.sm}` (2px) for crisp UI borders to `{rounded.lg}` (8px) for card elements. Avoid using radii larger than `{rounded.lg}` to ensure the interface remains consistent with the brand's technical, high-performance identity.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` with `{colors.on-primary}` text. Use for primary conversions like "Build yours" or "Reserve now."

### Card
A clean container using `{colors.surface}` and `{colors.surface-container}` borders. Use for grouping related vehicle information or offer details.

### Input Field
A precise, bordered input using `{colors.surface}`. On focus, the border shifts to `{colors.primary}` to provide clear feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.primary}` for body text. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid mixing `{typography.headline-lg}` with `{typography.display-lg}` in the same section. |
| Use `{colors.surface-dim}` to differentiate secondary content sections. | Do not use heavy shadows on `{card}` components. |
| Maintain consistent `{spacing.md}` between card elements. | Never apply `{typography.body-md}` on `{colors.surface-bright}` without ensuring high contrast. |
| Use `{colors.on-surface}` for all primary body text. | Avoid using rounded corners larger than `{rounded.lg}` on UI components. |
| Ensure all buttons use `{rounded.sm}` for a crisp, professional look. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.surface-container}` for subtle dividers. | Do not use excessive border-radius on `{swatch-outline}`. |
| Apply `{elevation.md}` to lift cards from the background. | Do not use `{elevation.lg}` for standard content cards. |

## Content Style

CTA labels are imperative and action-oriented, utilizing short, punchy verbs like "Build," "Reserve," or "Learn."

Headings are direct, benefit-driven, and aspirational, designed to capture attention immediately without unnecessary fluff.

Copy density is kept low. Use concise, scannable paragraphs and prioritize clear call-to-action links to maintain the "less is more" philosophy.

## Imagery & Icons

The imagery style is strictly photographic, featuring high-fidelity, professional automotive shots. Vehicles are typically captured in motion or within aspirational, expansive environments. Lighting is clean and intentional, specifically chosen to highlight the vehicle's design lines. All assets should feel premium and aspirational.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for BMW USA, a minimal enterprise brand. Match its authoritative, precise, and aspirational tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every color, typography, spacing, radius, and elevation value by its token name (e.g., `{colors.primary}`, `{typography.headline-md}`, `{spacing.md}`) — never hardcode hex values, pixel sizes, or raw font sizes.
2. Respect the `components:` block exactly. Render only the variants defined there (`button-primary`, `button-secondary`, `card`, `card-elevated`, `card-bright`, `input-field`, `badge`, `badge-error`). Do not invent new variants.
3. Follow the Layout section's section order (hero → offers → loyalty → new-models → footer) and the Shapes section's constraint: never apply a radius larger than `{rounded.lg}` on any UI component.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use all tokens by name on every component and layout decision.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{rounded.sm}` on all buttons and `{rounded.md}` on cards; respect the full radius scale.
- Apply `{elevation.md}` to lift cards; reserve `{elevation.lg}` for modals and high-emphasis overlays only.
- Write CTAs using short imperative verbs ("Build," "Reserve," "Learn") per the Content Style section.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values absent from the spec.
- Apply generic system defaults when a brand token exists.
- Use `{rounded.xl}` or `{rounded.full}` on any standard UI component.
- Use `{colors.primary}` for body text or `{colors.error}` for non-destructive actions.
- Add emoji, decorative filler, or unsolicited marketing copy.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for dark sections, use `{colors.surface-bright}` with `{colors.on-surface-bright}` text.
- For unspecified breakpoints, follow the Layout section's responsive notes; if absent, default to mobile-first with one breakpoint at 768px.
- "(inferred)" tokens are approximations — defer to any authoritative design system source if one exists.