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보다 훨씬 더 **측정된 기업-자동차** 인터페이스를 제공합니다. 분위기는 밝습니다. ``(#ffffff)은 베이스 표면이고, ``(#fafafa)은 부드러운 회색 카드 플레이트를 담고 있으며 짙은 남색입니다. ``(#1a2129)은 히어로 밴드 내부에만 나타납니다(페이지당 하나씩, 리드 모델 렌더링 프레임 지정).

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

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

• **BMW 블루(기본)** (`` — #1c69d4): 단일 브랜드 액션 색상입니다. 모든 기본 CTA, "자세히 알아보기" 링크 접두어(파란색 텍스트), 탐색 링크 활성 상태. 키를 누르면 ``(#0653b6)로 이동합니다.
• **M 블루 라이트** (`` — #0066b1) + **M 블루 다크** (`` — #1c69d4) + **M 레드** (`` — #e22718): M 삼색 줄무늬 — 회사 로고에 나타납니다. M 모델 페이지와 "M" 배지에만 있는 사이트입니다. CTA 색상으로 사용하지 마세요.

표면

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

헤어라인

• **가는 선** (`` — #e6e6e6): 1px 구분선 — 입력 개요, 구성 카드 개요, 테이블 구분 기호.
• **가는 선이 강함** (`` — #cccccc): 더 눈에 띄는 1px 윤곽선 — 보조 버튼이 비활성화되고 표 테두리가 강조되었습니다.

텍스트

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

의미

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

타이포그래피

글꼴군

시스템은 일반(디스플레이 + UI 라벨) 및 **BMW Type Next Latin Light**(본문 + 보조 사본)의 두 컷으로 **BMW Type Next Latin**을 실행합니다. 대체 스택: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

디스플레이/본문 분할이 작동합니다.

• BMW 다음 라틴어(700) 입력 → 헤드라인, 버튼 라벨, 탐색 링크 표시
• BMW 유형 다음 라틴 라이트(300) → 단락, 설명 사본
• BMW 유형 다음 라틴어(400) → 캡션, 중립 탐색 링크 컨텍스트

이 3방향 분할 미러는 BMW M을 반영합니다. 기업 및 M 하위 브랜드는 동일한 인쇄상의 DNA를 공유합니다. 무게/크기 비율만 다릅니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 64px | 700 | 1.05 | 0 | 히어로 h1 ("iX3", 모델명) |

| _`` | 48px | 700 | 1.1 | 0 | 섹션 헤드 |

| _`` | 32px | 700 | 1.15 | 0 | 하위 섹션 머리글 |

| _`` | 24px | 700 | 1.25 | 0 | CTA 밴드 헤드라인 |

| _`` | 20픽셀 | 700 | 1.3 | 0 | 카드 그룹 제목 |

| _`` | 18px | 700 | 1.4 | 0 | 모델 카드 제목, 소개 단락 |

| _`` | 16px | 700 | 1.4 | 0 | 재고 카드 제목, 목록 라벨 |

| _`` | 16px | 300(라이트) | 1.55 | 0 | 기본 차체 — BMW 타입 넥스트 라틴 라이트 |

| _`` | 14px | 300(라이트) | 1.55 | 0 | 바닥글 본문, 작은 글씨 |

| _`` | 12px | 400 | 1.4 | 0.5픽셀 | 사진 캡션, 메타 |

| _`` | 13px | 700 | 1.3 | 1.5픽셀 | "자세히 알아보기" 인라인 링크, 카테고리 탭 |

| _`` | 14px | 700 | 1.0 | 0.5픽셀 | 표준 CTA 버튼 라벨 |

| _`` | 14px | 400 | 1.4 | 0.3px | 상단 탐색 메뉴 항목 |

원칙

• **700/300 대비**는 편집자의 서명입니다. 무게 500이 시스템에 없습니다.
• **음수 문자 간격 없음** — BMW Type Next Latin은 넓은 차체에서 작동하므로 추적이 기본으로 유지됩니다. Apple/Cal.com 스타일의 조임은 여기에서 브랜드 외적인 것으로 읽혀집니다.
• **대문자 인라인 링크** — "자세히 알아보기" 스타일 CTA는 1.5px 추적으로 대문자를 실행합니다. "가공된 정밀" 음성.
• **Weight 400은 좁은 차선에 살고 있습니다** — 캡션과 탐색 링크만 있으며 둘 다 중립적인 유틸리티 역할입니다.

글꼴 대체에 대한 참고사항

BMW Type Next Latin은 라이센스가 부여된 BMW 서체입니다. 오픈 소스 대안:

• **인터**(변수) — 가중치 700/300에서 거의 일치합니다. 문자 간격은 0.0em로 유지합니다.
• **Saira Condensed** — 약간 더 압축된 BMW 유형의 느낌을 줍니다.

레이아웃

간격 시스템

• **기본 단위:** 8px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 80px.
• **섹션 패딩:** 모든 주요 편집 밴드에 대해 ``(80px).
• **카드 내부 패딩:** 모델 및 기능 카드의 경우 ``(24px).

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 중앙 정렬 ~1440px.
• **편집 본문:** 단일 12열 그리드.
• **모델 카드 그리드:** 데스크톱에서는 4개 또는 5개, 태블릿에서는 2개, 모바일에서는 1개.
• **구성기 인벤토리 그리드:** 3업 필터 행 + 4업 차량 카드, 조밀한 레이아웃.

공백 철학

BMW의 공백 전략은 BMW M의 모터스포츠용 척탄병보다 더 엄격합니다. 기업 측면은 유틸리티 중심입니다. 섹션 리듬은 80px입니다(M의 96px 아님). 카드 패딩은 24px입니다(M의 32px 아님). 페이지가 더 조밀하고 대리점 기능이 더 풍부해졌습니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문, 상단 탐색, 바닥글, 히어로 밴드 |

| 부드러운 헤어라인 | 1px `` 테두리 | 구성기 옵션 타일, 테이블 구분선 |

| 카드 표면 | `` 배경 — 그림자 없음 | 모델카드 사진판 |

| 사진 | 엣지 투 엣지 사진 | 히어로 밴드, 모델 렌더링 |

시스템은 그림자를 사용하지 않습니다. 깊이는 전적으로 (a) 색상 블록 대비(밝은 캔버스 대 어두운 영웅) 및 (b) 사진 피사체 + 조명에서 비롯됩니다.

장식적 깊이

• **`m-stripe-divider`** — 4px 높이의 가로 삼색 줄무늬(`` → `` → ``). M 모델 컨텍스트, 모터스포츠 배지 또는 M 관련 섹션 구분선으로만 사용됩니다. 주요 기업 흐름의 일부가 아닙니다.
• **사진 깊이** — 풀 블리드 차량 사진(조명 + 피사체)은 크롬이 할 수 있는 작업을 수행합니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 모든 버튼, 카드, 입력, 구성 칩 — 주요 반경 |

| _`` | 2픽셀 | 매우 작은 배지, 매우 드물음 |

| _`` | 4픽셀 | 작은 인라인 버튼(드물게) |

| _`` | 8픽셀 | 모바일 전용 축소 카드(드물게) |

| _`` | 12px | 매우 드물다 — 모달/대화 상자 모서리 |

| _`` | 9999px | 일부 상황의 필터 칩(드물게) |

| _`` | 9999px / 50% | 아바타, 원형 아이콘 버튼 |

반경 계층 구조는 이진법입니다. **모든 것은 직사각형이고 아이콘 버튼만 원형입니다.** Apple이나 Cal.com의 소프트 코너 SaaS 방언에서 확실히 벗어났습니다. — BMW 기업 자동차의 "엔지니어링 정밀성" 목소리에 더 가깝습니다.

사진 기하학

• 영웅 사진은 16:9 또는 21:9 영화 비율로 풀블리드됩니다.
• 모델 카드 사진은 16:10 비율로, 모서리가 `` 모서리와 맞닿아 있습니다.
• 구성기 차량 렌더링은 흰색 스튜디오 배경에 있으며 전체 실루엣이 표시됩니다.

구성요소

상단 탐색

**`top-nav`** — 페이지 상단에 고정된 흰색 고정 탐색 모음입니다. 높이 64px, `` 배경. 왼쪽: BMW 원형 배지 로고; 중앙: 기본 가로 메뉴(모델, 차세대, 중고, 딜러, 테스트 드라이브); 오른쪽: 장바구니 아이콘, 언어 선택기, 프로필. 메뉴 항목은 ``(14px / 400 / 0.3px 추적)으로 렌더링됩니다.

버튼

**`button-primary`** — 서명 기본 CTA입니다. 배경 ``(BMW 파란색 #1c69d4), 텍스트 ``, 유형 ``(BMW Type Next Latin 14px / 700 / 0.5px 추적), 패딩 14px × 32px, 높이 48px, 반올림 ``(0px) — 직사각형). 프레스 상태: `button-primary-active`이 ``로 이동합니다.

**`button-secondary`** — 가는 윤곽선이 있는 흰색 버튼입니다. 배경 ``, 텍스트 ``, 1px `` 테두리, 동일한 패딩 + 높이 + 반경.

**`button-secondary-on-dark`** — 다크 히어로 밴드에 사용됩니다. 배경 투명, 텍스트 ``, 1px `` 테두리, 동일한 직사각형 모양.

**`button-text-link`** — 인라인 대문자 간격의 링크입니다. 배경 없음, 텍스트 ``, 유형 ``(13px/700/1.5px 추적) "자세히 알아보기"로 읽으며 `›` 갈매기형 문자로 끝납니다.

_**`text-link`** — 본문 사본 내부의 인라인 링크입니다. `` 텍스트, 기본적으로 밑줄 없음; 문맥당 밑줄.

카드 및 용기

**`hero-band-dark`** — 전폭 다크 네이비 영웅. 배경 ``, 텍스트 ``, 세로 패딩 ``(80px). 중앙: ``(64px/700) + 하위 헤드라인 + 차량 렌더링(오른쪽 정렬 또는 아래)의 모델 이름. 단일 ``(파란색) 또는 ``.

**`hero-photo-band`** — 라이트 캔버스 모델 쇼케이스 밴드. 배경 ``, 텍스트 ``. 차량 렌더링은 넓은 영역을 차지합니다. 오른쪽 또는 아래, 헤드라인 + 두 개의 링크 CTA + 하위 태그라인.

**`model-card`** — 홈페이지의 4-up 또는 5-up 모델 카드 그리드에 사용됩니다("BMW iX3", "BMW iX", "BMW 5 시리즈"). 배경 ``, 둥근 ``, 패딩 ``(24px). 내용: 상단의 모델 렌더링(`` on ``), 모델 이름(아래 ``(18px/700)), ``(14px/300)의 한 줄 태그라인 및 ``("자세히 알아보기 ›").

**`model-card-photo`** — 카드의 사진판입니다. 배경 `` (#fafafa — 부드러운 회색), 둥근 ``, 전체 실루엣의 차량 렌더링. 제로 패딩 — 사진이 가장자리에서 가장자리까지 이어집니다.

**`feature-photo-card`** — 기능/라이프스타일 카드. 배경 ``, 패딩 ``. 상단은 16:9 사진, 하단은 `` 헤드라인 + 본문 발췌

**`spec-cell`** — 기술 사양 셀(모델 세부정보 페이지)입니다. 가는선 구분선으로 구분된 투명한 배경입니다. 상단의 값(`` 24px / 700), 하단의 라벨(``).

인벤토리 및 구성자

**`inventory-card`** — 딜러 인벤토리 페이지에 차량당 카드 한 장이 있습니다. 배경 ``, 패딩 ``(16px), 반올림 ``. 상단의 차량 사진, 하단의 모델 + 변형 이름 + 가격 + "보기" 링크.

**`filter-chip`** + **`filter-chip-active`** — 재고 필터 칩(모델, 연도, 가격대). 비활성: 배경 ``, 1px `` 테두리, 텍스트 ``, 유형 ``. 활성: 배경 ``, 텍스트 ``. 패딩 8px × 14px, 반경 ``.

**`configurator-option-tile`** + **`configurator-option-tile-selected`** — 구성자 선택 셀(색상, 바퀴, 실내 장식품). 비활성: 배경 ``, 1px 가는선. 선택됨: 2px `` 테두리. 패딩 16px × 24px, 반경 ``.

입력 및 양식

**`text-input`** — 표준 텍스트 입력. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``(0px), 패딩 14px × 16px, 높이 48px, 가는선 테두리 1px. 초점이 맞춰지면 테두리가 잉크로 두꺼워집니다.

**`cookie-consent-card`** — 쿠키 배너. 배경 ``, 1px 헤어라인, 패딩 ``(24px), ``(14px / 300 - 법적 사본에서도 가벼움).

탭/태그

**`category-tab`** + **`category-tab-active`** — 카테고리 하위 탐색. 비활성: 투명 + `` 대문자 라벨. 활성: 투명 + `` 대문자 라벨 + 2px 잉크 밑줄. 12px 수직 패딩, 수평 반경 없음.

브랜드 시그니처

**`m-stripe-divider`** — 4px 높이의 가로 삼색 줄무늬(`` → `` → ``). M 모델 컨텍스트, 모터스포츠 배지 또는 M 관련 섹션 구분선으로만 사용됩니다. 기업의 주요 흐름이 없습니다. M 모델 상세 페이지와 M 성능 배지에서 인라인 구분선 역할을 합니다.

CTA/바닥글

_**`cta-band-photo`** — 앞부분의 "새로운 iX3 살펴보기" 스타일 밴드. 풀 블리드 차량 사진이 포함된 배경 ``. ``(32px/700) + 단일 ``의 중앙 헤드라인. 80px 패딩.

**`footer`** — 닫는 부드러운 회색 바닥글입니다. 배경 ``(#f7f7f7 — 순백색 아님 — 부드러운 회색), 텍스트 ``. 4열 링크 목록: 모델 / 서비스 / 딜러 / 정보. 수직 패딩 64px. 아래에는 ``의 저작권 줄과 ``.

이 있습니다.

해야 할 일과 하지 말아야 할 일

하라

• 모든 페이지를 ``(순백색)에 배치합니다. 영웅 밴드 전용으로 ``을 예약하세요.
• 기본 CTA를 ``(BMW 파란색) + `` 흰색 텍스트 + `` 0px 모서리(회사 서명)와 페어링합니다.
• BMW Type Next Latin 700에 디스플레이 헤드라인을 설정하고 Light 300에 차체를 설정합니다. 대비는 타협할 수 없습니다.
• 인라인 CTA로 "자세히 알아보기"와 같은 대문자 간격의 링크를 사용하세요.
• 표준 BMW 기업 패턴인 제목과 함께 모델 카드 사진을 ``에 배치하세요.
• ``(80px)에서 섹션 리듬을 유지하세요. — BMW M의 96px보다 촘촘합니다.
• M 모델 컨텍스트 및 모터스포츠 구분선을 위해 M 삼색 스트라이프를 예약합니다.

하지 마세요

• 파란색 이외의 브랜드 색상을 추가하지 마세요. BMW 파란색이 유일한 기본 액션 색상입니다.
• 알약 모양이나 둥근 버튼을 사용하지 마세요. — ``(0px) 직사각형이 브랜드 버튼입니다.
• 표시 무게를 500으로 낮추지 마십시오. 시스템은 700/400/300을 사용합니다. 500이 없습니다.
• 굵은 체형을 사용하지 마세요. Light 300은 BMW 기업 편집자의 목소리입니다.
• 카드에 그림자를 추가하지 마세요. 깊이는 사진 + 색상 블록 대비에서 나옵니다.
• 밝은 → 어두운 히어로 → 밝은 → 밝은 기능 → 어두운 CTA → 밝은 바닥글 회전 등 두 개의 연속 밴드에 걸쳐 동일한 표면 모드를 반복하지 마세요.
• M 삼색 줄무늬를 CTA 채우기로 사용하지 마세요. 구분선/악센트 역할만 사용하세요.
• 한 페이지에 언어를 혼합하지 마세요. UI 언어는 일관성을 유지해야 합니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

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

| 태블릿 | 768~1024px | 상단 탐색 메뉴가 좁아지고, 보조 메뉴가 '더 보기' 아래에 숨겨집니다. 모델 카드 2업; 인벤토리 2업 |

| 데스크탑 | 1024~1440px | 전체 상단 탐색; 4-up 또는 5-up 모델 카드 그리드; 재고 3-up; 전체 구성 UI |

| 와이드 | > 1440px | 데스크톱과 동일하며 콘텐츠는 1440px로 고정됩니다. 배수구가 나머지를 흡수합니다 |

터치 대상

• `` 최소 48 × 48px — WCAG AAA(44 × 44) 이상.
• `` 높이 48px.
• 범주 탭은 12px 수직 패딩으로 실행되어 44px보다 큰 유효 탭 영역을 제공합니다.

축소 전략

• 상단 탐색 메뉴가 768px 미만의 햄버거로 축소됩니다. 메뉴가 전체 화면 시트로 열립니다.
• 히어로 밴드의 내부 레이아웃은 단일 열로 축소됩니다.
• 모델 카드 그리드 4등분/5등분 → 2등분 → 1등분.
• 구성자 필터 칩 행은 모바일에서 가로로 스크롤됩니다.
• M 삼색 줄무늬는 모든 중단점에서 4픽셀 높이로 유지됩니다.

이미지 동작

• 모델은 기본 종횡비를 유지하면서 모든 중단점에서 크기를 렌더링합니다.
• 영웅 사진은 모바일(아트 디렉션)에서 수직 자르기로 전환될 수 있습니다.
• 인벤토리 차량 사진은 모바일에서 16:9에서 4:3으로 이동할 수 있습니다.

반복 가이드

1. 단일 구성요소에 집중하세요. YAML 키를 직접 참조합니다(``, ``).

2. 새 구성 요소의 기본값은 ``(0px)입니다. 원형 아이콘 버튼에만 ``을 사용하세요.

3. 변형(`-active`, `-disabled`, `-selected`)은 `components:` 블록 내에 별도의 항목으로 존재합니다.

4. `` 어디서나 — 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않습니다. 기본 및 활성/누름 상태만 가능합니다.

6. 디스플레이 헤드라인은 BMW Type Next Latin 700으로 유지됩니다. 바디 스테이 라이트 300; 트리오가 수정되었습니다.

7. UI 문자열을 단일 언어로 유지하세요. 페이지의 로케일과 일치하세요.

알려진 격차

• BMW Type Next Latin은 BMW에 라이센스가 부여되었으며 공개 웹 글꼴로 게시되지 않습니다. 가중치 700/300의 인테르가 대체 선수로 기록되어 있습니다.
• 애니메이션 및 전환 타이밍(구성기 색상 교체, 모델 카드 가리키기 표시)은 여기서 범위를 벗어납니다.
• `` 초점을 벗어난 양식 유효성 검사 상태는 추출되지 않았습니다. 오류/성공 상태에는 전용 양식 페이지가 필요합니다.
• 딜러 인벤토리 하위 도메인은 기본 회사 사이트와 인쇄 체계 및 색상을 공유합니다. UI 밀도만 상승합니다(필터, 테이블, 가격).
• 쿠키 동의 오버레이는 영웅의 일부를 가릴 수 있습니다. 주요 영웅 밴드 콘텐츠가 완전히 캡처되지 않을 수 있습니다.
• M 삼색 줄무늬는 이 회사 사이트에 자주 표시되지 않습니다. 전체 모터스포츠 관련 정보는 BMW M 사이트에 있습니다.

概要

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

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

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

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

**主な特徴:**

• Light `` はベース サーフェスです。ダークネイビー `` はヒーローバンド内にのみ表示されます — ページのリズムはコントラストに依存します。
• BMW コーポレート ブルー (`` — #1c69d4) は、単一の主要なアクション カラーとして機能します。
• BMW タイプ ネクスト ラテン: 重量 300 のボディに対して重量 700 の表示が特徴です。
• ボタンは **長方形、半径 0 ピクセル** - 企業の方言であり、M のスポーティな半径とは異なります。
• モデル カードは、ヘアラインの境界線がない、または最小限の境界線のみの 4 アップまたは 5 アップのグリッドとして実行されます (白いプレート + 写真 + タイトルのみ)。
• 写真 (モデルのレンダリング) は環境内にあり、影はありません。奥行きは完全にカラーブロックのコントラストから生まれます。
• M トリコロール ストライプは、M モデルのコンテキストでのみ表示されます。企業言語の一部ではありません。
• セクションのリズムは、すべての主要バンドで__CODEBCK_636___ (80ピクセル) に保持されます。

色

ブランドとアクセント_

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

表面

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

ヘアライン

• **ヘアライン** (`` — #e6e6e6): 1 ピクセルの分割線 — 入力アウトライン、コンフィギュレーター カード アウトライン、テーブル区切り記号。
• **ヘアライン ストロング** (`` — #cccccc): より見やすくなった 1 ピクセルのアウトライン — 副ボタンが無効になり、表の境界線が強調されました。

テキスト

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

セマンティック

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

タイポグラフィ

フォント ファミリー

システムは **BMW Type Next Latin** を、通常 (ディスプレイ + UI ラベル) と **BMW Type Next Latin Light** (本体 + セカンダリ コピー) の 2 つのカットで実行します。 フォールバック スタック: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

ディスプレイと本文の分割は機能します:

• BMW Type Next Latin (700) → 見出し、ボタン ラベル、ナビゲーション リンクを表示
• BMW Type Next Latin Light (300) → 段落、説明コピー
• BMW Type Next Latin (400) → キャプション、ニュートラル ナビゲーション リンク コンテキスト

この 3 方向の分割は BMW M を反映しています。企業と M サブブランドは同じタイポグラフィー DNA を共有しています。重量とサイズの比率のみが異なります。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 64ピクセル | 700 | 1.05 | 0 | Hero h1 (「iX3」、モデル名) |

| `` | 48ピクセル | 700 | 1.1 | 0 |セクションヘッド |

| `` | 32ピクセル | 700 | 1.15 | 0 |サブセクションの見出し |

| `` | 24ピクセル | 700 | 1.25 | 0 | CTA バンドの見出し |

| `` | 20ピクセル | 700 | 1.3 | 0 |カード グループのタイトル |

| `` | 18ピクセル | 700 | 1.4 | 0 |モデル カードのタイトル、紹介文 |

| `` | 16ピクセル | 700 | 1.4 | 0 |在庫カードのタイトル、リストのラベル |

| `` | 16ピクセル | 300 (ライト) | 1.55 | 0 |デフォルトのボディ — BMW タイプ ネクスト ラテン ライト |

| `` | 14ピクセル | 300 (ライト) | 1.55 | 0 |フッター本文、細字 |

| `` | 12ピクセル | 400 | 1.4 | 0.5ピクセル |写真キャプション、メタ |

| `` | 13ピクセル | 700 | 1.3 | 1.5ピクセル | 「詳細」インライン リンク、カテゴリ タブ |

| `` | 14ピクセル | 700 | 1.0 | 0.5ピクセル |標準 CTA ボタン ラベル |

| `` | 14ピクセル | 400 | 1.4 | 0.3ピクセル |トップナビゲーションのメニュー項目 |

原則

• **700/300 コントラスト** は編集者の特徴です。ウェイト 500 がシステムにありません。
• **負の文字間隔なし** — BMW Type Next Latin はワイド ボディで動作するため、トラッキングはデフォルトのままです。ここでは、Apple/Cal.com スタイルの厳格化がブランドから外れています。
• **大文字のインライン リンク** — 「詳細を見る」スタイルの CTA は、1.5 ピクセルのトラッキングで大文字で実行されます。 「機械加工された精密さ」の声。
• **ウェイト 400 は狭い路地に住んでいます** — キャプションとナビゲーション リンクのみであり、どちらも中立的なユーティリティの役割です。

フォントの代替に関する注意

BMW Type Next Latin は、BMW のライセンスを受けた書体です。オープンソースの代替案:

• **Inter** (変数) — ウェイト 700/300 でほぼ一致します。 文字間隔は 0.0em のままにしておきます。
• **Sira Condensed** — わずかに圧縮された BMW タイプの感触を実現します。

レイアウト

間隔システム

• **基本単位:** 8 ピクセル。
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 80px.
• **セクション パディング:** 主要な編集バンドごとに `` (80 ピクセル)。
• **カードの内部パディング:** モデル カードとフィーチャー カードの場合は `` (24 ピクセル)。

グリッドとコンテナ

• **コンテンツの最大幅:** ~1440px 中央揃え。
• **編集本文:** 単一の 12 列グリッド。
• **モデル カード グリッド:** デスクトップでは 4 アップまたは 5 アップ、タブレットでは 2 アップ、モバイルでは 1 アップ。
• **コンフィギュレーター インベントリ グリッド:** 3 つのフィルター行 + 4 つの車両カード、高密度のレイアウト。

ホワイトスペースの哲学

_BMW のホワイトスペース戦略は、BMW M のモータースポーツを意識した擲弾兵よりも厳しく、企業側はより公益事業主導型です。セクションリズムは80pxです（Mの96pxではありません）。カードのパディングは 24 ピクセルです (M の 32 ピクセルではありません)。ページはより密度が高く、ディーラーとしての機能がさらに強化されました。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |本文、トップナビゲーション、フッター、ヒーローバンド |

|柔らかいヘアライン | 1px `` 境界線 |コンフィギュレータ オプション タイル、テーブル ディバイダ |

|カード表面 | `` 背景 — 影なし |モデルカード写真プレート |

|写真 |端から端までの写真 |ヒーロー バンド、モデルのレンダリング |

システムはドロップ シャドウを使用しません。奥行きは、(a) カラーブロックのコントラスト (ライト キャンバスとダーク ヒーロー) および (b) 写真の被写体 + 照明によってもたらされます。

装飾の深さ

• **`m-stripe-divider`** — 高さ 4 ピクセルの水平三色ストライプ (`` → `` → ``)。 M モデルのコンテキスト、モータースポーツのバッジ、または M 関連のセクションの仕切りとしてのみ。 主要な企業フローの一部ではありません。
• **写真の深度** — フルブリードの車両写真 (照明 + 被写体) は、Chrome で行われる機能を果たします。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |すべてのボタン、カード、入力、コンフィギュレーター チップ — 主要な半径 |

| `` | 2ピクセル |非常に小さなバッジ、非常に珍しい |

| `` | 4ピクセル |小さなインライン ボタン (まれ) |

| `` | 8ピクセル |モバイル専用の折りたたみカード (レア) |

| `` | 12ピクセル |非常にまれです — モーダル/ダイアログ コーナー |

| `` | 9999ピクセル |一部のコンテキストでチップをフィルタリングする (まれ) |

| `` | 9999ピクセル / 50% |アバター、円形アイコン ボタン |

半径階層はバイナリです: **すべてが長方形、アイコン ボタンのみ円形。** Apple や Cal.com のソフトコーナーの SaaS 言語とは明らかに異なり、BMW 企業自動車の「エンジニアリングされた精度」の声に近いです。

写真の幾何学

• ヒーローの写真は、16:9 または 21:9 の映画のような比率でフルブリードされます。
• モデル カードの写真は 16 時 10 分に、__CODEBCK_698___ 隅まで端から端まで配置されています。
• コンフィギュレーター車両は白いスタジオの背景にレンダリングされ、完全なシルエットが表示されます。

コンポーネント

トップナビゲーション_

_**`top-nav`** — ページの上部に固定された白い粘着ナビゲーション バー。高さ 64 ピクセル、__CODEBCK_700___ 背景。左: BMW の円形バッジのロゴ。中央: 主要な水平メニュー (モデル、次世代、中古品、ディーラー、試乗)。右: カート アイコン、言語ピッカー、プロフィール。メニュー項目は `` (14px / 400 / 0.3px 追跡).

でレンダリングされます。

ボタン

**`button-primary`** — 署名のプライマリ CTA。背景 `` (BMW ブルー #1c69d4)、テキスト ``、タイプ `` (BMW Type Next Latin 14px / 700 / 0.5px トラッキング)、パディング 14px × 32px、高さ 48px、角丸 `` (0px — 長方形)。プレス状態: `button-primary-active` から `` に移行します。

_**`button-secondary`** — ヘアラインの輪郭を持つ白いボタン。背景 ``、テキスト ``、1 ピクセル `` 境界線、同じパディング + 高さ + 半径。

**`button-secondary-on-dark`** — ダーク ヒーロー バンドで使用されます。背景は透明、テキスト ``、1 ピクセル `` 境界線、同じ長方形。

_**`button-text-link`** — 大文字で区切られたインライン リンク。背景なし、テキスト ``、タイプ `` (13px / 700 / 1.5px トラッキング)。 「LEARN MORE」と読み、__CODEBCK_719___ 山形記号で終了します。

**`text-link`** — ボディ コピー内のインライン リンク。 `` テキスト。デフォルトでは下線なし。コンテキストごとに下線を付けます。

カードとコンテナ

**`hero-band-dark`** — 全幅のダークネイビーのヒーロー。背景__CODEBCK_723___、テキスト__CODEBCK_724___、垂直パディング__CODEBCK_725___ (80ピクセル)。中央揃え: `` (64px / 700) のモデル名 + 小見出し + 車両レンダリング (右揃えまたは下)。 単一の `` (青) または ``.

_**`hero-photo-band`** — ライトキャンバス モデルのショーケース バンド。背景__CODEBCK_730___、テキスト__CODEBCK_731___。車両のレンダリングは広い領域を占めます。右または下に、見出し + 2 つのリンク CTA + サブタグライン。

**`model-card`** — ホームページの 4 アップまたは 5 アップ モデル カード グリッドで使用されます (「BMW iX3」、「BMW iX」、「BMW 5 シリーズ」)。背景__CODEBCK_733___、角丸__CODEBCK_734___、パディング__CODEBCK_735___ (24ピクセル)。内容: 上部のモデル レンダリング (`` の``)、その下の `` (18px / 700) のモデル名、__CODEBCK_739___ (14px / 300) の 1 行のタグライン、__CODEBCK_740___ (「詳細›").

**`model-card-photo`** — カードの写真プレート。背景__CODEBCK_742___ (#fafafa — ソフトグレー)、丸みを帯びた__CODEBCK_743___、車両は完全なシルエットでレンダリングされます。パディングゼロ — 写真は端から端まで続きます。

**`feature-photo-card`** — 機能/ライフスタイル カード。背景__CODEBCK_745___、パディング__CODEBCK_746___。 16:9 の写真が上部、__CODEBCK_747___ 見出しと本文の抜粋が下にあります。

**`spec-cell`** — 技術仕様セル (モデル詳細ページ)。ヘアラインの仕切りで区切られた透明な背景。上部に値 (`` 24px / 700)、下にラベル (``)。

インベントリとコンフィギュレータ

**`inventory-card`** — ディーラー在庫ページの車両ごとに 1 枚のカード。背景__CODEBCK_752___、パディング__CODEBCK_753___ (16ピクセル)、丸め__CODEBCK_754___。車両の写真が上、モデル + バリエーション名 + 価格 + 「表示」リンクが下にあります。

**`filter-chip`** + **`filter-chip-active`** — インベントリ フィルター チップ (モデル、年、価格帯)。非アクティブ: 背景 ``、1 ピクセル `` 境界線、テキスト ``、タイプ ``。アクティブ: 背景 ``、テキスト ``。パディング 8 ピクセル × 14 ピクセル、半径 ``.

**`configurator-option-tile`** + **`configurator-option-tile-selected`** — コンフィギュレーター選択セル (色、ホイール、室内装飾)。非アクティブ: 背景 ``、1 ピクセルのヘアライン。選択済み: 2px `` 境界線。パディング 16 ピクセル × 24 ピクセル、半径 ``.

入力とフォーム

**`text-input`** — 標準のテキスト入力。背景__CODEBCK_770___、テキスト__CODEBCK_771___、タイプ__CODEBCK_772___、丸め__CODEBCK_773___ (0px)、パディング14px × 16px、高さ48px、ヘアライン境界線1px。焦点が合うと、境界線がインクのように太くなります。

_**`cookie-consent-card`** — Cookie バナー。背景 ``、1 ピクセルのヘアライン、パディング `` (24 ピクセル)、__CODEBCK_777___ (14 ピクセル / 300 — 合法的なコピーでも明るい)。

タブ/タグ

**`category-tab`** + **`category-tab-active`** — カテゴリのサブナビゲーション。非アクティブ: 透明 + `` 大文字のラベル。アクティブ: 透明 + `` 大文字のラベル + 2 ピクセルのインクの下線。 12 ピクセルの垂直パディング、水平半径なし。

ブランド署名_

_**`m-stripe-divider`** — 高さ 4 ピクセルの水平三色ストライプ (`` → `` → ``)。 M モデルのコンテキスト、モータースポーツのバッジ、または M 関連のセクションの仕切りとしてのみ。企業のメインフローから外れている。 M モデルの詳細ページと M パフォーマンス バッジでは、インライン ディバイダーの役割を果たします。

CTA / フッター

**`cta-band-photo`** — プレフッター「Discover the New iX3」スタイルのバンド。背景__CODEBCK_787___とフルブリードの車両写真。 `` (32px / 700) + 単一の `` の中央揃えの見出し。 80 ピクセルのパディング。

**`footer`** — ソフトグレーの終了フッター。背景 `` (#f7f7f7 — 真っ白ではない — ソフトグレー)、テキスト ``。 4 列のリンク リスト: モデル / サービス / ディーラー / 概要。垂直パディング64ピクセル。以下、__CODEBCK_793___ の著作権行と__CODEBCK_794___.

推奨事項と禁止事項

実行

• __CODEBCK_795___ (真っ白) にすべてのページを置きます。 `` はヒーロー バンドのみに予約してください。
• プライマリ CTA を `` (BMW ブルー) + `` の白いテキスト + `` 0 ピクセルのコーナー (企業の署名) と組み合わせます。
• _BMW Type Next Latin 700 に表示見出しを設定し、Light 300 に本文を設定します。 コントラストは交渉の余地のないものです。
• 「詳細を見る」などの大文字の文字間隔のリンクをインライン CTA として使用します。
• モデル カードの写真を `` に配置し、その下にタイトルを付けます (BMW 企業の標準パターン)。
• __CODEBCK_801___ (80 ピクセル) でセクションのリズムを保持します。BMW M の 96 ピクセルよりもタイトです。
• M トリコロール ストライプは、M モデル コンテキストとモータースポーツ ディバイダー用に予約してください。

しないでください

• 青以外のブランド カラーを追加しないでください。BMW ブルーが唯一の主要なアクション カラーです。
• 錠剤や丸いボタンは使用しないでください — `` (0px) の長方形がブランド ボタンです。
• _表示ウェイトを 500 に落とさないでください。システムは 700 / 400 / 300 を使用します。 500 がありません。
• ボディ タイプを大胆にしないでください — Light 300 は、BMW 社の編集者の声です。
• カードにドロップ シャドウを追加しないでください。奥行きは写真とカラーブロックのコントラストから生まれます。
• 連続する 2 つのバンドにわたって同じサーフェス モードを繰り返さないでください。ライト→ダーク ヒーロー→ライト→ライト機能→ダーク CTA→ライト フッターの回転が必要です。
• M トリコロール ストライプを CTA 塗りつぶしとして使用しないでください。区切り線/アクセントの役割のみとして使用してください。
• 1 つのページ内で言語を混在させないでください。UI 言語は一貫性を保つ必要があります。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

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

|タブレット | 768–1024ピクセル |上部のナビゲーションが狭くなり、二次メニューが「その他」の下に隠れます。モデルカード2アップ。在庫 2 アップ |

|デスクトップ | 1024–1440ピクセル |完全なトップナビゲーション。 4-up または 5-up モデルのカード グリッド。インベントリ3アップ。完全なコンフィギュレータ UI |

|ワイド | > 1440ピクセル |デスクトップと同じで、コンテンツは 1440px に固定されます。側溝が残りを吸収します |

タッチターゲット

• `` 最小 48 × 48 ピクセル — WCAG AAA (44 × 44) 以上。
• `` 高さ 48 ピクセル
• カテゴリ タブは 12 ピクセルの垂直パディングで実行され、有効なタップ領域は 44 ピクセルを超えます。

戦略の崩壊

• _上部のナビゲーションは 768 ピクセル未満でハンバーガーに折りたたまれます。メニューは全画面シートとして開きます。
• ヒーロー バンドの内部レイアウトが 1 列になりました。
• モデル カード グリッド 4-up/5-up → 2-up → 1-up.
• コンフィギュレータ フィルタ チップの行は、モバイルでは水平方向にスクロールします。
• M トリコロール ストライプは、すべてのブレークポイントにわたって 4 ピクセルの高さに留まります。

画像の動作

• モデルは、ネイティブのアスペクト比を維持しながら、すべてのブレークポイントでスケールをレンダリングします。
• ヒーロー写真は、モバイルではより垂直方向の切り抜きに移行する可能性があります (アート ディレクション)。
• 在庫車両の写真は、モバイルでは 16:9 から 4:3 に移動する可能性があります。

反復ガイド

1.単一のコンポーネントに焦点を当てます。 YAML キーを直接参照します (``、__CODEBCK_806___)。

2.新しいコンポーネントのデフォルトは `` (0px) です。 `` は円形のアイコン ボタンにのみ使用してください。

3. バリアント (`-active`、__CODEBCK_810___、__CODEBCK_811___) は、__CODEBCK_812___ ブロック内の個別のエントリとして存在します。

4. `` どこでも — 16 進数をインライン化しないでください。

5.ホバー状態は決して文書化されません。デフォルトおよびアクティブ/押された状態のみ。

6.表示見出しは BMW Type Next Latin 700 のままです。ボディはライト300のままです。トリオは修正されました。

7. UI 文字列を単一の言語に保ちます。ページのロケールと一致させます。

既知のギャップ

• BMW Type Next Latin は BMW にライセンスされており、パブリック Web フォントとして公開されていません。ウェイト 700/300 のインテルが代替品として文書化されています。
• アニメーションと遷移のタイミング (コンフィギュレーターの色の交換、モデル カードのホバー表示) はここでは対象外です。
• _`` フォーカスを超えるフォーム検証状態は抽出されませんでした。エラー/成功状態には専用のフォーム ページが必要です。
• ディーラー在庫サブドメインは、メインの企業サイトとタイポグラフィと色を共有しています。 UI 密度のみが増加します (フィルター、テーブル、価格)。
• Cookie 同意オーバーレイはヒーローの一部を隠す可能性があります。リード ヒーロー バンドのコンテンツは完全にはキャプチャされない可能性があります。
• _M トリコロール ストライプは、この企業サイトではめったに表示されません。モータースポーツの完全なコンテキストは BMW M サイトにあります。

Practical Takeaways for Designers

Studying Bmw's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Bmw applies its tokens at bmw.com.

Practical Takeaways for Designers

Studying Bmw's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Bmw applies its tokens at bmw.com.

Practical Takeaways for Designers

Studying Bmw's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Bmw applies its tokens at bmw.com.

Related Design Systems

Explore similar design languages from the same category:

• Volvo Design System
• Porsche Design System
• Lamborghini Design System
• Tesla Design System