---
name: Bmw
description: "Worth including as a benchmark for premium automotive brand digital presence—demonstrates how dramatic photography and restrained typography create luxury without excess."
version: alpha

colors:
  background: "#ffffff"
  primary: "#414141"
  tertiary: "#1C69D4"
  neutral: "#727171"
  line: "rgba(65, 65, 65, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 300
    letterSpacing: "-0.5px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 35px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "-0.25px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.6
    fontWeight: 300
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.35
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 2px
  lg: 5px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A premium automotive website with dark atmospheric heroes, clean typography, and bold blue accents.

*A luxury automotive showroom showcasing high-performance vehicles through dramatic photography.*

## Colors

Minimalist palette anchored by deep charcoal and crisp white, punctuated by a singular BMW blue accent for actions.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#414141`)** — uses `ink` token
- **Accent (`#1C69D4`)** — uses `accent` token
- **Muted (`#727171`)** — uses `muted` token
- **Borders (`rgba(65, 65, 65, 0.2)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Headlines use light weight (300) for an elegant, premium feel.
- Button text uses medium weight (500) for clear call-to-action emphasis.
- Tight negative letter-spacing on large display type for visual density.
- Body text maintains generous line-height (1.5-1.6) for comfortable reading.

## Layout

Full-bleed hero imagery with left-aligned text overlays, transitioning to centered white content sections below.

*Rhythm:* 8px grid system with generous horizontal padding (96px on desktop hero sections) for breathing room.

## Elevation & Depth

- rgba(0, 0, 0, 0.25) 0px 4px 4px 0px
- rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- Borders: Thin 1px borders in muted charcoal (#414141) for subtle separation, no heavy outlines.

## Shapes

- `sm`: 0px
- `md`: 2px
- `lg`: 5px
- `pill`: 999px

## Components

- **button:** Solid blue (#1C69D4) filled buttons with white text and sharp corners; ghost/outline variants for secondary actions.
- **card:** Image-heavy editorial cards with minimal chrome, focusing on high-quality automotive photography.
- **chip:** Simple text-based navigation chips with underline indicators, no pill-shaped containers.
- **input:** Clean minimal inputs with thin bottom borders, consistent with the restrained design language.
- **hero:** Full-viewport photographic backgrounds with gradient overlays ensuring text legibility on dark imagery.

## Do's and Don'ts

**Don't:**
- don't use rounded corners on primary buttons — screenshot shows sharp 0-2px radius instead
- don't add decorative gradients or patterns — screenshot shows flat photographic heroes with subtle dark overlays
- don't use bold/heavy typography weights — screenshot shows predominantly light (300) weight headlines
- don't introduce multiple accent colors — screenshot shows only BMW blue (#1C69D4) as the sole chromatic accent
- don't create busy multi-column hero layouts — screenshot shows single full-bleed images with left-aligned text
- don't use drop shadows on content cards — screenshot shows flat, clean surfaces without layered elevation

---

## System Prompt (paste into AI agent)

```
BMW.com is a premium automotive brand website featuring dramatic full-viewport photography paired with restrained, elegant typography. The design uses a light grotesque-sans typeface (bmwTypeNextWeb) at predominantly light weight (300) for headlines, creating a luxurious feel. The color palette is minimal: white (#FFFFFF) backgrounds, charcoal ink (#414141), and a single BMW blue accent (#1C69D4) for calls-to-action. Key hex colors include the blue accent, white backgrounds, and charcoal (#262626) for dark overlays. Hero sections use full-bleed automotive photography with gradient overlays for text legibility. Critical donts: never use rounded button corners (keep sharp/square), never add multiple accent colors (blue is the only chromatic element), and never use heavy font weights for headlines (always light/300). The layout transitions from dramatic dark photographic heroes to clean white content sections. Navigation is minimal with clean horizontal links and dropdown chevrons.
```