---
name: Bmw M
description: "This site effectively combines automotive photography with a premium, dark-themed UI to create an aspirational brand experience that showcases high-performance vehicles."
version: alpha

colors:
  background: "#262626"
  primary: "#ffffff"
  tertiary: "#1c69d4"
  neutral: "#bbbbbb"
  line: "rgba(186, 186, 186, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

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

---

## Overview

A premium automotive brand experience showcasing high-performance vehicles and lifestyle.

*A high-end automotive magazine meets a luxury product showroom.*

## Colors

Dark, dramatic background to let vehicle photography dominate; high-contrast white text for clarity; brand blue for primary actions.

- **Background (`#262626`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Accent (`#1c69d4`)** — uses `accent` token
- **Muted (`#bbbbbb`)** — uses `muted` token
- **Borders (`rgba(186, 186, 186, 0.2)`)** — uses `line` token

## Typography

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

- Headlines are often all-caps for emphasis.
- Body text maintains a consistent 16px size across the interface.
- High contrast (white on dark) is used throughout for maximum legibility.

## Layout

Full-width hero sections with split layouts for text and imagery, followed by grid-based content cards.

*Rhythm:* Spacious layout with significant padding around major content blocks to let imagery breathe.

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 1px 5px 0px
- rgba(0, 0, 0, 0.5) 0px 4px 25px 0px
- Borders: Subtle, thin white borders used sparingly for separation.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Solid blue rectangular button with white text for primary calls to action.
- **card:** Image-heavy cards with minimal text overlays for content browsing.
- **input:** Simple text input with bottom border for search functionality.
- **hero:** Large, dramatic split layout featuring a full-height image and bold headline text on a dark background.

## Do's and Don'ts

**Don't:**
- Don't use light backgrounds — the screenshot shows a consistent dark theme throughout.
- Don't use decorative or handwritten fonts — the screenshot shows a clean, modern sans-serif font.
- Don't use rounded corners on primary buttons — the screenshot shows sharp, rectangular buttons.
- Don't use a wide variety of accent colors — the screenshot shows a single, dominant brand blue.
- Don't use complex grids with many columns — the screenshot shows a simple, focused layout.
- Don't use small, cramped text — the screenshot shows generous spacing and clear typography.

---

## System Prompt (paste into AI agent)

```
This is a premium automotive brand website focusing on high-performance vehicles. The design uses a dark charcoal background (#262626) to let dramatic vehicle photography dominate, with white text (#ffffff) for high contrast and a brand blue (#1c69d4) for primary actions. Typography is a modern, clean sans-serif (BMW Type Next) used in various weights, with bold, all-caps headlines for impact. Key donts: avoid light backgrounds, avoid decorative fonts, and avoid rounded corners on primary buttons. The layout is spacious and editorial, prioritizing large imagery and clear, aspirational messaging.
```