BMW M

Overview

BMW M's marketing surface is a near-pure black canvas (`{colors.canvas}` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (`{colors.hairline}`), all-caps button labels with no fill until hovered.

The **M tricolor stripe** — `{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.

Type voice runs **BMW Type Next Latin** in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.

**Key Characteristics:**

• Near-pure black canvas (`{colors.canvas}` — #000) with white type. The system inverts almost nothing — there is no light-mode marketing surface.
• Display headlines in UPPERCASE BMW Type Next Latin at weight 700. Sub-heads stay sentence-case at lighter weight.
• M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.
• Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.
• Buttons are flat with `{rounded.none}` (0px) corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand.
• Border radius is mostly zero across the system. The few exceptions: `{rounded.full}` on circular icon buttons (carousel arrows, chatbot launcher) and `{rounded.sm}` on a handful of small toggle pills.
• Spacing is generous and grid-aligned: `{spacing.section}` (96px) between major bands; `{spacing.xxl}` (64px) inside hero photo bands; `{spacing.xl}` (40px) inside content cards.

Colors

Brand & Accent

• **Primary** (`{colors.primary}` — #ffffff): The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button).
• **M Blue Light** (`{colors.m-blue-light}` — #0066b1): The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome.
• **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4): The middle stop. The same hex as `{colors.bmw-blue}` — BMW's heritage corporate blue, repurposed as the middle band of the M stripe.
• **M Red** (`{colors.m-red}` — #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.
• **Electric Blue** (`{colors.electric-blue}` — #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.

Surface

• **Canvas** (`{colors.canvas}` — #000000): The default page floor across every marketing surface. True black.
• **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips.
• **Surface Card** (`{colors.surface-card}` — #1a1a1a): Cards, secondary buttons, icon-button backgrounds.
• **Surface Elevated** (`{colors.surface-elevated}` — #262626): One step lighter, used for nested cards inside dark bands.
• **Carbon Gray** (`{colors.carbon-gray}` — #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.

Hairlines & Borders

• **Hairline** (`{colors.hairline}` — #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.
• **Hairline Strong** (`{colors.hairline-strong}` — #262626): Same hex as `{colors.surface-elevated}` — borders feel like one-step elevations rather than ink lines.

Text

• **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text on dark canvas.
• **Body** (`{colors.body}` — #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph.
• **Muted** (`{colors.muted}` — #7e7e7e): Footer links, breadcrumbs, captions.

Semantic

• **Warning** (`{colors.warning}` — #f4b400): Used very sparingly on technical-warning callouts.
• **Success** (`{colors.success}` — #0fa336): Order-confirmation states (rare on marketing surfaces).

Typography

Font Family

**BMW Type Next Latin** is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The split is a deliberate weight-pair:

• Display (700) for headlines, navigation labels, button text, and category labels — the "stamped" voice
• Light (300) for body paragraphs, descriptive copy, and secondary metadata — the "engineered" voice

The contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 80px | 700 | 1.0 | 0 | Hero h1 ("THE ULTIMATE", "MORE BMW M.") |

| `{typography.display-lg}` | 56px | 700 | 1.05 | 0 | Section heads ("MORE FROM BMW M MAGAZINE.") |

| `{typography.display-md}` | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |

| `{typography.display-sm}` | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |

| `{typography.title-lg}` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |

| `{typography.title-md}` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |

| `{typography.title-sm}` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |

| `{typography.label-uppercase}` | 14px | 700 | 1.3 | 1.5px | Category tabs, "VIEW MORE" inline labels |

| `{typography.body-md}` | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |

| `{typography.body-sm}` | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |

| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |

| `{typography.button}` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |

| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |

Principles

The system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel "machined" rather than "typed." Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.

UPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.

Note on Font Substitutes

If BMW Type Next Latin is unavailable, **Inter** (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. **Saira Condensed** is an alternative for headlines if a slightly more compressed feel is desired.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.xxl}` 64px · `{spacing.section}` 96px.
• **Section padding (vertical):** `{spacing.section}` (96px) between major editorial bands.
• **Hero photo bands:** `{spacing.xxl}` (64px) internal vertical padding around the hero h1 + sub-headline pair.
• **Card internal padding:** `{spacing.lg}` (24px) for content and model cards; `{spacing.xl}` (40px) for spec-cell tables.
• **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer columns.

Grid & Container

• **Max content width:** ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.
• **Editorial body:** Single 12-column grid; photo bands bleed full-bleed (no max-width).
• **Card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
• **Footer:** 4-column link list at desktop, 2-up at tablet, 1-up at mobile.

Whitespace Philosophy

BMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform `{spacing.section}` (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |

| Soft hairline | 1px `{colors.hairline}` border | Section dividers, card outlines, table rows |

| Card surface | `{colors.surface-card}` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |

| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |

The system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated `{colors.surface-card}`.

Decorative Depth

• **M Stripe Divider** (`{component.m-stripe-divider}`): A 4px-tall horizontal divider carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true "decorative" element — used sparingly to mark significance.
• **Carbon-fiber surfaces**: The technical-spec page uses `{colors.carbon-gray}` (#2b2b2b) cells with subtle texture overlay. This is a single-page treatment, not a system-wide pattern.
• **Photographic depth**: Full-bleed cars are the depth. Lighting in the photography (track lights, sunset rim-light) does the elevation work that drop shadows would do in a SaaS system.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |

| `{rounded.xs}` | 2px | Almost no use — reserved for legal CTAs |

| `{rounded.sm}` | 4px | Small toggle pills on configurator surfaces |

| `{rounded.md}` | 6px | Rare — small dropdown menu items |

| `{rounded.full}` | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |

The radius hierarchy is "almost always 0, sometimes circular." This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.

Photography Geometry

Hero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.

Components

Top Navigation

**`top-nav`** — Black nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the BMW M logo at left (M tricolor + BMW roundel + "M" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in `{typography.nav-link}` with sentence-case labels.

Buttons

**`button-primary`** — The signature primary CTA. Background `{colors.canvas}` (or transparent over photography), text `{colors.on-dark}` (white), 1px white border outline, rounded `{rounded.none}` (0px), padding 16px × 32px, height 48px. Type `{typography.button}` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.

**`button-primary-outline`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.

**`button-on-light`** — Used on rare light-surface contexts (configurator, account dialogs). Background `{colors.canvas}`, text `{colors.on-dark}` — black button with white text, inverted from the dark-canvas default.

**`button-icon`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background `{colors.surface-card}`, white icon centered, rounded `{rounded.full}`. The only non-rectangular button shape in the system.

**`carousel-arrow`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as `{component.button-icon}` with chevron glyph.

**`text-link`** — Inline uppercase letterspaced links ("VIEW ALL MODELS", "READ MORE"). `{typography.label-uppercase}`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.

Cards & Containers

**`hero-photo-band`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses `{typography.display-xl}` (80px / 700) and sits left-aligned over the photo, often with a small subtitle in `{typography.body-md}` below. Vertical padding `{spacing.xxl}` (64px). No card frame — the photo IS the band.

**`feature-photo-card`** — Used in 3-up grids for "MORE FROM BMW M MAGAZINE" and similar editorial sections. Background `{colors.surface-card}`, rounded `{rounded.none}`, internal padding `{spacing.lg}` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in `{typography.label-uppercase}`, a `{typography.title-lg}` title, and a short body description.

**`model-card`** — Used in the "MORE NEW M MODELS" 3-up grid. Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:10 hero shot of the model. Below: model name in `{typography.display-md}` (40px / 700), short specs line in `{typography.body-sm}`, a `{component.text-link}` ("EXPLORE THIS MODEL").

**`magazine-article-card`** — A more text-forward card variant used on the magazine overview page. Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`. Carries a small thumbnail at top, a category label in `{typography.label-uppercase}`, headline in `{typography.title-lg}`, and a body excerpt.

**`spec-cell`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background `{colors.surface-soft}` (#0d0d0d), rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Each cell holds a value in `{typography.display-sm}` (32px / 700) at top and a label in `{typography.label-uppercase}` below.

**`motorsport-photo-card`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.

**`chatbot-launcher`** — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background `{colors.surface-card}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries an h3 title, a short prompt, and a `{component.button-primary}` to launch.

**`category-tab`** + **`category-tab-active`** — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in `{typography.label-uppercase}`. Active state changes text color from `{colors.body}` to `{colors.on-dark}` and adds a 2px white underline below the label. No background fill, no rounded corners.

Inputs & Forms

**`text-input`** — Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.

**`cookie-consent-card`** — A right-side cookie-banner card visible on the homepage. Background `{colors.canvas}` with 1px hairline, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Body text in `{typography.body-sm}` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.

Signature Components

**`m-stripe-divider`** — The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.

**`cta-band-photo`** — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in `{typography.display-md}` and a `{component.button-primary-outline}` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.

Footer

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.body}`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in `{typography.caption}` and language selector. The footer never inverts — it stays black even when the body might transition.

Do's and Don'ts

Do

• Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.
• Use UPPERCASE display headlines in `{typography.display-xl}` or `{typography.display-lg}`. Sentence-case display reads as off-brand.
• Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.
• Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.
• Use `{rounded.none}` (0px) by default. Reserve `{rounded.full}` for circular icon buttons only.
• Letter-space all-caps labels at 1.5px. The "machined" feel is non-negotiable.
• Use `{spacing.section}` (96px) between major editorial bands for grid-aligned vertical rhythm.

Don't

• Don't introduce a brand color outside the M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) and the heritage `{colors.bmw-blue}`.
• Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.
• Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.
• Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.
• Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.
• Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.
• Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel "machined."

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |

| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |

| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |

| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |

Touch Targets

• `{component.button-primary}` renders at 48 × 48px minimum — meets WCAG AAA.
• `{component.button-icon}` and `{component.carousel-arrow}` are exactly 48 × 48 — comfortably above the 44 × 44 minimum.
• `{component.text-input}` height is 48px.
• Category tabs render as text-only labels with 12px vertical padding; effective tap area meets 44px with surrounding spacing.

Collapsing Strategy

• Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.
• Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.
• Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.
• Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at `{typography.display-sm}` regardless of column count.
• The M-stripe divider stays at 4px height across all breakpoints.

Image Behavior

• Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.
• Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.
• The M wordmark + tricolor logo scales proportionally with viewport width.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.spec-cell}`).

2. New components default to `{rounded.none}` (0px). Only use `{rounded.full}` if it's a circular icon button.

3. Variants (`-active`, `-disabled`) live as separate entries in `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Never document hover states. Default and Active/Pressed only.

6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.

7. The M tricolor is brand-identity-only — never extend it to system tokens for "primary action."

8. When in doubt about emphasis: bigger photography before bigger type.

Known Gaps

• The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.
• The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.
• BMW Type Next Latin weight axis values beyond Light (300) and regular (700) are not documented — only the static weights observed in screenshots.
• Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.
• Form validation states beyond `{component.text-input}` defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.
• The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.
• The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.

개요

BMW M의 마케팅 표면은 **확실한 대문자**로 표시된 흰색 BMW Type Next 라틴어 헤드라인을 포함하는 거의 순수한 검정색 캔버스(`{colors.canvas}` — #000)입니다. 시스템에는 자체적인 장식 전압이 없습니다. 브랜드 에너지는 **풀 블리드 자동차 사진**(속도로 코너링하는 자동차, 탄소 섬유 휠 디테일, 운전자 조종석 사진, 모터스포츠 피트 레인)에서 비롯되며 전체 밴드를 채우는 엣지 투 엣지 콘텐츠로 배치됩니다. 사진 주위의 UI 크롬은 최소한으로 유지됩니다. 얇은 산세리프 사본, 1px 가는선(`{colors.hairline}`)으로 구분선, 마우스를 올리기 전까지 채우기가 없는 모두 대문자 버튼 라벨.

**M 삼색 줄무늬** — `{colors.m-blue-light}`(#0066b1) → `{colors.m-blue-dark}`(#1c69d4) → `{colors.m-red}`(#e22718) - M 워드마크, 모터스포츠 크롬, 차량 기술 설명선 및 모델 배지에 사용되는 브랜드의 시그니처 액센트로 드물게 나타납니다. 이는 CTA 색상이 아니며 배경 채우기로 사용되지 않습니다. 삼색은 독점적으로 브랜드 아이덴티티 마커입니다.

Type 음성은 **BMW Type Next Latin**을 두 컷으로 실행합니다. 일반 디스플레이 + 내비게이션 라벨과 Light 바디 + 보조 사본입니다. 디스플레이 크기는 무게 700(BMW 특유의 무겁지만 꽉 조이는 설정)을 사용하고, 차체 유형은 무게 300(가벼움)으로 떨어집니다. 무거운 디스플레이와 가벼운 본체의 대비는 시스템의 편집 시그니처입니다.

**주요 특징:**

• 흰색 유형의 거의 순수한 검정색 캔버스(`{colors.canvas}` — #000). 시스템은 거의 아무것도 반전하지 않습니다. 라이트 모드 마케팅 표면이 없습니다.
• 무게 700에서 대문자 BMW Type Next Latin으로 헤드라인을 표시합니다. 하위 헤드는 더 가벼운 무게로 문장 대소문자를 유지합니다.
• M 삼색(`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`)은 4px 브랜드 스트라이프 구분선, M-워드마크 액센트 및 모터스포츠 크롬으로 사용되며 결코 버튼이나 채우기로 사용되지 않습니다.
• 사진은 전체 밴드를 가장자리에서 가장자리까지 채웁니다. 자동차는 언제나 시각적인 주제입니다. UI 크롬은 사진 위에 겹쳐진 작은 흰색 라벨로 되돌아갑니다.
• 버튼은 `{rounded.none}`(0px) 모서리와 대문자 문자 간격 레이블이 있는 평면입니다. "산업용 정밀" 직사각형 실루엣이 브랜드입니다.
• 경계 반경은 시스템 전반에 걸쳐 대부분 0입니다. 몇 가지 예외: 원형 아이콘 버튼(캐러셀 화살표, 챗봇 런처)의 `{rounded.full}` 및 소수의 작은 토글 알약의 `{rounded.sm}`.
• 간격은 넉넉하고 그리드에 정렬되어 있습니다. 주요 밴드 사이의 `{spacing.section}`(96px); 영웅 사진 밴드 내부의 `{spacing.xxl}`(64px); 콘텐츠 카드 내부의 `{spacing.xl}`(40px).

색상

브랜드 및 액센트

• **기본** (`{colors.primary}` — #ffffff): 시스템의 기본 유형 및 CTA 색상입니다. h1/h2/h3 표시, 어두운 본문 텍스트 및 기본 버튼 라벨에 사용됩니다(버튼 자체는 투명하거나 캔버스 색상입니다. 흰색 텍스트 + 윤곽선이 버튼입니다).
• **M 블루 라이트** (`{colors.m-blue-light}` — #0066b1): M 삼색 줄무늬의 첫 번째 중지점입니다. M 배지 액센트와 모터스포츠 크롬에 사용됩니다.
• **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4): 중간 정지점입니다. `{colors.bmw-blue}`와 동일한 16진수 — BMW의 유산 기업 파란색이며 M 스트라이프의 중간 밴드로 용도가 변경되었습니다.
• **M Red** (`{colors.m-red}` — #e22718): 세 번째 정류장. 스트라이프와 모터스포츠 페이스 콜아웃에 사용되는 시그니처 M-파워 레드입니다.
• **Electric Blue** (`{colors.electric-blue}` — #0653b6): M xDrive 전기 모델 페이지에 사용되는 별도의 전기 자동차 액센트입니다. 헤리티지 블루와는 다르게 더욱 차갑고 디지털적인 느낌을 줍니다.

표면

• **캔버스**(`{colors.canvas}` — #000000): 모든 마케팅 표면의 기본 페이지 바닥입니다. 진정한 검정색.
• **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): 사양 테이블 셀과 바닥글 인접 스트립에 사용되는 검은색과 거의 다르지 않습니다.
• **Surface 카드**(`{colors.surface-card}` — #1a1a1a): 카드, 보조 버튼, 아이콘 버튼 배경.
• **Surface Elevated** (`{colors.surface-elevated}` — #262626): 한 단계 더 가벼워지며, 어두운 밴드 안에 중첩된 카드에 사용됩니다.
• **카본 그레이** (`{colors.carbon-gray}` — #2b2b2b): 기술 사양 카드에 사용되는 탄소 섬유에서 영감을 받은 표면 톤입니다.

가는선 및 테두리

• **헤어라인** (`{colors.hairline}` — #3c3c3c): 어두운 표면의 1px 구분선 톤입니다. 본문 섹션 사이, 테이블 행 사이, 카드 윤곽선 주위에 사용됩니다.
• **Hairline Strong** (`{colors.hairline-strong}` — #262626): `{colors.surface-elevated}`와 동일한 16진수 — 테두리는 먹선이 아니라 한 단계 높이처럼 느껴집니다.

텍스트

• **Ink / On Dark** (`{colors.on-dark}` — #ffffff): 모든 헤드라인과 기본 텍스트는 어두운 캔버스에 표시됩니다.
• **본문**(`{colors.body}` — #bbbbbb): 기본 실행 텍스트 색상(순백색보다 약간 더 차가운 색상). 본문 단락 및 보조 메타데이터에 사용됩니다.
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): 본문/리드 단락을 강조합니다.
• **음소거됨** (`{colors.muted}` — #7e7e7e): 바닥글 링크, 탐색경로, 캡션.

의미론

• **경고** (`{colors.warning}` — #f4b400): tec에서는 매우 드물게 사용됩니다.

概要

BMW M のマーケティング面は、ほぼ純黒のキャンバス (`{colors.canvas}` — #000) で、**自信を持った大文字**で白い BMW Type Next のラテン語見出しが表示されています。システムには独自の装飾電圧はありません。ブランド エネルギーは、**フルブリードの自動車写真** (高速でコーナリングする車、カーボンファイバー ホイールのディテール、ドライバーのコックピット ショット、モータースポーツのピット レーンなど) から生まれ、帯域全体を埋める端から端までのコンテンツとして配置されます。写真周りの UI クロムは最小限のままです。薄いサンセリフのコピー、1 ピクセルのヘアライン (`{colors.hairline}`) としての仕切り、ホバーするまで塗りつぶされないすべて大文字のボタン ラベル。

**M トリコロール ストライプ** — `{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718) — は、ブランドの特徴的なアクセントとして控えめに表示され、M ワードマーク、モータースポーツ クローム、車両技術の吹き出し、およびモデルのバッジに使用されています。トリコロールは決して CTA カラーではなく、背景の塗りつぶしとしても使用されません。トリコロールはもっぱらブランド アイデンティティ マーカーです。

タイプ ボイスは **BMW Type Next Latin** の 2 つのカットで実行されます。ディスプレイ + ナビゲーション ラベル用の通常と、ボディ + セカンダリ コピー用のライトです。ディスプレイのサイズは重量 700 (BMW 特有の重くてタイトな設定) を使用しますが、ボディ タイプは重量 300 (軽量) に下がります。重いディスプレイと軽いボディのコントラストが、このシステムの編集上の特徴です。

**主な特徴:**

• ほぼ純黒のキャンバス (`{colors.canvas}` — #000) と白のタイプ。このシステムはほとんど何も反転しません。ライトモードのマーケティング面はありません。
• 見出しを大文字の BMW Type Next ラテン語でウェイト 700 で表示します。サブヘッドは軽量で文の大文字のままです。
• M トリコロール (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) は、4 ピクセルのブランドストライプの仕切り、M ワードマークのアクセント、およびモータースポーツのクロームとして使用されます。ボタンや塗りつぶしとしては使用されません。
• バンド全体の端から端まで写真が埋め込まれています。車は常に視覚的な主題です。 UI クロムは、写真の上に重ねられた小さな白いラベルに戻ります。
• ボタンは平らで、「{rounded.none}」 (0px) の角と大文字の文字間隔のラベルが付いています。 「工業精密」な長方形のシルエットがブランドです。
• システム全体で境界半径はほとんどゼロです。いくつかの例外があります: 円形アイコン ボタン (カルーセル矢印、チャットボット ランチャー) の `{rounded.full}` と、いくつかの小さなトグル ピルの `{rounded.sm}` です。
• 間隔は広く、グリッドに揃えられています: 主要バンド間の `{spacing.section}` (96px)。ヒーロー写真バンド内の「{spacing.xxl}」（64ピクセル）。コンテンツ カード内の `{spacing.xl}` (40 ピクセル)。

色

ブランドとアクセント

• **プライマリ** (`{colors.primary}` — #ffffff): システムのプライマリ タイプと CTA カラー。 h1/h2/h3 表示、暗い色の本文テキスト、およびプライマリ ボタン ラベルに使用されます (ボタン自体は透明またはキャンバス色です。白いテキスト + アウトラインがボタンです)。
• **M ブルー ライト** (`{colors.m-blue-light}` — #0066b1): M トリコロール ストライプの最初のストップ。 M バッジのアクセントとモータースポーツ クロームに使用されています。
• **M ブルー ダーク** (`{colors.m-blue-dark}` — #1c69d4): 中間の停止。 `{colors.bmw-blue}` と同じヘックス — BMW の伝統的なコーポレート ブルーで、M ストライプの中間バンドとして再利用されます。
• **M Red** (`{colors.m-red}` — #e22718): 3 番目の停留所。特徴的な M パワー レッドは、ストライプとモータースポーツ ペースのコールアウトで使用されています。
• **エレクトリック ブルー** (`{colors.electric-blue}` — #0653b6): M xDrive 電気モデル ページで使用される別の電気自動車のアクセント。伝統的なブルーとは異なり、より冷たく、よりデジタル的に感じられます。

表面

• **キャンバス** (`{colors.canvas}` — #000000): すべてのマーケティング サーフェスにわたるデフォルトのページ フロア。まさに黒。
• **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): スペック テーブルのセルとフッターに隣接するストリップに使用される、黒とほとんど変わらない色。
• **Surface カード** (`{colors.surface-card}` — #1a1a1a): カード、二次ボタン、アイコン ボタンの背景。
• **Surface Elevated** (`{colors.surface-elevated}` — #262626): 1 段階軽くなり、暗いバンド内のネストされたカードに使用されます。
• **カーボン グレー** (`{colors.carbon-gray}` — #2b2b2b): 技術仕様カードで使用されるカーボンファイバー風の表面トーン。

ヘアラインと境界線

• **ヘアライン** (`{colors.hairline}` — #3c3c3c): 暗い表面上の 1 ピクセルの分割トーン。本文セクション間、表の行間、カードのアウトラインの周囲で使用されます。
• **強いヘアライン** (`{colors.hairline-strong}` — #262626): `{colors.surface-elevated}` と同じ 16 進数 — 境界線はインク ラインではなく 1 段階の隆起のように感じられます。

テキスト

• **インク / オン ダーク** (`{colors.on-dark}` — #ffffff): すべての見出しとメイン テキストはダーク キャンバスに表示されます。
• **Body** (`{colors.body}` — #bbbbbb): デフォルトの実行テキストの色 (純粋な白よりわずかに寒色)。本文の段落と二次メタデータに使用されます。
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): 強調された本文/リード段落。
• **ミュート** (`{colors.muted}` — #7e7e7e): フッター リンク、パンくずリスト、キャプション。

セマンティック

• **警告** (`{colors.warning}` — #f4b400): 技術上では非常に控えめに使用されます