BMW

Overview

BMW's corporate site carries a far more **measured, corporate-automotive** interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: `{colors.canvas}` (#ffffff) is the base surface, `{colors.surface-card}` (#fafafa) carries the soft-grey card plates, and dark navy `{colors.surface-dark}` (#1a2129) appears only inside hero bands — one per page, framing the lead model render.

Type runs BMW's licensed **BMW Type Next Latin** at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's "European-engineered" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.

The brand action color, **BMW corporate blue** (`{colors.primary}` — #1c69d4), works alone across every primary CTA — buttons are **rectangular, 0px corner**, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.

The configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.

**Key Characteristics:**

• Light `{colors.canvas}` is the base surface; dark navy `{colors.surface-dark}` appears only inside hero bands — page rhythm relies on contrast.
• BMW corporate blue (`{colors.primary}` — #1c69d4) acts as the single primary action color.
• BMW Type Next Latin: weight 700 display against weight 300 body is the signature.
• Buttons are **rectangular, 0px radius** — corporate dialect, distinct from M's sportier radii.
• Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.
• Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.
• M tricolor stripe appears only in M-model contexts — not part of the corporate language.
• Section rhythm holds at `{spacing.section}` (80px) for every major band.

Colors

Brand & Accent

• **BMW Blue (Primary)** (`{colors.primary}` — #1c69d4): The single brand action color. All primary CTAs, "Learn More" link prefixes (blue text), nav-link active state. Press shifts to `{colors.primary-active}` (#0653b6).
• **M Blue Light** (`{colors.m-blue-light}` — #0066b1) + **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4) + **M Red** (`{colors.m-red}` — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the "M" badge. Never as CTA colors.

Surface

• **Canvas** (`{colors.canvas}` — #ffffff): The default page surface.
• **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Soft grey for the footer and sub-navigation bands.
• **Surface Card** (`{colors.surface-card}` — #fafafa): The light plate behind a model card's photo block.
• **Surface Strong** (`{colors.surface-strong}` — #ebebeb): A slightly heavier grey used as a section divider.
• **Surface Dark** (`{colors.surface-dark}` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): One step lighter, used for nested cards on top of the dark hero.

Hairlines

• **Hairline** (`{colors.hairline}` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.
• **Hairline Strong** (`{colors.hairline-strong}` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.

Text

• **Ink** (`{colors.ink}` — #262626): All display and primary text. Not pure black — soft against photography.
• **Body** (`{colors.body}` — #3c3c3c): Default running text.
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized paragraphs and lead text.
• **Muted** (`{colors.muted}` — #6b6b6b): Footer links, breadcrumbs, captions.
• **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Disabled text, fine-print legal.
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on a blue button.
• **On Dark** (`{colors.on-dark}` — #ffffff): White text on a dark hero band.
• **On Dark Soft** (`{colors.on-dark-soft}` — #bbbbbb): A slightly muted white for secondary text on dark bands.

Semantic

• **Success** (`{colors.success}` — #22c55e): Confirmation messages and "available" indicators.
• **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
• **Error** (`{colors.error}` — #dc2626): Validation errors.

Typography

Font Family

The system runs **BMW Type Next Latin** in two cuts: regular (display + UI labels) and **BMW Type Next Latin Light** (body + secondary copy). Fallback stack: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The display/body split is functional:

• BMW Type Next Latin (700) → display headlines, button labels, nav links
• BMW Type Next Latin Light (300) → paragraphs, descriptive copy
• BMW Type Next Latin (400) → caption, neutral nav-link contexts

This three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.

Hierarchy

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

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

| `{typography.display-xl}` | 64px | 700 | 1.05 | 0 | Hero h1 ("iX3", model name) |

| `{typography.display-lg}` | 48px | 700 | 1.1 | 0 | Section heads |

| `{typography.display-md}` | 32px | 700 | 1.15 | 0 | Sub-section heads |

| `{typography.display-sm}` | 24px | 700 | 1.25 | 0 | CTA-band headlines |

| `{typography.title-lg}` | 20px | 700 | 1.3 | 0 | Card group titles |

| `{typography.title-md}` | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |

| `{typography.title-sm}` | 16px | 700 | 1.4 | 0 | Inventory card title, list label |

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

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

| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |

| `{typography.label-uppercase}` | 13px | 700 | 1.3 | 1.5px | "LEARN MORE" inline links, category tabs |

| `{typography.button}` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |

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

Principles

• The **700/300 contrast** is the editorial signature. Weight 500 is absent from the system.
• **No negative letter-spacing** — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.
• **UPPERCASE inline links** — "LEARN MORE"-style CTAs run uppercase with 1.5px tracking. The "machined precision" voice.
• **Weight 400 lives in a narrow lane** — only caption and nav-link, both neutral utility roles.

Note on Font Substitutes

BMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:

• **Inter** (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.
• **Saira Condensed** — for a slightly more compressed BMW Type feel.

Layout

Spacing System

• **Base unit:** 8px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
• **Section padding:** `{spacing.section}` (80px) for every major editorial band.
• **Card internal padding:** `{spacing.lg}` (24px) for model and feature cards.

Grid & Container

• **Max content width:** ~1440px center-aligned.
• **Editorial body:** A single 12-column grid.
• **Model card grids:** 4-up or 5-up at desktop, 2-up at tablet, 1-up on mobile.
• **Configurator inventory grids:** 3-up filter row + 4-up vehicle cards, dense layout.

Whitespace Philosophy

BMW's whitespace strategy is tighter than BMW M's motorsport-aerated grenadier — the corporate side is more utility-driven. Section rhythm is 80px (not M's 96px). Card padding is 24px (not M's 32px). The page is denser, more dealership-functional.

Elevation & Depth

| Level | Treatment | Use |

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

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

| Soft hairline | 1px `{colors.hairline}` border | Configurator option tile, table divider |

| Card surface | `{colors.surface-card}` background — no shadow | Model card photo plate |

| Photographic | Edge-to-edge photography | Hero band, model renders |

The system never uses a drop shadow. Depth comes entirely from (a) color-block contrast (light canvas vs dark hero) and (b) photographic subject + lighting.

Decorative Depth

• **`m-stripe-divider`** — a 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Not part of the main corporate flow.
• **Photographic depth** — full-bleed vehicle photography (lighting + subject) does the work chrome would otherwise do.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Every button, card, input, configurator chip — the dominant radius |

| `{rounded.xs}` | 2px | Very small badges, very rare |

| `{rounded.sm}` | 4px | Small inline button (rare) |

| `{rounded.md}` | 8px | Mobile-only collapse cards (rare) |

| `{rounded.lg}` | 12px | Very rare — modal/dialog corners |

| `{rounded.pill}` | 9999px | Filter chips in some contexts (rare) |

| `{rounded.full}` | 9999px / 50% | Avatar, circular icon button |

The radius hierarchy is binary: **rectangular for everything, circular only for icon buttons.** A clear departure from the soft-cornered SaaS dialect of Apple or Cal.com — closer to BMW corporate-automotive's "engineered precision" voice.

Photography Geometry

• Hero photography is full-bleed at 16:9 or 21:9 cinematic ratio.
• Model card photos sit at 16:10, edge-to-edge with `{rounded.none}` corners.
• Configurator vehicle renders sit on a white studio background, full silhouette visible.

Components

Top Navigation

**`top-nav`** — A white sticky nav bar pinned to the top of the page. 64px tall, `{colors.canvas}` background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in `{typography.nav-link}` (14px / 400 / 0.3px tracking).

Buttons

**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (BMW Blue #1c69d4), text `{colors.on-primary}`, type `{typography.button}` (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded `{rounded.none}` (0px — rectangular). Press state: `button-primary-active` shifts to `{colors.primary-active}`.

**`button-secondary`** — A white button with a hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border, same padding + height + radius.

**`button-secondary-on-dark`** — Used over a dark hero band. Background transparent, text `{colors.on-dark}`, 1px `{colors.on-dark}` border, same rectangular shape.

**`button-text-link`** — An inline UPPERCASE letter-spaced link. No background, text `{colors.ink}`, type `{typography.label-uppercase}` (13px / 700 / 1.5px tracking). Reads as "LEARN MORE", terminated by a `›` chevron.

**`text-link`** — An inline link inside body copy. `{colors.ink}` text, no underline by default; underlines per context.

Cards & Containers

**`hero-band-dark`** — Full-width dark navy hero. Background `{colors.surface-dark}`, text `{colors.on-dark}`, vertical padding `{spacing.section}` (80px). Centered: model name in `{typography.display-xl}` (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single `{component.button-primary}` (blue) or `{component.button-secondary-on-dark}`.

**`hero-photo-band`** — A light-canvas model showcase band. Background `{colors.canvas}`, text `{colors.ink}`. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.

**`model-card`** — Used in 4-up or 5-up model card grids on the homepage ("BMW iX3", "BMW iX", "BMW 5 Series"). Background `{colors.canvas}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Contents: model render at the top (`{component.model-card-photo}` on `{colors.surface-card}`), model name in `{typography.title-md}` (18px / 700) below, a one-line tagline in `{typography.body-sm}` (14px / 300), and a `{component.button-text-link}` ("LEARN MORE ›").

**`model-card-photo`** — The card's photo plate. Background `{colors.surface-card}` (#fafafa — soft grey), rounded `{rounded.none}`, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.

**`feature-photo-card`** — A feature/lifestyle card. Background `{colors.canvas}`, padding `{spacing.lg}`. 16:9 photo at the top, `{typography.title-md}` headline + body excerpt below.

**`spec-cell`** — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top (`{typography.display-sm}` 24px / 700), label below (`{typography.label-uppercase}`).

Inventory & Configurator

**`inventory-card`** — One card per vehicle on the dealer inventory page. Background `{colors.canvas}`, padding `{spacing.md}` (16px), rounded `{rounded.none}`. Vehicle photo on top, model + variant name + price + "View" link below.

**`filter-chip`** + **`filter-chip-active`** — Inventory filter chips (model, year, price range). Inactive: background `{colors.canvas}`, 1px `{colors.hairline-strong}` border, text `{colors.ink}`, type `{typography.caption}`. Active: background `{colors.ink}`, text `{colors.on-dark}`. Padding 8px × 14px, radius `{rounded.none}`.

**`configurator-option-tile`** + **`configurator-option-tile-selected`** — Configurator selection cell (color, wheels, upholstery). Inactive: background `{colors.canvas}`, 1px hairline. Selected: 2px `{colors.primary}` border. Padding 16px × 24px, radius `{rounded.none}`.

Inputs & Forms

**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.

**`cookie-consent-card`** — Cookie banner. Background `{colors.canvas}`, 1px hairline, padding `{spacing.lg}` (24px), `{typography.body-sm}` (14px / 300 — Light even in legal copy).

Tabs / Tags

**`category-tab`** + **`category-tab-active`** — Category sub-nav. Inactive: transparent + `{colors.muted}` UPPERCASE label. Active: transparent + `{colors.ink}` UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.

Brand Signature

**`m-stripe-divider`** — A 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.

CTA / Footer

**`cta-band-photo`** — A pre-footer "Discover the New iX3"-style band. Background `{colors.surface-dark}` with a full-bleed vehicle photo. Centered headline in `{typography.display-md}` (32px / 700) + a single `{component.button-secondary-on-dark}`. 80px padding.

**`footer`** — The closing soft-grey footer. Background `{colors.surface-soft}` (#f7f7f7 — not pure white — soft grey), text `{colors.body}`. A 4-column link list: Models / Services / Dealers / About. Vertical padding 64px. Below, a copyright line in `{typography.body-sm}` with `{colors.muted}`.

Do's and Don'ts

Do

• Sit every page on `{colors.canvas}` (pure white); reserve `{colors.surface-dark}` for hero bands only.
• Pair primary CTAs with `{colors.primary}` (BMW Blue) + `{colors.on-primary}` white text + `{rounded.none}` 0px corners — the corporate signature.
• Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.
• Use UPPERCASE letter-spaced links like "LEARN MORE" as inline CTAs.
• Place the model card photo on `{colors.surface-card}` with the title beneath — the standard BMW corporate pattern.
• Hold section rhythm at `{spacing.section}` (80px) — tighter than BMW M's 96px.
• Reserve the M tricolor stripe for M-model contexts and motorsport dividers.

Don't

• Don't add a brand color other than blue — BMW Blue is the only primary action color.
• Don't use pill or rounded buttons — `{rounded.none}` (0px) rectangular IS the brand button.
• Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.
• Don't bold body type — Light 300 is the BMW corporate editorial voice.
• Don't add drop shadows to cards — depth comes from photo + color-block contrast.
• Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.
• Don't use the M tricolor stripe as a CTA fill — divider/accent role only.
• Don't mix languages in a single page — UI language must stay consistent.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |

| Tablet | 768–1024px | Top nav narrows, secondary menu hides under "More"; model card 2-up; inventory 2-up |

| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |

| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |

Touch Targets

• `{component.button-primary}` minimum 48 × 48px — above WCAG AAA (44 × 44).
• `{component.text-input}` height 48px.
• Category tabs run with 12px vertical padding, giving an effective tap area > 44px.

Collapsing Strategy

• The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.
• The hero band's internal layout drops to a single column.
• Model card grid 4-up/5-up → 2-up → 1-up.
• The configurator filter chip row scrolls horizontally on mobile.
• The M tricolor stripe stays at 4px height across every breakpoint.

Image Behavior

• Model renders scale at every breakpoint while preserving native aspect ratios.
• Hero photography may shift to a more vertical crop on mobile (art direction).
• Inventory vehicle photos may move from 16:9 to 4:3 on mobile.

Iteration Guide

1. Focus on a single component. Reference its YAML key directly (`{component.model-card}`, `{component.button-primary}`).

2. New components default to `{rounded.none}` (0px). Use `{rounded.full}` only for circular icon buttons.

3. Variants (`-active`, `-disabled`, `-selected`) live as separate entries inside the `components:` block.

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

5. Hover state is never documented. Only Default and Active/Pressed states.

6. Display headlines stay BMW Type Next Latin 700; body stays Light 300; the trio is fixed.

7. Keep UI strings in a single language — match the locale of the page.

Known Gaps

• BMW Type Next Latin is licensed to BMW and not published as a public web font; Inter at weights 700/300 is documented as the substitute.
• Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope here.
• Form validation states beyond `{component.text-input}` focus were not extracted — error/success states would need a dedicated form page.
• The dealer inventory sub-domain shares typography and color with the main corporate site; only UI density rises (filters, tables, prices).
• A cookie consent overlay can occlude part of the hero — the lead hero band content may not be fully captured.
• The M tricolor stripe appears infrequently on this corporate site; full motorsport context lives on the BMW M site.

개요

BMW의 회사 사이트는 모터스포츠의 과격한 사촌인 BMW M보다 훨씬 더 **측정된 기업-자동차** 인터페이스를 제공합니다. 분위기는 밝습니다. `{colors.canvas}`(#ffffff)는 기본 표면이고, `{colors.surface-card}`(#fafafa)는 부드러운 회색 카드 플레이트를 포함하며, 다크 네이비 `{colors.surface-dark}`(#1a2129)는 영웅 밴드 내부에만 나타납니다. 페이지, 리드 모델 렌더링 프레이밍.

Type은 BMW의 라이센스 **BMW Type Next Latin**을 두 가지 무게, 즉 Heavy 700(디스플레이 + 버튼 + 탐색)과 Light 300(본체 + 보조 사본)으로 실행합니다. 얇은 단락 옆의 무거운 디스플레이와 같은 대비는 브랜드의 "유럽 엔지니어링" 목소리를 전달하는 편집 시그니처입니다. 무게 500은 의도적으로 생략되었습니다. 가중치 400은 중립 유틸리티 컨텍스트의 캡션 및 탐색 링크에만 나타납니다.

브랜드 액션 색상인 **BMW Corporate Blue**(`{colors.primary}` — #1c69d4)는 모든 기본 CTA에서 단독으로 작동합니다. 버튼은 **직사각형, 0px 모서리**이며 흰색 유형입니다. 이 사이트는 페이지 리듬에 따라 파란색 버튼 + 다크 네이비 영웅 조합을 회전합니다. M 삼색 줄무늬(`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`)는 모터스포츠 컨텍스트 및 M 모델 배지/분할표로만 표시되며 기업 사이트의 기본 언어에는 표시되지 않습니다.

구성 및 예약 흐름은 동일한 시스템(필터 칩, 모델 카드, 가격표) 위에 딜러 측 재고 UI를 추가하지만 인쇄 체계와 색상은 동일하게 유지됩니다. 밀도만 올라갑니다.

**주요 특징:**

• 밝은 `{colors.canvas}`는 기본 표면입니다. 다크 네이비 `{colors.surface-dark}`는 히어로 밴드 내부에만 나타납니다. 페이지 리듬은 대비에 의존합니다.
• BMW 기업용 파란색(`{colors.primary}` — #1c69d4)은 단일 기본 동작 색상 역할을 합니다.
• BMW 타입 넥스트 라틴 : 무게 700 표시 대비 무게 300 차체가 시그니처입니다.
• 버튼은 **직사각형, 반경 0px**입니다. M의 스포티한 반경과 구별되는 기업 사투리입니다.
• 모델 카드는 가는 선 테두리가 없거나 최소한의 테두리만 있는 4개 또는 5개 그리드로 실행됩니다. 흰색 플레이트 + 사진 + 제목만 있으면 됩니다.
• 사진(모델 렌더링)은 그림자가 없는 환경에 위치합니다. 깊이는 전적으로 색상 블록 대비에서 비롯됩니다.
• M 삼색 줄무늬는 M 모델 컨텍스트에서만 나타나며 기업 언어의 일부는 아닙니다.
• 섹션 리듬은 모든 주요 밴드에 대해 `{spacing.section}`(80px)에 유지됩니다.

색상

브랜드 및 액센트

• **BMW 블루(기본)** (`{colors.primary}` — #1c69d4): 단일 브랜드 액션 색상입니다. 모든 기본 CTA, "자세히 알아보기" 링크 접두어(파란색 텍스트), 탐색 링크 활성 상태. 키를 누르면 `{colors.primary-active}`(#0653b6)로 전환됩니다.
• **M 블루 라이트**(`{colors.m-blue-light}` — #0066b1) + **M 블루 다크**(`{colors.m-blue-dark}` — #1c69d4) + **M 레드**(`{colors.m-red}` — #e22718): M 삼색 줄무늬 — 회사 사이트의 M 모델 페이지와 "M" 배지에만 표시됩니다. CTA 색상으로 사용하지 마십시오.

표면

• **캔버스** (`{colors.canvas}` — #ffffff): 기본 페이지 표면입니다.
• **부드러운 표면** (`{colors.surface-soft}` — #f7f7f7): 바닥글 및 하위 탐색 밴드를 위한 부드러운 회색입니다.
• **Surface Card** (`{colors.surface-card}` — #fafafa): 모델 카드의 사진 블록 뒤에 있는 라이트 플레이트입니다.
• **Surface Strong** (`{colors.surface-strong}` — #ebebeb): 섹션 구분선으로 사용되는 약간 더 무거운 회색입니다.
• **Surface Dark** (`{colors.surface-dark}` — #1a2129): 히어로 밴드와 크고 어두운 CTA를 위한 다크 네이비입니다. 순수한 검정색이 아닌 따뜻한 느낌을 줍니다.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): 한 단계 더 가벼워지며, 어두운 영웅 위에 중첩된 카드에 사용됩니다.

헤어라인

• **헤어라인** (`{colors.hairline}` — #e6e6e6): 1px 구분선 — 입력 개요, 구성 카드 개요, 표 구분 기호입니다.
• **Hairline Strong** (`{colors.hairline-strong}` — #cccccc): 더 눈에 띄는 1px 윤곽선 — 보조 버튼이 비활성화되고 표 테두리가 강조되었습니다.

텍스트

• **잉크**(`{colors.ink}` — #262626): 모든 표시 및 기본 텍스트. 순수한 검정색이 아닙니다. 사진에 비해 부드럽습니다.
• **본문**(`{colors.body}` — #3c3c3c): 기본 실행 텍스트입니다.
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): 강조된 단락과 리드 텍스트입니다.
• **음소거됨** (`{colors.muted}` — #6b6b6b): 바닥글 링크, 탐색경로, 캡션.
• **음소거된 소프트**(`{colors.muted-soft}` — #9a9a9a): 텍스트가 비활성화되고 법적으로 작은 글씨로 인쇄됩니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): 파란색 버튼에 흰색 텍스트입니다.
• **On Dark** (`{colors.on-dark}` — #ffffff): 어두운 영웅 밴드의 흰색 텍스트입니다.
• **어두운 부드러움**(`{colors.on-dark-soft}` — #bbbbbb): 어두운 띠의 보조 텍스트에 대해 약간 음소거된 흰색입니다.

의미론

• **성공** (`{colors.success}` — #22c55e): 확인 메시지 및 "사용 가능" 표시기.
• **경고** (`{colors.warning}` — #f59e0b): 경고 문구.
• **오류** (`{colors.error}` — #dc2626): 유효성 검사 오류입니다.

타이포그래피

글꼴 계열

시스템은 일반(디스플레이 + UI 라벨) 및 **BMW Type Next Latin Light*의 두 가지 컷으로 **BMW Type Next Latin**을 실행합니다.

概要

BMW のコーポレート サイトは、モータースポーツを大々的に展開する BMW M よりも、はるかに **慎重で自動車企業向け**のインターフェイスを備えています。雰囲気は明るいです。`{colors.canvas}` (#ffffff) がベース サーフェス、`{colors.surface-card}` (#fafafa) がソフト グレーのカード プレートを持ち、ダーク ネイビーの `{colors.surface-dark}` (#1a2129) が内側にのみ表示されます。ヒーロー バンド — ページごとに 1 つ、リード モデルのレンダリングを構成します。

Type は、BMW のライセンスを取得した **BMW Type Next Latin** を、ヘビー 700 (ディスプレイ + ボタン + ナビ) とライト 300 (ボディ + セカンダリ コピー) の 2 つのウェイトで実行します。そのコントラスト、薄い段落の隣に重厚な表示があり、それが編集者の特徴であり、ブランドの「ヨーロッパで設計された」声を伝えています。ウェイト 500 は意図的に省略されています。ウェイト 400 は、ニュートラル ユーティリティ コンテキストのキャプションとナビゲーション リンクにのみ表示されます。

ブランド アクション カラーである **BMW コーポレート ブルー** (`{colors.primary}` — #1c69d4) は、すべてのプライマリ CTA で単独で機能します。ボタンは **長方形、0px コーナー**、白色タイプです。このサイトでは、青いボタンとダークネイビーのヒーローの組み合わせがページのリズム全体でローテーションされています。 M トリコロール ストライプ (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`) は、モータースポーツの文脈および M モデルのバッジ/仕切りとしてのみ表示され、企業サイトのメイン言語には表示されません。

構成と予約のフローにより、フィルター チップ、モデル カード、価格表などの同じシステム上にディーラー側の在庫 UI が追加されますが、タイポグラフィと色は同一のままです。密度だけが上がります。

**主な特徴:**

• ライト `{colors.canvas}` はベース サーフェスです。ダークネイビーの「{colors.surface-dark}」はヒーローバンドの内側にのみ表示されます。ページのリズムはコントラストに依存します。
• BMW コーポレート ブルー (`{colors.primary}` — #1c69d4) は、単一のプライマリ アクション カラーとして機能します。

●BMW Type Next Latin：重量300のボディに対して重量700の表示が特徴です。

• ボタンは **長方形、半径 0px** です。これは企業の方言であり、M のスポーティな半径とは異なります。
• モデル カードは、ヘアラインの境界線がない、または最小限の境界線のみ (白いプレート + 写真 + タイトルのみ) の 4 アップまたは 5 アップのグリッドとして実行されます。
• 写真 (モデルのレンダリング) は環境内にあり、影はありません。奥行きは完全にカラーブロックのコントラストから生まれます。
• M トリコロール ストライプは M モデルのコンテキストでのみ表示され、企業言語の一部ではありません。
• セクションのリズムは、主要なバンドごとに `{spacing.section}` (80px) で保持されます。

色

ブランドとアクセント

• **BMW ブルー (プライマリー)** (`{colors.primary}` — #1c69d4): 単一のブランド アクション カラー。すべてのプライマリ CTA、「詳細」リンク プレフィックス (青色のテキスト)、ナビゲーション リンクのアクティブ状態。 Shift キーを押して「{colors.primary-active}」に移動します (#0653b6)。
• **M ブルー ライト** (`{colors.m-blue-light}` — #0066b1) + **M ブルー ダーク** (`{colors.m-blue-dark}` — #1c69d4) + **M レッド** (`{colors.m-red}` — #e22718): M トリコロール ストライプ — は企業サイトの M モデル ページと「M」バッジにのみ表示されます。決してCTAカラーとしては使用しないでください。

表面

• **キャンバス** (`{colors.canvas}` — #ffffff): デフォルトのページ表面。
• **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): フッターとサブナビゲーション バンドのソフト グレー。
• **Surface Card** (`{colors.surface-card}` — #fafafa): モデル カードの写真ブロックの後ろにあるライト プレート。
• **Surface Strong** (`{colors.surface-strong}` — #ebebeb): セクションの区切りとして使用されるわずかに重いグレー。
• **Surface Dark** (`{colors.surface-dark}` — #1a2129): ヒーロー バンドおよび大きなダーク CTA 用のダーク ネイビー。純粋な黒ではなく、温かみのある色合いを持っています。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): 1 段階軽くなり、ダーク ヒーローの上にネストされたカードに使用されます。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #e6e6e6): 1px ディバイダー — 入力アウトライン、コンフィギュレーター カード アウトライン、テーブル セパレーター。
• **強いヘアライン** (`{colors.hairline-strong}` — #cccccc): より見やすくなった 1 ピクセルのアウトライン — 二次ボタンを無効にし、表の境界線を強調しました。

テキスト

• **インク** (`{colors.ink}` — #262626): すべての表示テキストとプライマリ テキスト。純粋な黒ではなく、写真に対して柔らかいです。
• **本文** (`{colors.body}` — #3c3c3c): デフォルトの実行テキスト。
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): 段落とリード テキストを強調しました。
• **ミュート** (`{colors.muted}` — #6b6b6b): フッター リンク、パンくずリスト、キャプション。
• **ミュート ソフト** (`{colors.muted-soft}` — #9a9a9a): 無効なテキスト、細字は合法です。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): 青いボタンに白いテキスト。
• **オン ダーク** (`{colors.on-dark}` — #ffffff): ダーク ヒーロー バンドに白いテキスト。
• **オン ダーク ソフト** (`{colors.on-dark-soft}` — #bbbbbb): ダーク バンド上の二次テキストのわずかに落ち着いた白。

セマンティック

• **成功** (`{colors.success}` — #22c55e): 確認メッセージと「利用可能」インジケーター。
• **警告** (`{colors.warning}` — #f59e0b): 警告コールアウト。
• **エラー** (`{colors.error}` — #dc2626): 検証エラー。

タイポグラフィー

フォントファミリー

システムは **BMW Type Next Latin** を 2 つのカットで実行します: 通常 (表示 + UI ラベル) と **BMW Type Next Latin Light*