Overview
Bugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (`{colors.canvas}` — #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome — only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.
The system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the "BUGATTI" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates — anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.
Display sizes use weight 400 (regular) — never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the "engineered precision" feel that no other luxury maker matches.
**Key Characteristics:**
- Pure black canvas (`{colors.canvas}` — #000000) with white type. The system does not have a light mode.
- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).
- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.
- No accent color. The only non-monochrome color anywhere on the site is `{colors.link}` (#c3d9f3) — a desaturated ice-blue used on inline anchor links, and even that appears rarely.
- Buttons are pill-shaped (`{rounded.pill}`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.
- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are `{colors.surface-card}` (#141414) at most — a barely-different-from-black tone.
- Section rhythm is generous — `{spacing.section}` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.
Colors
Brand & Accent
- **Primary** (`{colors.primary}` — #ffffff): The single brand color. White type and white CTA outlines on the black canvas.
- **Link** (`{colors.link}` — #c3d9f3): The only non-monochrome color in the system — a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.
Surface
- **Canvas** (`{colors.canvas}` — #000000): The default page floor across every surface. Pure black.
- **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.
- **Surface Card** (`{colors.surface-card}` — #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black — no contrast jump.
- **Surface Elevated** (`{colors.surface-elevated}` — #1f1f1f): One step further from black, used for nested cards on rare dense pages.
- **Hairline** (`{colors.hairline}` — #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.
- **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border — only an underline hairline).
Text
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text on dark canvas.
- **Body** (`{colors.body}` — #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph.
- **Muted** (`{colors.muted}` — #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).
- **Muted Soft** (`{colors.muted-soft}` — #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).
Semantic
- **Warning** (`{colors.warning}` — #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.
- **Success** (`{colors.success}` — #5fa657): Order confirmation states (rare on marketing pages).
Typography
Font Family
The system runs **three custom Bugatti typefaces** as a rigid trinity:
1. **Bugatti Display** — All display headlines (h1, h2, h3), the "BUGATTI" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.
2. **Bugatti Text Regular** — A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.
3. **Bugatti Monospace** — Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.
The split is functional and absolute. Bugatti Display in a button breaks the "machined precision" voice; Bugatti Monospace in a paragraph breaks the "engineered elegance" voice; Bugatti Text in a button is unthinkable.
The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for Bugatti Display, `Garamond, "Times New Roman", serif` for Bugatti Text Regular, and `ui-monospace, "SF Mono", "Cascadia Mono", monospace` for Bugatti Monospace.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 400 | 1.1 | 4px | Hero h1 ("THE BUGATTI F.K.P. HOMMAGE", "TOURBILLON") — Bugatti Display, uppercase, wide-tracked |
| `{typography.display-lg}` | 48px | 400 | 1.15 | 3px | Section heads — Bugatti Display, uppercase |
| `{typography.display-md}` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names — Bugatti Display |
| `{typography.display-sm}` | 24px | 400 | 1.3 | 1.5px | Card titles — Bugatti Display |
| `{typography.wordmark}` | 14px | 400 | 1.0 | 6px | The "BUGATTI" brand wordmark in the top nav — Bugatti Display, the widest tracking in the system |
| `{typography.title-md}` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs — Bugatti Display |
| `{typography.title-sm}` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |
| `{typography.caption-uppercase}` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, "EXPLORE OUR OPPORTUNITIES" — Bugatti Monospace, uppercase |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body — Bugatti Text Regular (a serif face), sentence case, no tracking |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal — Bugatti Text Regular |
| `{typography.button}` | 14px | 400 | 1.0 | 2.5px | All button labels — Bugatti Monospace, uppercase, 2.5px tracking |
| `{typography.nav-link}` | 12px | 400 | 1.4 | 2px | Top-nav menu items ("MENU", "STORE") — Bugatti Monospace |
Principles
The system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:
1. **Size** — 64px hero vs 16px body is a 4× hierarchy
2. **Letter-spacing** — 6px wordmark vs 0px body
3. **Case** — Uppercase display vs sentence-case body
4. **Family contrast** — Display vs Text Regular vs Monospace
Going to weight 700 anywhere would break the "modest engineering" feel and make Bugatti read like a generic luxury template.
The serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose — which is the brand's editorial philosophy.
Note on Font Substitutes
If Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:
- **Bugatti Display** → **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing
- **Bugatti Text Regular** → **Cormorant Garamond** (regular) or **EB Garamond**
- **Bugatti Monospace** → **JetBrains Mono** or **IBM Plex Mono** (regular weight)
The substitution preserves the three-family split, which is more important than exact typeface match.
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}` 120px.
- **Section padding:** `{spacing.section}` (120px) — longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.
- **Card internal padding:** `{spacing.lg}` (24px) for newsroom and content cards; `{spacing.md}` (16px) for the career callout card; `{spacing.xxl}` (64px) inside hero photo bands.
- **Gutters:** `{spacing.xl}` (40px) between cards in 2-up grids — wider than typical because Bugatti's grids are sparse.
Grid & Container
- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.
- **Editorial body:** Single 12-column grid; photo bands are full-bleed.
- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.
- **Career listings:** Single column with 80px row spacing.
Whitespace Philosophy
Bugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional — it lets the car breathe. Compressing the whitespace to "fit more content" breaks the brand's fundamental contract: that less is more.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body, top nav, footer, photo bands |
| Soft hairline | 1px `{colors.hairline}` border | Section dividers, table rows |
| Card surface | `{colors.surface-card}` background — no shadow | Career callout, newsroom article container |
| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases — depth via subject + lens, not chrome |
The system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated `{colors.surface-card}`.
Decorative Depth
- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | All cards, photo containers, inputs, spec cells — the dominant radius |
| `{rounded.pill}` | 9999px | All buttons (the only rounded element in the system) |
| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |
The radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between — those would feel "designed" rather than "engineered."
Photography Geometry
Hero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.
Components
Top Navigation
**`top-nav`** — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries "MENU" at left, the centered **wordmark-display** ("BUGATTI" in 14px Bugatti Display with 6px tracking), and "STORE" at right with a small bag icon. All labels in `{typography.nav-link}` (Bugatti Monospace, 12px, 2px tracking, uppercase).
**`wordmark-display`** — The "BUGATTI" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.
Buttons
**`button-primary`** — The signature primary CTA. Background **transparent**, text `{colors.on-dark}` (white), 1px white outline, rounded `{rounded.pill}` (9999px), padding 14px × 32px, height 44px. Type `{typography.button}` — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.
**`button-icon`** — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded `{rounded.full}`. Same outline-only treatment as the primary button.
**`text-link`** — Inline body links in `{colors.link}` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits `{typography.body-md}` (Bugatti Text Regular, serif).
Cards & Containers
**`hero-photo-band`** — Full-width black band with full-bleed automotive photography. The h1 in `{typography.display-xl}` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (`{typography.caption-uppercase}`) below the headline and a single `{component.button-primary}` further down. Vertical padding 96px-200px depending on photo height.
**`career-callout-card`** — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt ("Are you ready for a new adventure?"). Background `{colors.surface-card}`, rounded `{rounded.none}` (0px), padding `{spacing.md}` (16px), width 320px. Carries a small thumbnail at top, body line, and a `{typography.caption-uppercase}` link ("EXPLORE OUR OPPORTUNITIES").
**`model-photo-card`** — Used in model showcases (Tourbillon page, model lineup grid). Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in `{typography.display-md}` (32px Bugatti Display, 2px tracking), short specs line in `{typography.caption-uppercase}` (11px Bugatti Monospace), a `{component.text-link}` ("DISCOVER").
**`newsroom-article-card`** — Used on the newsroom page (newsroom.bugatti.com). Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries a 16:9 thumbnail, a `{component.date-pill}` ("12. NOVEMBER 2025"), a `{typography.title-md}` headline, and a body excerpt in `{typography.body-md}` (Bugatti Text Regular serif).
**`career-listing-row`** — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in `{typography.title-md}` (Bugatti Display 20px) at left; location + department in `{typography.caption-uppercase}` at right; chevron arrow (→) at far right.
**`spec-cell`** — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in `{typography.title-md}` at top and a label in `{typography.caption-uppercase}` below. Padding 24px vertical.
Inputs & Forms
**`text-input`** — Standard text input on dark canvas. Background **transparent**, text `{colors.on-dark}`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type `{typography.body-md}` (Bugatti Text Regular). Placeholder in `{colors.muted}`. Focus thickens the bottom border to white.
Tags & Captions
**`caption-overlay`** — Photo-overlay caption (e.g., "HONORING THE OEYRON AND ITS VISIONARY CREATOR"). Centered or left-aligned over photography in `{typography.caption-uppercase}` (Bugatti Monospace, 11px, 2px tracking, white).
**`category-tag`** + **`date-pill`** — Both render as transparent inline labels in `{typography.caption-uppercase}`, color `{colors.muted}`. No background fill, no border. The "tag" is the type itself.
CTA / Footer
**`cta-band-photo`** — A pre-footer "Discover Bugatti" band with full-bleed photography of a Bugatti car at speed and a centered headline in `{typography.display-md}` + a `{component.button-primary}` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.
**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in `{typography.body-sm}` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.
Do's and Don'ts
Do
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.
- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.
- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.
- Keep `{component.button-primary}` transparent with a 1px white outline. The transparent pill IS the brand button.
- Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.
- Use `{spacing.section}` (120px) between major editorial bands. The whitespace is part of the brand.
- Reserve `{colors.link}` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.
Don't
- Don't introduce any accent color outside `{colors.link}`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.
- Don't bold any type. The system has no bold weight — every typeface stays at 400.
- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.
- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.
- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.
- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.
- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |
| Desktop | 1024–1440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
Touch Targets
- `{component.button-primary}` renders at minimum 44 × 44px (matches WCAG AAA).
- `{component.button-icon}` is exactly 40 × 40px.
- `{component.text-input}` height is 44px.
- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.
Collapsing Strategy
- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.
- Hero photography stays full-bleed at every breakpoint. Photo crops adjust — wider crops at desktop, vertical crops on mobile.
- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).
- 2-up newsroom grid collapses to 1-up at < 768px.
- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.
Image Behavior
- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).
- Newsroom thumbnails retain 16:9 ratio and 0px corners.
Iteration Guide
1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.career-callout-card}`).
2. New components default to `{rounded.none}` (0px). Only `{component.button-primary}` and `{component.button-icon}` use pill / full radius.
3. Variants live as separate entries in `components:`.
4. Use `{token.refs}` everywhere — never inline hex.
5. Never document hover. Default and Active/Pressed states only.
6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.
7. When in doubt about emphasis: bigger photography before bigger type.
Known Gaps
- The dembrandt frequency analyzer captured only 3 colors at root level (`#000000`, `#999999`, `#c3d9f3`). The white text (#ffffff) and dark surface tones (`#0d0d0d`, `#141414`, `#1f1f1f`) were inferred from screenshot — Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.
- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.
- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.
- Form validation states beyond the underline-only `{component.text-input}` are not extracted — error / success states are inferred from general standards, not from the analyzed surfaces.
- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.
- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces — no design-system-level differences observed, only language localization.
- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.
개요
Bugatti의 마케팅 표면은 고급 자동차 분야에서 가장 엄격한 인터페이스입니다. 흰색 대문자 **문자 간격** 디스플레이 유형과 풀 블리드 자동차 사진을 포함하는 거의 순수한 검정색 캔버스(`` — #000000)입니다. 시스템에는 강조 색상, 표면 카드 장식, 그림자, 그라데이션, 크롬이 없으며 **사진, 타이포그래피 및 브랜드 워드마크**만 있습니다. 이 카테고리의 다른 모든 고급 자동차 사이트(BMW M, Aston Martin, Lamborghini)는 특정 형태의 강조 색상이나 시그니처 요소를 사용합니다. 부가티는 아무것도 사용하지 않습니다. 빈 공간, 사진, 그리고 정확하게 추적된 부가티 디스플레이 헤드라인이 바로 브랜드입니다.
시스템은 **세 가지 맞춤형 Bugatti 서체**를 실행합니다. **Bugatti 디스플레이**(디스플레이 헤드라인, "BUGATTI" 워드마크, 넓은 자간이 있는 모두 대문자), **Bugatti Text Regular**(본문 단락, 세리프 텍스트 서체), **Bugatti Monospace**(버튼 라벨, 탐색, 캡션, 날짜 - 정밀도와 가공된 느낌이 중요한 모든 위치). 분할은 의도적이며 깨지지 않습니다. 버튼에 Bugatti 텍스트를 사용하지 말고 단락에 Bugatti Monospace를 사용하지 마십시오.
디스플레이 크기는 가중치 400(일반)을 사용하며 굵게 표시되지 않습니다. 시각적 강조는 무게가 아닌 **크기 및 추적**에서 비롯됩니다. 워드마크의 문자 간격은 6px입니다. 디스플레이 헤드라인 2-4px; 대문자 라벨 2-2.5px. 긴밀한 추적은 브랜드 위반입니다. 넓은 간격은 다른 어떤 럭셔리 브랜드도 따라올 수 없는 "엔지니어링 정밀성" 느낌을 만들어냅니다.
**주요 특성:**
- 순흑색 캔버스(`` — #000000)에 흰색 문자가 포함되어 있습니다. 시스템에 조명 모드가 없습니다.
- 세 가지 맞춤 Bugatti 서체: **디스플레이**(대문자 헤드라인 + 워드마크), **텍스트 일반**(본문 세리프), **고정폭**(버튼, 캡션, 탐색).
- 모든 디스플레이 헤드라인은 넓은 문자 간격(2-4px)을 갖춘 대문자입니다. 본문 문구는 표준 추적에서 문장 단위로 유지됩니다.
- 액센트 색상이 없습니다. 사이트의 유일한 비단색 색상은 ``(#c3d9f3)입니다. 이는 인라인 앵커 링크에 사용되는 채도가 낮은 담청색이며 이 색도 거의 나타나지 않습니다.
- 버튼은 **투명한 배경**과 1px 흰색 윤곽선이 있는 알약 모양(``)입니다. Bugatti는 기본 CTA가 완전히 투명한 유일한 고급 자동차 브랜드입니다.
- 사진은 유일한 깊이 요소입니다. 그림자가 없습니다. 그라데이션이 없습니다. 카드 표면이 없습니다. Surface 카드는 최대 ``(#141414)입니다. 검은색 톤과 거의 다르지 않습니다.
- 섹션 리듬은 넉넉합니다. 주요 밴드 간 ``(120px)은 대부분의 마케팅 사이트보다 깁니다. Bugatti의 페이지는 대부분 최소한의 텍스트 밀도로 사진으로 구성되어 있기 때문입니다.
색상
브랜드 및 액센트
- **기본** (`` — #ffffff): 단일 브랜드 색상입니다. 검정색 캔버스에 흰색 활자와 흰색 CTA 윤곽선이 있습니다.
- **링크** (`` — #c3d9f3): 시스템의 유일한 비단색 색상 — 인라인 앵커 링크에 사용되는 채도가 낮은 담청색이며 포커스 상태에서는 거의 사용되지 않습니다. Bugatti의 브랜드 규율은 매우 엄격하여 이 단일 토큰은 본질적으로 흑백 이외의 전체 반음계 어휘입니다.
표면
- **캔버스** (`` — #000000): 모든 표면의 기본 페이지 바닥입니다. 퓨어 블랙.
- **표면 부드러움**(`` — #0d0d0d): 사양 테이블 행과 밀집된 데이터 섹션에 사용되는 검은색 톤과 거의 다르지 않습니다.
- **표면 카드** (`` — #141414): 카드(경력 설명선, 뉴스룸 기사 컨테이너, 비정기 콘텐츠 카드). 카드 표면도 거의 검은색으로 유지됩니다. 대비 점프가 없습니다.
- **Surface Elevated** (`` — #1f1f1f): 검은색에서 한 단계 더 나아간 것으로, 드물게 밀집된 페이지의 중첩된 카드에 사용됩니다.
- **가는 선** (`` — #262626): 1px 구분선 톤입니다. 눈에 보이지만 조용합니다. 표 행, 본문 섹션 사이, 카드 윤곽선 주위에 사용됩니다.
- **가는 선 강함** (`` — #3a3a3a): 입력 필드 아래쪽에 사용되는 더 무거운 구분선(입력 필드에는 테두리가 없으며 밑줄 가는 선만 있음).
텍스트
- **잉크/어두운 부분**(`` — #ffffff): 어두운 캔버스의 모든 헤드라인과 기본 텍스트.
- **본문** (`` — #cccccc): 기본 실행 텍스트 색상(순백색보다 약간 더 차가운 색상). 본문 단락에 사용됩니다.
- **본문 강함** (`` — #e6e6e6): 강조된 본문/리드 단락.
- **음소거됨**(`` — #999999): 바닥글 링크, 날짜, 캡션, 보조 메타데이터. Dembrandt의 빈도 분석은 이를 팔레트-2(카운트 6, 중간 신뢰도)로 확인합니다.
- **음소거 소프트**(`` — #666666): 매우 보조적인 텍스트에 대해 음소거된 두 번째 계층입니다(법적 고지 사항, 저작권 표시).
의미
- **경고** (`` — #d4a017): 기술 경고 설명(사양, 리콜 공지)용으로 예약되어 있습니다. 마케팅 표면에는 거의 나타나지 않습니다.
- **성공** (`` — #5fa657): 주문 확인 상태(마케팅 페이지에서는 드물게).
타이포그래피
글꼴군
시스템은 **세 가지 맞춤 Bugatti 서체**를 엄격한 삼위일체로 실행합니다.
1. **Bugatti 디스플레이** — 모든 디스플레이 헤드라인(h1, h2, h3), "BUGATTI" 워드마크, 모델 명판. 대문자, 넓은 추적. 시각적 강조를 위한 기본값입니다.
2. **Bugatti Text Regular** — 본문 문구, 리드 단락, 모델 설명 실행에만 사용되는 세리프 텍스트 서체입니다. 표준 문장 대소문자, 띄어쓰기 없음.
3. **Bugatti Monospace** — 버튼 라벨, 탐색, 캡션, 날짜, 고정폭 정밀도 컨텍스트. 2~2.5px 추적에서는 항상 대문자입니다.
분할은 기능적이며 절대적입니다. 버튼의 부가티 디스플레이는 "가공된 정밀함"의 목소리를 깨뜨립니다. 한 단락에서 Bugatti Monospace는 "엔지니어링된 우아함"의 목소리를 깨뜨립니다. 버튼에 있는 부가티 텍스트는 상상조차 할 수 없습니다.
대체 스택은 Bugatti 디스플레이의 경우 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, Bugatti Text Regular의 경우 `Garamond, "Times New Roman", serif`, Bugatti Monospace의 경우 `ui-monospace, "SF Mono", "Cascadia Mono", monospace`을 수행합니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 64px | 400 | 1.1 | 4픽셀 | 영웅 h1("THE BUGATTI F.K.P. HOMMAGE", "TOURBILLON") — Bugatti 디스플레이, 대문자, 와이드 트랙 |
| _`` | 48px | 400 | 1.15 | 3픽셀 | 섹션 헤드 — Bugatti 디스플레이, 대문자 |
| _`` | 32px | 400 | 1.2 | 2픽셀 | 하위 섹션 제목, 모델 이름 — Bugatti 디스플레이 |
| _`` | 24px | 400 | 1.3 | 1.5픽셀 | 카드 제목 — 부가티 디스플레이 |
| _`` | 14px | 400 | 1.0 | 6픽셀 | 상단 탐색 메뉴의 "BUGATTI" 브랜드 워드마크 — Bugatti 디스플레이, 시스템에서 가장 광범위한 추적 |
| _`` | 20픽셀 | 400 | 1.3 | 1픽셀 | 경력 목록 제목, 소개 단락 — Bugatti 디스플레이 |
| _`` | 16px | 400 | 1.3 | 1.5픽셀 | 중간 계층 헤드라인, 콜아웃 카드 |
| _`` | 11px | 400 | 1.4 | 2픽셀 | 사진 캡션, 메타데이터, "EXPLORE OUR OPPORTUNITIES" — Bugatti Monospace, 대문자 |
| _`` | 16px | 400 | 1.5 | 0 | 기본 본문 — Bugatti Text Regular(세리프체), 문장 케이스, 추적 없음 |
| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문, 작은 글씨로 된 법률 — Bugatti Text Regular |
| _`` | 14px | 400 | 1.0 | 2.5픽셀 | 모든 버튼 라벨 — Bugatti Monospace, 대문자, 2.5px 추적 |
| _`` | 12px | 400 | 1.4 | 2픽셀 | 상단 탐색 메뉴 항목("MENU", "STORE") — Bugatti Monospace |
원칙
시스템은 절대 굵은 글씨체를 사용하지 않습니다. 모든 Bugatti 서체는 두께 400(일반)으로 설정되어 있습니다. 시각적 강조 출처:
1. **크기** — 64px 영웅과 16px 본문은 4× 계층 구조입니다__HTMLTAG_261___
2. **문자 간격** — 6px 워드마크 대 0px 본문
3. **대소문자** — 대문자 표시와 문장 대소문자 비교
4. **패밀리 대비** — 디스플레이 vs 텍스트 일반 vs 고정폭
무게 700으로 어디에서든 "겸손한 엔지니어링" 느낌을 깨고 부가티를 일반적인 럭셔리 템플릿처럼 읽게 만들 것입니다.
세리프 Bugatti Text Regular는 이 브랜드를 올산 럭셔리 군중(BMW, Aston Martin, Lamborghini 모두 산세리프 바디 유형 사용)과 차별화합니다. Bugatti의 세리프체 음성은 문학적이고 사려 깊으며 느리게 읽는 산문을 나타냅니다. 이것이 브랜드 편집 철학입니다.
글꼴 대체에 대한 참고사항
Bugatti Display, Bugatti Text Regular 및 Bugatti Monospace를 사용할 수 없는 경우 가장 가까운 오픈 소스 대체품은 다음과 같습니다.
- **Bugatti 디스플레이** → **Saira Condensed** (변수, 가중치 400) +0.05em 문자 간격
- **Bugatti Text Regular** → **Cormorant Garamond**(일반) 또는 **EB Garamond**
- **Bugatti Monospace** → **JetBrains Mono** 또는 **IBM Plex Mono**(일반 중량)
대체는 3군 분할을 유지하며 이는 정확한 서체 일치보다 더 중요합니다.
레이아웃
간격 시스템
- **기본 단위:** 4px.
- **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 40px · `` 64px · `` 120px.
- **섹션 패딩:** ``(120px) — Bugatti의 밴드는 대부분 최소한의 텍스트를 사용한 사진이기 때문에 대부분의 마케팅 사이트보다 깁니다. 빈 공간에 자동차가 자리잡고 있습니다.
- **카드 내부 패딩:** 뉴스룸 및 콘텐츠 카드용 ``(24px); ``(16px) - 경력 콜아웃 카드용; ``(64px)는 히어로 사진 밴드 내부에 있습니다.
- **홈통:** 2-up 그리드의 카드 사이에 ``(40px) - Bugatti의 그리드가 드물기 때문에 일반적인 것보다 넓습니다.
그리드 및 컨테이너
- **최대 콘텐츠 너비:** 중앙 중심 ~1280픽셀. 영웅 사진 밴드는 최대 폭 없이 전체 너비로 블리딩됩니다.
- **편집 본문:** 단일 12열 그리드; 사진 밴드는 풀 블리드입니다.
- **뉴스룸 레이아웃:** 데스크톱의 2업 기사 그리드, 태블릿+모바일의 1업 기사.
- **채용 목록:** 행 간격 80px의 단일 열.
공백 철학
Bugatti는 어떤 고급 자동차 경쟁업체보다 공백을 더 적극적으로 사용합니다. 홈페이지 히어로는 대부분 사진 + 거대한 공백 + 단일 문장 + 단일 버튼입니다. 사진 아래의 빈 검은색 공간은 의도적인 것입니다. 이는 자동차가 숨을 쉴 수 있도록 하기 위한 것입니다. "더 많은 콘텐츠에 맞추기" 위해 공백을 압축하는 것은 브랜드의 기본 계약을 깨뜨립니다. 즉, 적을수록 좋습니다.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 플랫 | 그림자 없음, 테두리 없음 | 본문, 상단 탐색, 바닥글, 사진 밴드 |
| 부드러운 헤어라인 | 1px `` 테두리 | 섹션 구분선, 표 행 |
| 카드 표면 | `` 배경 — 그림자 없음 | 경력 설명선, 뉴스룸 기사 컨테이너 |
| 사진 깊이 | 가장자리에서 가장자리까지 자르기를 사용한 풀 블리드 사진 | 히어로 밴드, 모델 쇼케이스 — 크롬이 아닌 피사체 + 렌즈를 통한 깊이 |
시스템은 그림자, 유리 형태, 그라데이션을 사용하지 않습니다. 깊이는 전적으로 사진(조명, 렌즈, 피사체 구도)과 검은색 캔버스와 최소 높이의 ``.
사이의 대비에서 비롯됩니다.
장식적 깊이
- 없음. 부가티는 단 하나의 장식 요소도 없는 유일한 고급 자동차 브랜드입니다. 마케팅 사이트의 워드마크 자체 외부에는 스트라이프, 배지, 헤리티지 엠블럼이 없습니다.
도형
경계 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 0픽셀 | 모든 카드, 사진 컨테이너, 입력, 사양 셀 - 주요 반경 |
| _`` | 9999px | 모든 버튼(시스템에서 유일하게 둥근 요소) |
| _`` | 9999px / 50% | 원형 아이콘 버튼, 아바타 표면 |
반경 계층 구조는 바이너리입니다. 알약 모양의 버튼을 제외한 모든 항목은 직사각형입니다. 4px도 없고, 8px도 없고, 그 사이에 12px도 없습니다. "엔지니어링"이라기보다는 "설계"된 것처럼 느껴질 것입니다.
사진 기하학
영웅 사진은 반올림 없이 전체 너비를 채웁니다. 그리드 내부의 사진 카드는 ``(0px) 모서리, 가장자리 간 이미지를 유지합니다. 모델 디테일 샷은 16:9 이상의 영화 종횡비를 사용합니다. 뉴스룸 썸네일은 모서리가 0px인 16:9를 사용합니다. 마케팅 사이트 어디에도 아바타나 둥근 사진 자르기가 없습니다.
구성요소
상단 탐색
_**`top-nav`** — 모든 페이지 상단의 영웅 사진 위에 오버레이되는 56px 높이의 투명한 탐색 모음입니다. 채우기도 없고 테두리도 없습니다. 왼쪽에는 "MENU", 중앙에 있는 **워드마크 디스플레이**(6px 추적 기능이 있는 14px Bugatti 디스플레이의 "BUGATTI"), 오른쪽에는 작은 가방 아이콘과 함께 "STORE"가 있습니다. ``(Bugatti Monospace, 12px, 2px 추적, 대문자)의 모든 라벨.
**`wordmark-display`** — "BUGATTI" 워드마크 자체입니다. Bugatti 디스플레이는 14px, 무게는 400, 문자 간격은 6px입니다. 시스템에서 가장 넓은 추적. 모든 중단점에서 탐색 모음 중앙에 위치합니다.
버튼
**`button-primary`** — 서명 기본 CTA입니다. 배경 **투명**, 텍스트 ``(흰색), 1px 흰색 윤곽선, 둥근 ``(9999px), 패딩 14px × 32px, 높이 44px. 유형 `` — Bugatti Monospace, 대문자, 14px, 2.5px 추적. 투명한 채우기는 Bugatti에만 적용됩니다. 다른 모든 고급 자동차 브랜드는 텍스트 이동 버튼으로 채워지거나 윤곽이 그려지는 버튼을 사용합니다. 부가티의 투명한 알약은 버튼입니다.
_**`button-icon`** — 원형 아이콘 버튼(회전식 화살표, 공유, 언어 전환기). 40 × 40px, 투명한 배경, 흰색 윤곽선 1px, 둥근 ``. 기본 버튼과 동일한 윤곽선만 처리됩니다.
**`text-link`** — ``(#c3d9f3, 시스템에서 유일한 비단색 색상)의 인라인 본문 링크입니다. 기본적으로 밑줄이 그어져 있습니다. 유형은 ``(Bugatti Text Regular, serif)를 상속합니다.
카드 및 용기
**`hero-photo-band`** — 풀 블리드 자동차 사진이 포함된 전폭 검정색 밴드. ``의 h1은 상단 근처의 사진 위에 중앙 정렬되어 있으며 종종 헤드라인 아래에 작은 Bugatti Monospace 캡션(``)과 더 아래쪽에 단일 ``과 쌍을 이룹니다. 사진 높이에 따라 세로 패딩 96px-200px.
_**`career-callout-card`** — 모집 프롬프트("새로운 모험을 할 준비가 되셨습니까?")와 함께 홈페이지의 영웅 사진 위에 떠 있는 작은 오른쪽 정렬 카드입니다. 배경 ``, 반올림 ``(0px), 패딩 ``(16px), 너비 320px. 상단, 본문 라인 및 `` 링크("EXPLORE OUR OPPORTUNITIES")에 작은 미리보기 이미지가 있습니다.
**`model-photo-card`** — 모델 쇼케이스에 사용됩니다(뚜르비옹 페이지, 모델 라인업 그리드). 배경 ``(카드 표면 없음 — 검정색 사진만 있음), 둥근 ``. 위: 모델의 16:9 또는 21:9 히어로 샷. 아래: ``(32px Bugatti 디스플레이, 2px 추적)의 모델 이름, ``(11px Bugatti Monospace)의 짧은 사양 줄, ``("DISCOVER").
_**`newsroom-article-card`** — 뉴스룸 페이지(newsroom.bugatti.com)에서 사용됩니다. 가는선 테두리가 있는 배경 ``, 둥근 ``, 패딩 ``(24px). 16:9 썸네일, ``("12. NOVEMBER 2025"), `` 헤드라인, ``(Bugatti Text Regular serif)에서 발췌한 본문을 포함합니다.
**`career-listing-row`** — 채용 페이지 채용 정보 목록의 각 행입니다. 투명한 배경, 세로 패딩 24px, 행 사이의 가는 선 구분선. 왼쪽에 ``(Bugatti 디스플레이 20px)의 직위; 오른쪽 ``의 위치 + 부서; 맨 오른쪽에 갈매기형 화살표(→)가 있습니다.
**`spec-cell`** — 모델 세부 정보 페이지에 차량 기술 사양이 표시됩니다(Tourbillon 엔진 사양). 셀 사이에 가는 선 구분선이 있는 투명한 배경(카드 내부 셀 사이 아님) 각 사양은 상단의 ``에 값을 표시하고 아래의 ``에 라벨을 표시합니다. 세로 24px 패딩.
입력 및 양식
_**`text-input`** — 어두운 캔버스에 표준 텍스트 입력. 배경 **투명**, 텍스트 ``, 가는 선이 강한 아래쪽 테두리만 1px(상단, 왼쪽, 오른쪽 테두리 없음), 패딩 12px × 0px, 높이 44px. _``(Bugatti 텍스트 일반)을 입력하세요. ``의 자리 표시자입니다. 초점을 맞추면 아래쪽 테두리가 흰색으로 두꺼워집니다.
태그 및 캡션
_**`caption-overlay`** — 사진 오버레이 캡션(예: "OEYRON과 그 비전 있는 창조자에게 경의를 표함"). ``(Bugatti Monospace, 11px, 2px 추적, 흰색)의 사진 위에 중앙 또는 왼쪽 정렬됩니다.
**`category-tag`** + **`date-pill`** — 둘 다 ``, 색상 ``의 투명한 인라인 레이블로 렌더링됩니다. 배경 채우기도 없고 테두리도 없습니다. "태그"는 유형 자체입니다.
CTA/바닥글
_**`cta-band-photo`** — 빠른 속도로 달리는 Bugatti 자동차의 풀 블리드 사진과 `` + 아래 ``의 중앙 헤드라인이 포함된 프리풋터 "Discover Bugatti" 밴드입니다. 수직 패딩 80px. 풀블리드 사진을 통해 영웅의 편집적 중력을 물려받습니다.
**`footer`** — 모든 페이지를 닫는 검은색 바닥글입니다. 배경 ``, 텍스트 ``. Bugatti/모델/유산/연결을 다루는 데스크탑의 4열 링크 목록입니다. 수직 패딩 64px. 맨 아래 행에는 ``(Bugatti Text Regular)의 저작권 줄이 있습니다. 워드마크는 맨 아래 중앙에 정렬되어 있습니다. 바닥글은 절대 반전되지 않습니다.
해야 할 일과 하지 말아야 할 일
하라
- 풀 블리드 자동차 사진으로 모든 페이지를 고정하세요. 자동차는 브랜드 전압입니다. 크롬이 완전히 뒤로 물러납니다.
- 모든 디스플레이 헤드라인을 대문자 Bugatti 디스플레이로 유지하고 문자 간격을 2~4px로 유지하세요. 워드마크의 크기는 6px입니다.
- 헤드라인에는 Bugatti 디스플레이를 사용하고 본문에는 Bugatti Text Regular(serif!)를 사용하고 버튼 + 캡션 + 탐색에는 Bugatti Monospace를 사용합니다. 삼위일체는 깨지지 않습니다.
- 1px 흰색 윤곽선으로 ``을 투명하게 유지하세요. 투명한 알약이 브랜드 버튼입니다.
- 어디서나 무게 400을 사용하세요. 굵은 글씨는 브랜드 보이스를 깨뜨립니다. 시스템에는 굵은 글씨 역할이 없습니다.
- 주요 편집 밴드 사이에는 ``(120px)을 사용하세요. 공백은 브랜드의 일부입니다.
- 인라인 앵커 링크 전용 ``(#c3d9f3)을 예약하세요. 시스템의 유일한 비단색 색상입니다.
하지 마세요
- `` 외부에 강조 색상을 도입하지 마세요. 부가티의 브랜드 원칙은 완전한 흑백 + 사진입니다. 브랜드 블루 또는 브랜드 레드를 추가하면 계약이 위반됩니다.
- 어떤 유형도 굵게 표시하지 마세요. 시스템에는 굵은 두께가 없습니다. 모든 서체는 400으로 유지됩니다.
- 기본 버튼을 채우지 마세요. 투명 + 윤곽선만. 단색의 흰색 버튼은 브랜드가 아닌 것으로 읽혀집니다.
- 섹션 사이의 공백을 압축하지 마세요. 120px 리듬은 편집 속도의 일부입니다.
- 버튼 외부에 둥근 모서리를 사용하지 마세요. 카드, 사진, 입력은 모두 0px로 유지됩니다. 둥근 모양의 카드는 고급 기술이 아닌 소비자 기술로 읽혀집니다.
- 디스플레이 헤드라인의 문자 간격을 좁히지 마세요. Bugatti 디스플레이의 2-4px 추적은 협상할 수 없습니다.
- 버튼에 Bugatti 디스플레이를 사용하거나(Bugatti Monospace 사용) 단락에 Bugatti Monospace를 사용하지 마십시오(Bugatti Text Regular 사용). 삼위일체 분할은 브랜드 목소리입니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 모바일 | _< 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |
| 태블릿 | 768~1024px | 상단 탐색은 최소화됩니다(MENU + 워드마크 + STORE). 2업 뉴스룸 그리드; 경력 행 전체 너비 |
| 데스크탑 | 1024~1440px | 전체 최소 상단 탐색; 2업 뉴스룸 그리드; 사양 테이블 4업 |
| 와이드 | > 1440px | 더 많은 호흡 공간을 갖춘 데스크탑과 동일합니다. 최대 콘텐츠 1280px |
터치 대상
- ``는 최소 44 × 44px로 렌더링됩니다(WCAG AAA와 일치).
- ``은(는) 정확히 40 × 40px입니다.
- `` 높이는 44픽셀입니다.
- 채용 목록 행에는 24px 세로 패딩이 있습니다. 유효 탭 영역은 주변 간격과 44px 이상을 충족합니다.
축소 전략
- 상단 탐색은 모든 중단점(MENU 라벨 + 워드마크 + STORE 라벨)에서 최소화됩니다. 모바일에서는 라벨이 햄버거 뒤에 숨겨져 있지만 워드마크는 중앙에 유지됩니다.
- 영웅 사진은 모든 중단점에서 풀 블리드 상태로 유지됩니다. 사진 자르기 조정 - 데스크톱에서는 더 넓게 자르고 모바일에서는 세로로 자르기.
- 홈페이지의 채용 콜아웃 카드는 < 768px (it's a desktop-only floating element).
에 숨겨져 있습니다.
- 2업 뉴스룸 그리드가 < 768px.
에서 1업으로 축소됩니다.
- Spec 셀은 4-up에서 2-up, 1-up으로 리플로우됩니다. 값은 열 수에 관계없이 동일한 표시 크기로 유지됩니다.
이미지 동작
- 영웅 사진은 반응형으로 자릅니다. 데스크톱에서는 더 넓게 자르고 모바일에서는 세로로 자릅니다. Bugatti 자동차는 항상 움직이거나 비스듬히 표시됩니다(평평한 프로필이 아님).
- 뉴스룸 축소판은 16:9 비율과 0px 모서리를 유지합니다.
반복 가이드
1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키(``, ``)를 참조합니다.
2. 새 구성 요소의 기본값은 ``(0px)입니다. `` 및 ``에서만 알약/전체 반경을 사용합니다.
3. 변형은 `components:`.
에 별도의 항목으로 존재합니다.
4. 어디서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.
5. 문서에 마우스를 올리지 마세요. 기본 및 활성/누름 상태만 해당됩니다.
6. 디스플레이 헤드라인은 2~4px 추적으로 대문자 Bugatti Display 400을 유지합니다. 본문은 문장-케이스 부가티 텍스트 레귤러(세리프)로 유지됩니다. 버튼 라벨은 Bugatti Monospace 2.5px 추적을 유지합니다. 삼위일체는 흐려지지 않습니다.
7. 강조가 의심스러울 때: 더 큰 활자보다 더 큰 사진을 찍으세요.
알려진 격차
- dembrandt 주파수 분석기는 루트 수준에서 3가지 색상만 캡처했습니다(``, ``, ``). 흰색 텍스트(#ffffff)와 어두운 표면 톤(``, ``, ``)은 스크린샷에서 추론되었습니다. Bugatti의 페이지는 너무 단색이어서 주파수 기반 분석기가 본문 텍스트나 표면 톤을 별도의 팔레트 항목으로 표시하지 않았습니다.
- 세 가지 Bugatti 서체(디스플레이, 텍스트 일반, 고정폭)는 Bugatti에 라이선스가 부여되었으며 웹 글꼴로 공개적으로 사용할 수 없습니다. 대체 항목은 타이포그래피 섹션에 문서화되어 있습니다.
- 애니메이션 및 전환 타이밍(사진 캐러셀 전환, 메뉴 마우스 오버 공개, 구성 애니메이션)은 범위에 포함되지 않습니다.
- 밑줄만 있는 __CODEBCK_661___ 이외의 양식 유효성 검사 상태는 추출되지 않습니다. 오류/성공 상태는 분석된 표면이 아닌 일반 표준에서 추론됩니다.
- 구성기 표면(사용자 정의 페인트/인테리어 선택기가 있는 차량 제작 페이지)이 분석된 URL 세트에 없었습니다. 견본 그리드, 사용자 정의 컨트롤 및 가격 요약 카드는 여기에 설명되어 있지 않습니다.
- 독일어 뉴스룸(newsroom.bugatti.com/de)은 영어 Bugatti.com 표면과 시스템을 공유합니다. 디자인 시스템 수준의 차이는 관찰되지 않고 언어 현지화만 가능합니다.
- 캡처된 스크린샷에서 희박한 최소 페이지로 렌더링된 실제 Tourbillon 페이지는 지연 로드된 콘텐츠 또는 정적 스크린샷에서 완전히 렌더링되지 않는 대화형 구성기 스타일 UI를 제안합니다. 엔진 사양 레이아웃은 캡처된 사양 셀 토큰을 통해 정보를 얻은 일반 고급 자동차 패턴으로 문서화됩니다.
概要
ブガッティのマーケティング面は、高級自動車の中で最も厳格なインターフェースです。真っ黒のキャンバス (`` — #000000) に白の大文字 **文字間隔**のディスプレイ タイプとフルブリードの自動車写真が表示されます。このシステムにはアクセントカラー、カード表面の装飾、影、グラデーション、クロムはなく、**写真、タイポグラフィ、およびブランドのワードマーク**のみが存在します。このカテゴリの他のすべての高級自動車サイト (BMW M、アストン マーティン、ランボルギーニ) は、何らかの形式のアクセント カラーまたは特徴的な要素を使用しています。ブガッティは何も使っていない。何もない空間、写真、正確に追跡されたブガッティ ディスプレイの見出しがブランドです。
システムは **3 つのカスタム Bugatti 書体**を実行します。**Bugatti Display** (見出し、「BUGATTI」ワードマーク、ワイド トラッキング付きのすべての大文字を表示)、**Bugatti Text Regular** (本文段落、セリフ テキスト フェイス)、**Bugatti Monospace** (ボタン ラベル、ナビゲーション、キャプション、日付など、精度と加工感が重要な場合はどこでも)。この分割は意図的であり、分割することはできません。ボタン内で Bugatti テキストを使用したり、段落内で Bugatti 等幅を使用したりしないでください。
表示サイズではウェイト 400 (標準) が使用されます。太字は使用しません。視覚的に重視されるのは、重量ではなく**サイズと追跡**です。ワードマークの文字間隔は 6 ピクセルです。ディスプレイ上の見出しは 2 ～ 4 ピクセル。大文字のラベルでは 2 ～ 2.5 ピクセル。厳しい追跡はブランド違反です。広い間隔は、他の高級メーカーにはない「設計された精密さ」の感触を生み出します。
**主な特徴:**
- 真っ黒のキャンバス (`` — #000000) に白のタイプ。システムにはライト モードがありません。
- 3 つのカスタム Bugatti 書体: **ディスプレイ** (大文字の見出し + ワードマーク)、**テキスト通常** (本文セリフ)、**等幅** (ボタン、キャプション、ナビゲーション)。
- すべての表示見出しは大文字で、文字間隔は広くなります (2 ～ 4 ピクセル)。本文のコピーは、標準の追跡では文例のままです。
- アクセントカラーはありません。サイト上の唯一の非モノクロ色は `` (#c3d9f3) です。これは、インライン アンカー リンクで使用される彩度の低いアイスブルーであり、これさえもめったに表示されません。
- ボタンは丸薬の形 (``) で、**透明な背景**と 1 ピクセルの白い輪郭があります。ブガッティは、プライマリ CTA が完全に透明である唯一の高級自動車ブランドです。
- 写真は唯一の奥行き要素です。ドロップシャドウはありません。グラデーションはありません。カード面はありません。 Surface カードは最大でも `` (#141414) で、黒とほとんど変わらないトーンです。
- セクションのリズムはゆったりしています — 主要バンド間の_`` (120ピクセル)。Bugattiのページはほとんどが写真であり、テキスト密度が最小限に抑えられているため、ほとんどのマーケティング サイトよりも長いです。
色
ブランドとアクセント
- **プライマリ** (`` — #ffffff): 単一のブランドカラー。黒のキャンバスに白の文字と白の CTA アウトライン。
- **リンク** (`` — #c3d9f3): システム内で唯一の非モノクロ色です。彩度の低いアイスブルーはインライン アンカー リンクで使用され、フォーカス状態ではほとんど使用されません。ブガッティのブランド規律は非常に厳格であるため、この 1 つのトークンが基本的に白黒以外の色彩語彙全体となります。
サーフェス
- **キャンバス** (`` — #000000): すべての面にわたるデフォルトのページフロア。 ピュアブラック。
- **Surface Soft** (`` — #0d0d0d): スペック テーブルの行と高密度データ セクションに使用される、黒とほとんど変わらないトーン。
- **表面カード** (`` — #141414): カード (キャリアコールアウト、ニュースルーム記事コンテナ、臨時コンテンツカード)。カードの表面もほぼ黒のままで、コントラストの変化はありません。
- **サーフェス エレベーテッド** (`` — #1f1f1f): 黒から一歩進んで、まれに密度の高いページのネストされたカードに使用されます。
- **ヘアライン** (`` — #262626): 1 ピクセルの分割トーン。見えるけど静か。表の行、本文セクションの間、カードのアウトラインの周囲で使用されます。
- **強いヘアライン** (`` — #3a3a3a): 入力フィールドの下側に使用される太い分割線 (入力フィールドには境界線がなく、下線のヘアラインのみ)。
テキスト
- **インク / ダーク色** (`` — #ffffff): すべての見出しとメイン テキストはダーク キャンバス上にあります。
- _**Body** (`` — #cccccc): デフォルトの実行テキストの色 (純粋な白よりわずかに寒色)。本文の段落で使用されます。
- **強固な本文** (`` — #e6e6e6): 強調された本文/リード段落。
- **ミュート** (`` — #999999): フッター リンク、日付、キャプション、セカンダリ メタデータ。デブラントの頻度分析により、これがパレット 2 (カウント 6、中程度の信頼度) であることが確認されています。
- **ミュート ソフト** (`` — #666666): 非常に二次的なテキスト (法的免責事項、著作権ライン) をミュートした第 2 層。
セマンティック
- **警告** (`` — #d4a017): 技術的な警告コールアウト (仕様、リコール通知) 用に予約されています。マーケティング面にはほとんど表示されません。
- **成功** (`` — #5fa657): 注文確認の状態 (マーケティング ページではまれです)。
タイポグラフィ
フォント ファミリー
システムは **3 つのカスタム Bugatti 書体**を厳密な三位一体として実行します:
1. **Bugatti ディスプレイ** — すべてのディスプレイの見出し (h1、h2、h3)、「BUGATTI」のワードマーク、モデルのネーム プレート。大文字、ワイドトラック。視覚的に強調するためのデフォルト。
2. **Bugatti Text Regular** — 本文コピー、リード段落、モデル説明の実行専用に使用されるセリフ テキスト面。標準文の大文字小文字、文字間隔なし。
3. **Bugatti Monospace** — ボタンのラベル、ナビゲーション、キャプション、日付、等幅精度のコンテキスト。 2 ～ 2.5 ピクセルの追跡では常に大文字になります。
分割は機能的かつ絶対的なものです。ボタン内のブガッティ ディスプレイは、「機械加工された精密さ」という声を打ち破ります。ブガッティのモノスペースは、ある段落で「エンジニアリングされたエレガンス」という声を打ち破ります。ブガッティ ボタン内のテキストは考えられません。
フォールバック スタックは、Bugatti Display の場合は `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`、Bugatti Text Regular の場合は `Garamond, "Times New Roman", serif`、Bugatti Monospace の場合は `ui-monospace, "SF Mono", "Cascadia Mono", monospace` を歩きます。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 64ピクセル | 400 | 1.1 | 4ピクセル |ヒーロー h1 (「ブガッティ F.K.P. オマージュ」、「トゥールビヨン」) — ブガッティ ディスプレイ、大文字、ワイドトラック |
| `` | 48ピクセル | 400 | 1.15 | 3ピクセル |セクションの見出し — Bugatti 表示、大文字 |
| `` | 32ピクセル | 400 | 1.2 | 2ピクセル |サブセクションの見出し、モデル名 — Bugatti Display |
| `` | 24ピクセル | 400 | 1.3 | 1.5ピクセル |カード タイトル — ブガッティ ディスプレイ |
| `` | 14ピクセル | 400 | 1.0 | 6ピクセル |上部ナビゲーションの「BUGATTI」ブランド ワードマーク — Bugatti ディスプレイ、システム内で最も広い追跡 |
| `` | 20ピクセル | 400 | 1.3 | 1ピクセル |キャリアリストのタイトル、紹介文 — Bugatti Display |
| `` | 16ピクセル | 400 | 1.3 | 1.5ピクセル |中層の見出し、コールアウト カード |
| `` | 11ピクセル | 400 | 1.4 | 2ピクセル |写真キャプション、メタデータ、「EXPLORE OUR OPPORTUNITIES」 — Bugatti Monospace、大文字 |
| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 — Bugatti Text Regular (セリフ体)、大文字小文字、追跡なし |
| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文、法的細字 — Bugatti Text Regular |
| `` | 14ピクセル | 400 | 1.0 | 2.5ピクセル |すべてのボタン ラベル - Bugatti 等幅、大文字、2.5 ピクセルのトラッキング |
| `` | 12ピクセル | 400 | 1.4 | 2ピクセル |トップナビゲーションのメニュー項目 (「メニュー」、「ストア」) — Bugatti Monospace |
原則
_システムは太字の重みを決して使用しません。すべての Bugatti 書体はウェイト 400 (標準) に設定されています。視覚的な強調は
から来ています。
1. **サイズ** — 64 ピクセルのヒーローと 16 ピクセルのボディは 4 倍の階層
2. **文字間隔** — 6 ピクセルのワードマークと 0 ピクセルの本文
3. **Case** — 大文字の表示と文の大文字の本文
4. **ファミリー コントラスト** — ディスプレイ vs テキスト 通常 vs 等幅
どこにいてもウェイト 700 にすると、「控えめなエンジニアリング」の雰囲気が崩れ、ブガッティが一般的な高級テンプレートのように見えてしまいます。
ブガッティのセリフ テキスト レギュラーは、ブランドをすべてサンセリフの高級ブランド（BMW、アストン マーティン、ランボルギーニのすべてがサンセリフのボディ タイプを使用しています）とは一線を画しています。ブガッティのセリフ体の声は、文学的で熟考されたゆっくりと読める散文を表しています。これがブランドの編集哲学です。
フォントの代替に関する注意
Bugatti Display、Bugatti Text Regular、および Bugatti Monospace が利用できない場合、最も近いオープンソースの代替品は次のとおりです:
- **Bugatti ディスプレイ** → **Sira Condensed** (可変、ウェイト 400)、+0.05em 文字間隔
- **Bugatti Text Regular** → **Cormorant Garamond** (通常) または **EB Garamond**
- **Bugatti Monospace** → **JetBrains Mono** または **IBM Plex Mono** (通常のウェイト)
置換により 3 つのファミリーの分割が維持されますが、これは書体の正確な一致よりも重要です。
レイアウト
間隔システム
- **基本単位:** 4px.
- **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 40px · `` 64px · `` 120px.
- **セクション パディング:** `` (120px) - ブガッティのバンドはほとんどが写真でテキストが最小限に抑えられているため、ほとんどのマーケティング サイトよりも長くなります。 空きスペースが車を囲みます。
- **カードの内部パディング:** ニュースルームおよびコンテンツ カードの場合は `` (24 ピクセル)。 `` (16px) キャリアコールアウトカード用。 `` (64px) ヒーロー写真バンド内。
- **余白:** `` (40px) 2 アップ グリッドのカード間 - ブガッティのグリッドはまばらであるため、通常よりも幅が広いです。
グリッドとコンテナ
- **コンテンツの最大幅:** 中央に最大 1280 ピクセル。ヒーロー写真のバンドは、最大値なしで全幅に裁ち落としされます。
- **編集本文:** 単一の 12 列グリッド。フォトバンドはフルブリードです。
- **ニュースルームのレイアウト:** デスクトップでは 2 アップの記事グリッド、タブレット + モバイルでは 1 アップ。
- **求人情報:** 行間隔 80 ピクセルの 1 列。
ホワイトスペースの哲学
ブガッティは、高級自動車の競合他社よりも積極的にホワイトスペースを使用しています。ホームページのヒーローは、ほとんどが写真 + 巨大な空白 + 1 つの文 + 1 つのボタンです。写真の下の黒い空のスペースは意図的なもので、車に呼吸をさせます。 「より多くのコンテンツを収める」ために空白を圧縮することは、少ないほど良いというブランドの基本的な契約を破ります。
標高と深さ
|レベル |治療 | |
を使用します
|---|---|---|
|フラット |影も境界線もありません |本文、トップナビゲーション、フッター、フォトバンド |
|柔らかいヘアライン | 1px `` 境界線 |セクション区切り線、表の行 |
|カード表面 | `` 背景 — 影なし |キャリアコールアウト、ニュースルーム記事コンテナ |
|写真の奥行き |端から端までクロップしたフルブリード写真 |ヒーロー バンド、モデルのショーケース — クロムではなく、被写体 + レンズによる奥行き |
システムはシャドウ、グラスモーフィズム、グラデーションを使用しません。奥行きはもっぱら写真 (照明、レンズ、被写体の構図) と、黒いキャンバスと最小限の高さのコントラストから生まれます ``.
装飾の深さ
- なし。ブガッティは、装飾的な要素を一切持たない唯一の高級自動車ブランドです。マーケティング サイトのワードマーク自体の外側には、ストライプ、バッジ、伝統的なエンブレムはありません。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 0ピクセル |すべてのカード、フォト コンテナ、入力、スペック セル — 支配的な半径 |
| `` | 9999ピクセル |すべてのボタン (システム内で唯一の丸い要素) |
| `` | 9999ピクセル / 50% |円形のアイコン ボタン、アバター サーフェス |
_半径階層はバイナリです。ボタン (錠剤) を除くすべてが長方形です。中間の 4 ピクセル、8 ピクセル、12 ピクセルは使用できません。これらは、「設計された」というよりも「デザインされた」と感じられます。
写真の幾何学
_ヒーロー写真は四捨五入せずに全幅いっぱいに表示されます。グリッド内の写真カードには、__CODEBCK_583___ (0px) の隅、端から端までの画像が保持されます。モデルの詳細ショットでは、16:9 以上の映画アスペクト比が使用されます。ニュースルームのサムネイルは 16:9、コーナーが 0px を使用します。 マーケティング サイトのどこにも、アバターや丸い写真のトリミングはありません。
コンポーネント
トップナビゲーション
**`top-nav`** — 各ページの上部にあるヒーロー写真にオーバーレイされる高さ 56 ピクセルの透明なナビゲーション バー。塗りつぶしも境界線もありません。左側に「MENU」、中央に **ワードマーク ディスプレイ** (6 ピクセルのトラッキングを備えた 14 ピクセルの Bugatti ディスプレイの「BUGATTI」)、右側に小さなバッグのアイコンが付いた「STORE」が表示されます。すべてのラベルは `` (Bugatti Monospace、12 ピクセル、2 ピクセル トラッキング、大文字)。
_**`wordmark-display`** — 「BUGATTI」ワードマーク自体。 Bugatti ディスプレイは 14 ピクセル、ウェイト 400、文字間隔 6 ピクセル。システム内で最も広範囲のトラッキング。すべてのブレークポイントでナビゲーション バーの中央に配置されます。
ボタン
**`button-primary`** — 署名のプライマリ CTA。背景 **透明**、テキスト `` (白)、1 ピクセルの白いアウトライン、丸い `` (9999 ピクセル)、パディング 14 ピクセル × 32 ピクセル、高さ 44 ピクセル。 `` と入力します — Bugatti 等幅、大文字、14 ピクセル、2.5 ピクセルのトラッキング。透明な塗りつぶしはブガッティ独自のもので、他の高級自動車ブランドはすべて、塗りつぶしまたはアウトラインでテキストのシフト ボタンを使用しています。ブガッティの透明な錠剤はボタンです。
**`button-icon`** — 円形のアイコン ボタン (カルーセル矢印、共有、言語スイッチャー)。 40 × 40 ピクセル、透明な背景、白い輪郭 1 ピクセル、丸みを帯びた ``。主ボタンと同じアウトラインのみの扱い。
**`text-link`** — `` のインライン本文リンク (#c3d9f3、システム内の唯一の非モノクロ色)。デフォルトでは下線が付いています。タイプは__CODEBCK_595___ (Bugatti Text Regular、セリフ) を継承します。
カードとコンテナ
**`hero-photo-band`** — フルブリードの自動車写真を備えた全幅の黒いバンド。 `` の h1 は、写真の上部近くの中央に配置され、多くの場合、見出しの下にある小さな Bugatti 等幅キャプション (``) と、さらにその下にある単一の `` が組み合わされています。写真の高さに応じて、垂直方向のパディングが 96 ピクセルから 200 ピクセルになります。
**`career-callout-card`** — ホームページ上のヒーロー写真の上に浮かぶ、募集プロンプト (「新しい冒険の準備はできていますか?」) を含む小さな右揃えのカード。背景__CODEBCK_601___、角丸__CODEBCK_602___ (0px)、パディング__CODEBCK_603___ (16px)、幅320px。上部、ボディライン、__CODEBCK_604___ リンク (「機会を開拓してください」) に小さなサムネイルが表示されます。
**`model-photo-card`** — モデル ショーケース (トゥールビヨン ページ、モデル ラインナップ グリッド) で使用されます。背景__CODEBCK_606___ (カード表面なし - 黒地に写真のみ)、丸みを帯びた__CODEBCK_607___。上: モデルの 16:9 または 21:9 のヒーロー ショット。以下: `` (32 ピクセル Bugatti ディスプレイ、2 ピクセル トラッキング) のモデル名、__CODEBCK_609___ (11 ピクセル Bugatti Monospace) の短いスペックライン、__CODEBCK_610___ (「DISCOVER」)。
_**`newsroom-article-card`** — ニュースルーム ページ (newsroom.bugatti.com) で使用されます。背景__CODEBCK_612___、ヘアライン枠、丸みのある__CODEBCK_613___、パディング__CODEBCK_614___ (24ピクセル)。 16:9 のサムネイル、__CODEBCK_615___ (「12. NOVEMBER 2025」)、__CODEBCK_616___ の見出し、__CODEBCK_617___ (Bugatti Text Regular serif) の本文の抜粋が含まれます。
**`career-listing-row`** — 採用ページの求人リストの各行。透明な背景、垂直方向に 24 ピクセルのパディング、行間のヘアライン区切り。左の__CODEBCK_619___ (Bugatti Display 20px) の役職。右の__CODEBCK_620___の所在地と部門。山形矢印 (→) は右端にあります。
_**`spec-cell`** — モデルの詳細ページに車両の技術仕様が表示されます (トゥールビヨン エンジンの仕様)。 セル間のヘアラインの仕切りのある透明な背景 (カード内のセル間ではありません)。各仕様には、上部の `` に値が表示され、下部の `` にラベルが表示されます。垂直方向に 24 ピクセルのパディング。
入力とフォーム
**`text-input`** — 暗いキャンバスに標準のテキスト入力。背景 **透明**、テキスト ``、1 ピクセルのヘアラインの強い下枠のみ (上、左、右の枠なし)、パディング 12 ピクセル × 0 ピクセル、高さ 44 ピクセル。 `` (Bugatti Text Regular) と入力します。 `` のプレースホルダー。フォーカスすると、下の境界線が太くなり白になります。
タグとキャプション
_**`caption-overlay`** — 写真オーバーレイ キャプション (例: 「オエイロンとその先見の明のあるクリエイターを讃える」)。 `` (Bugatti Monospace、11 ピクセル、2 ピクセル トラッキング、白) の写真の上に中央揃えまたは左揃え。
**`category-tag`** + **`date-pill`** — どちらも ``、色 `` の透明なインライン ラベルとしてレンダリングされます。背景の塗りつぶしや境界線はありません。 「タグ」はタイプそのものです。
CTA / フッター
**`cta-band-photo`** — プレフッター「Discover Bugatti」バンド。スピードを出しているブガッティ車のフルブリード写真と、中央に__CODEBCK_635___とその下の__CODEBCK_636___の見出しが含まれています。垂直パディング80ピクセル。フルブリード写真を通じて、ヒーローの編集上の重要性を継承します。
_**`footer`** — すべてのページを閉じる黒いフッター。背景__CODEBCK_638___、テキスト__CODEBCK_639___。デスクトップ上の 4 列のリンク リスト。Bugatti / Models / Heritage / Connect をカバーします。垂直パディング64ピクセル。一番下の行には、__CODEBCK_640___ (Bugatti Text Regular) の著作権行が含まれています。ワードマークは最下部に中央揃えで配置されます。フッターは決して反転しません。
推奨事項と禁止事項
_実行
- _すべてのページに全面に自動車の写真を掲載します。車はブランドのボルテージです。クロムは完全に後退します。
- すべての表示見出しを大文字の Bugatti 表示にし、文字間隔を 2 ～ 4 ピクセルにしてください。ワードマークは 6 ピクセルになります。
- 見出しには Bugatti Display、本文には Bugatti Text Regular (セリフ!)、ボタン + キャプション + ナビゲーションには Bugatti Monospace を使用します。三位一体は破壊不可能です。
- __CODEBCK_641___ を 1 ピクセルの白い輪郭で透明にしておきます。透明な錠剤はブランドボタンです。
- _どこでもウェイト 400 を使用します。太字はブランドの声を壊します — システムには太字の重みの役割がありません。
- 主要な編集バンド間では__CODEBCK_642___ (120ピクセル) を使用します。ホワイトスペースはブランドの一部です。
- __CODEBCK_643___ (#c3d9f3) はインライン アンカー リンクのみに予約してください。これは、システムの唯一のモノクロ以外の色です。
しないでください
- __CODEBCK_644___ の外側にアクセント カラーを導入しないでください。ブガッティのブランド規律は完全なモノクロ + 写真です。ブランドブルーまたはブランドレッドを追加すると、契約が破棄されます。
- どの文字も太字にしないでください。このシステムには太字のウェイトはなく、すべての書体は 400 のままです。
- _主ボタンを埋めないでください。透明+輪郭のみ。白一色のボタンは、ブランド外であることを示します。
- セクション間の空白を圧縮しないでください。 120 ピクセルのリズムは編集ペースの一部です。
- ボタンの外側に丸い角を使用しないでください。カード、写真、入力はすべて 0px のままです。丸いカードは、高級品ではなく、消費者向けの技術として読み取れます。
- 表示見出しの文字間隔を狭くしないでください。 Bugatti ディスプレイでの 2 ～ 4 ピクセルのトラッキングは交渉の余地がありません。
- ボタンで Bugatti Display (Bugatti Monospace を使用) または段落で Bugatti Monospace (Bugatti Text Regular を使用) を使用しないでください。三位一体はブランドの声です。
応答動作
ブレークポイント_
|名前 |幅 |主な変更点 |
|---|---|---|
|モバイル | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |
|タブレット | 768–1024ピクセル |トップナビゲーションは最小限 (MENU + ワードマーク + STORE) のままです。 2-up ニュースルーム グリッド。キャリア行全角 |
|デスクトップ | 1024–1440ピクセル |完全に最小限のトップナビゲーション。 2-up ニュースルーム グリッド。スペック表 4-up |
|ワイド | > 1440ピクセル |デスクトップと同じですが、より広いスペースを備えています。最大コンテンツ 1280px |
タッチターゲット_
- `` は、最小 44 × 44 ピクセル (WCAG AAA に一致) でレンダリングされます。
- `` は正確に 40 × 40 ピクセルです。
- `` 高さは 44 ピクセルです。
- _キャリアリストの行には垂直方向のパディングが 24 ピクセルあります。有効なタップ領域は周囲のスペースと合わせて 44 ピクセル以上となります。
戦略の崩壊
- トップ ナビゲーションはすべてのブレークポイント (MENU ラベル + ワードマーク + STORE ラベル) で最小限のままです。モバイルでは、ラベルはハンバーガーの後ろに隠れますが、ワードマークは中央に残ります。
- _ヒーローの写真は、どのブレークポイントでもフルブリードのままです。写真の切り抜きを調整します — デスクトップでは幅の広い切り抜き、モバイルでは垂直方向の切り抜きを行います。
- ホームページのキャリア コールアウト カードは < 768px (it's a desktop-only floating element).
に表示されます。
- 2 アップのニュースルーム グリッドが < 768px.
で 1 アップに折りたたまれます
- _仕様セルは 4 アップから 2 アップ、そして 1 アップへリフローします。列数に関係なく、値は同じ表示サイズに保たれます。
画像の動作
- ヒーローの写真は、デスクトップでは幅が広く切り取られ、モバイルでは垂直方向に切り取られます。ブガッティ車は常に動いているか斜めに表示されます (決してフラットなプロファイルではありません)。
- ニュースルームのサムネイルは 16:9 の比率と 0 ピクセルのコーナーを保持します。
反復ガイド
1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キー (``、__CODEBCK_649___) を参照します。
2.新しいコンポーネントのデフォルトは `` (0px) です。 `` と `` のみがピル/全範囲を使用します。
3.バリアントは、__CODEBCK_653___.
の個別のエントリとして存在します。
4.どこでも `` を使用します。16 進数をインライン化しないでください。
5.決してホバーを文書化しないでください。デフォルトおよびアクティブ/押された状態のみ。
6.ディスプレイの見出しは大文字のままです。Bugatti Display 400 (2 ～ 4 ピクセルのトラッキング付き)。本文は文と大文字の Bugatti Text Regular (セリフ) のままです。ボタンのラベルは Bugatti Monospace 2.5px トラッキングのままです。三位一体はブレません。
7.強調するかどうか迷った場合は、文字を大きくする前に、写真を大きくしてください。
既知のギャップ
- デムブラント周波数アナライザーは、ルート レベルで 3 色のみをキャプチャしました (``、__CODEBCK_656___、__CODEBCK_657___)。 白いテキスト (#ffffff) と暗い表面の色調 (``、__CODEBCK_659___、__CODEBCK_660___) はスクリーンショットから推測されました。ブガッティのページは非常にモノクロなので、周波数ベースのアナライザーは本文のテキストや表面の色調を個別のパレット エントリとして表示しませんでした。
- Bugatti の 3 つの書体 (Display、Text Regular、Monospace) は Bugatti にライセンスされており、Web フォントとして一般に公開することはできません。代替案については、タイポグラフィのセクションに記載されています。
- アニメーションと遷移のタイミング (写真カルーセルの遷移、メニューのホバー表示、コンフィギュレータのアニメーション) は対象外です。
- 下線のみ__CODEBCK_661___を超えるフォーム検証状態は抽出されません。エラー/成功状態は、分析された表面からではなく、一般的な標準から推測されます。
- コンフィギュレータ サーフェス (カスタム ペイント/インテリア ピッカーを備えた車両ビルド ページ) は、分析された URL セットに含まれていませんでした。スウォッチ グリッド、カスタマイズ コントロール、および価格概要カードについては、ここでは説明していません。
- ドイツ語のニュースルーム (newsroom.bugatti.com/de) は、英語の Bugatti.com のサーフェスとシステムを共有しています。デザイン システム レベルの違いは観察されず、言語のローカライズのみが行われます。
- 実際のトゥールビヨン ページは、キャプチャされたスクリーンショットでまばらな最小限のページとしてレンダリングされ、遅延読み込みされたコンテンツ、または静的スクリーンショットでは完全にはレンダリングされないインタラクティブなコンフィギュレーター スタイルの UI を示唆しています。エンジン仕様レイアウトは、キャプチャされた仕様セル トークンによって通知される一般的な高級車パターンから文書化されます。