# Design Reference - BMW.com
> Precision-engineered monochrome luxury; every detail is intentional, nothing is superfluous.

## Source
- Original site: https://bmw.com
- Captured: 2026-04-11T16:27:40.763Z

## Tags
- luxury
- automotive
- monochrome
- minimal
- precision
- editorial
- technical
- high-contrast

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Obsidian | `#262626` | neutral | Primary text, interactive elements, navigation links, button text — forms the core dark against light contrast. |
| Canvas White | `#ffffff` | neutral | Page backgrounds, card surfaces, prominent navigational elements — establishes the primary visual canvas. |
| Graphite Grey | `#bbbbbb` | neutral | Secondary navigation text, subtle borders, contextual information — provides sufficient contrast on dark surfaces while appearing subdued on light ones. |
| Frost | `#f1f1f1` | neutral | Subtle background accents, dividers — provides a very light contrast against Canvas White. |
| Deep Space | `#262626` | neutral | Footer background — anchors the page with a solid, dark foundation. |
| Electric Blue | `#1c69d4` | accent | Interactive highlights, focus states — a vibrant, technical accent for user interaction. |

## Typography
- role: Body text, navigation, interactive elements, button labels, and general UI text. Its precise forms reflect the brand's engineering heritage, ensuring clarity across all contexts.; sizes: 16px, 18px; family: BMWTypeNextLatin; weight: 400, 700, 900; lineHeight: 1.15, 1.20, 1.30, 1.60, 1.63; substitute: Open Sans; letterSpacing: normal
- role: Primary display headlines; the light weight at large sizes conveys authority through refinement rather than aggression, creating a sophisticated brand voice. It's unexpected at this scale, establishing an elegant, high-impact presence.; sizes: 60px; family: BMWTypeNextLatin Light; weight: 300; lineHeight: 1.30; substitute: Open Sans Light; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "buttons": "0px",
      "default": "0px"
    },
    "elementGap": "8px",
    "sectionGap": "40px",
    "cardPadding": "16px"
  },
  "radius": {
    "buttons": "0px",
    "default": "0px"
  }
}
```

## Component Patterns
- name: CTA Link Button — 'Find your BMW'
- name: Language Selector Bar
- name: Footer Link Columns
- name: Text Link Button; role: Primary Call to Action
- name: Navigation Link; role: Primary Navigation
- name: Heading Text Badge; role: Section Labels

## Do
- Prioritize BMWTypeNextLatin for all text elements to maintain brand consistency.
- Use Canvas White (#ffffff) as the dominant background color for main content areas.
- Apply Obsidian (#262626) for primary text and interactive elements to ensure high contrast.
- Utilize BMWTypeNextLatin Light weight 300 at 60px for prominent headings to create an impactful yet refined statement.
- Maintain zero border-radius on all components to preserve the precise, angular aesthetic.
- Employ Electric Blue (#1c69d4) sparingly for interactive highlights and focus states, ensuring it stands out against the monochrome palette.

## Don't
- Avoid using saturated or chromatic colors outside of the designated Electric Blue accent.
- Do not introduce rounded corners or soft shapes, as the aesthetic is defined by sharp precision.
- Refrain from heavy shadows or overt elevation a primary means of drawing attention; rely on typography and strong contrast.
- Do not deviate from the BMWTypeNextLatin font family; consistency is key to the brand's visual identity.
- Avoid excessive padding around interactive textual elements like links; use 0-12px as seen in button examples.