Lamborghini

---
version: alpha
name: "Lamborghini"
description: "Lamborghini 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

# 受 Lamborghini 启发的设计系统

## 1. 视觉主题与氛围

Lamborghini 的网站像一座黑暗大教堂：jet-black surface 无限延展，每个元素都像 spotlight 下的机器一样从虚空中浮现。页面几乎完全是黑色。不是 dark gray，也不是 near-black，而是真正 uncompromising 的黑（`#000000`），充满整个 viewport，绝不退让。白色 typography 与 Lamborghini Gold（`#FFC000`）被手术般精准地置入这片深渊，形成一种像夜间 motorsport event 的视觉语言：除了重要事物，每个 surface 都在吸收光线。

Hero 是 full-viewport video：dark、cinematic、immersive，展示 event footage 或 vehicle reveal，Lamborghini bull logo 漂浮在画面上方。Navigation 极简：居中的 bull logo，左侧 “MENU” hamburger，右侧 search / bookmark icons，全部以白色呈现在 black canvas 上。没有 border，没有可见 nav container，header 没有 background color，只有白色标记漂浮在黑暗中。整体情绪是 nocturnal luxury：exclusive、theatrical，并且 deliberately intimidating。每个 section transition 都像穿过黑暗，进入下一次揭示。

Typography 是这片黑暗的声音。LamboType 是 Character Type 与设计机构 Strichpunkt 为 Lamborghini 创建的 custom Neo-Grotesk typeface，从 120px uppercase display headline 到 10px micro label 都使用它。它标志性的 12° angled terminals 来自 Lamborghini super sports car 的空气动力学线条，比例从 Normal 到 Ultracompressed width。Headline 以巨大 scale 的 uppercase 大声“喊出”，并使用 tight line-height（120px 时 0.92），形成像钢印压出的 dense text block。该 typeface 带有 hexagonal geometric DNA：由 hexagon、three-armed star 与 circle 构成，并在 hexagonal pause button 与 UI icons 中贯穿整个 interface。技术基础则隐藏在戏剧化表面之下：Bootstrap grid 加 68 个 Element Plus / UI components。

**Key Characteristics:**
- True black（`#000000`）主导 surface，white 与 gold 是唯一 relief colors。
- LamboType custom Neo-Grotesk font，带 12° angled terminal，灵感来自车辆空气动力学线条。
- Lamborghini Gold（`#FFC000`）作为唯一 accent color，只用于 primary CTA button。
- 极端 scale（120px、80px、54px）的 all-uppercase display typography，并配 tight line-height。
- Full-viewport video hero，承载 cinematic event / vehicle content。
- Button 使用 zero border-radius：sharp、angular、uncompromising rectangles。
- UI element 中的 hexagonal motif（pause button、icon system）呼应 brand geometry。
- 底层使用 Bootstrap grid system + 68 个 Element Plus / UI components。
- Transparent ghost button 使用 50% opacity white border，是 secondary CTA pattern。

## 2. 色彩 palette 与角色

### Primary
- **Lamborghini Gold** (`#FFC000`): Signature accent color，是 warm、saturated amber-gold（rgb 255, 192, 0），专用于 primary action button（“Discover More”、“Tickets”、“Start Configuration”）。它是整个 interface 中唯一 chromatic color，在 black canvas 上像穿透夜色的车灯一样点燃画面。
- **Pure White** (`#FFFFFF`): Dark surface 上的 primary text color、logo rendering、nav elements 与 light-mode button fills，是从黑暗中发声的颜色。

### Secondary & Accent
- **Dark Gold** (`#917300`): Gold button 的 hover / pressed state，是 deep amber（rgb 145, 115, 0），通过加深 gold 来提示 interaction。
- **Gold Text** (`#FFCE3E`): 稍亮的 gold variant（rgb 255, 206, 62），用于 inline text accent 与 highlighted label。
- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan（rgb 41, 171, 226），作为 informational accent 与 interactive element highlight 出现。
- **Link Blue** (`#3860BE`): Medium blue（rgb 56, 96, 190），普遍用于所有 text color 的 link hover state。

### Surface & Background
- **Absolute Black** (`#000000`): Dominant surface color，用于 page background、hero section、header、footer 与多数 container。
- **Charcoal** (`#202020`): Elevated dark surface（rgb 32, 32, 32），是位于 black canvas 之上的 card、panel 与 text container 的主要 “dark gray”。
- **Dark Iron** (`#181818`): Subtle surface variant（rgb 24, 24, 24），几乎难以与黑色区分，用于 footer 与 deep section。
- **Overlay Black** (`rgba(0,0,0,0.7)`): Modal 与 video dimming 的 semi-transparent overlay。
- **Near White** (`#F8F8F8`): 少见的 light surface（rgb 248, 248, 248），用于 white-mode section 中的 content block。
- **Mist** (`#E6E6E6`): Secondary light-mode container 的 light gray surface。

### Neutrals & Text
- **Pure White** (`#FFFFFF`): Dark background 上的 primary text，包括 headline、body、nav label。
- **Smoke** (`#F5F5F5`): Dark surface 上的 secondary text，比 pure white 更柔和。
- **Graphite** (`#494949`): Light surface 上的 dark gray text（rgb 73, 73, 73）。
- **Ash** (`#7D7D7D`): Muted text、timestamp 与 metadata 的 mid-range gray（rgb 125, 125, 125）。
- **Steel** (`#969696`): Disabled text 与 subtle label 的 lighter gray（rgb 150, 150, 150）。
- **Slate** (`#666666`): Secondary content 的 alternative mid-gray。
- **Iron** (`#555555`): Body text variant 的 dark mid-gray。
- **Shadow** (`#313131`): Dark surface 上 white 过强时使用的 very dark gray text。

### Semantic & Accent
- **Cyan Pulse** (`#29ABE2`): 用于 informational highlight 与 interactive feedback。
- **Link Blue** (`#3860BE`): 所有 hyperlink 的 universal hover state。
- **Teal Action** (`#1EAEDB`): Transparent / ghost variant 的 button hover background（rgb 30, 174, 219）。

### Gradient System
- Color palette 中没有明确 gradient；dark-to-light progression 通过 surface layering 实现：`#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`。
- Video hero 使用内容自身的 natural atmospheric gradient。
- Top-of-page gradient：full-bleed imagery 边缘有 subtle dark-to-darker fade。

## 3. Typography 规则

### Font Family
- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial。Lamborghini 2024 brand refresh 中由 Character Type 提供的 custom Neo-Grotesk typeface。Width 从 Normal 到 Ultracompressed，weight 从 Light（300）到 Black。特征包括受车辆空气动力学几何启发的 12° angled terminal、hexagonal construction logic，并支持 Latin、Cyrillic、Greek 等 200+ 语言。
- **Fallback/UI**: `Open Sans`，在部分 button / form context 中作为 system fallback。
- Marketing site 未观察到 italic variant；brand voice 始终 upright。

### Hierarchy

| Role | Size | Weight | Line Height | Letter Spacing | 说明 |
|------|------|--------|-------------|----------------|-------|
| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |
| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |
| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |
| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |
| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |

### Principles
- **ALL-CAPS 是默认声音**：Display 与 feature heading 普遍 uppercase，形成 shouting、commanding 的语气，匹配品牌的 aggression。
- **Extreme scale range**：从 120px hero 到 10px micro label，12:1 的比例制造 dramatic visual hierarchy。
- **大尺寸使用 tight line-height**：Display size 使用 0.92–1.19 line-height，形成 dense、compressed 的 type block，感觉像被冲压出来，而不是排版出来。
- **Weight 400 主导**：不同于很多用 bold 做强调的 design system，Lamborghini 的 regular weight 承载 headline；typeface 本身足够鲜明，不需要 weight variation。
- **Caption 使用 negative tracking**：14px caption 上的 -0.42px letter-spacing 形成 compressed、technical aesthetic。
- **Micro text 使用 positive tracking**：10px 上的 +0.225px 确保最小尺寸可读。
- **Single typeface discipline**：LamboType 处理一切；12° angled terminal 与 hexagonal geometry 在所有尺寸上提供 visual coherence。

## 4. Component 样式

### Buttons
所有 button 都使用 **zero border-radius**：sharp、angular rectangles，呼应 Lamborghini vehicle 的 aggressive lines。

**Gold Accent CTA** — Primary action：
- Default：bg `#FFC000`（Lamborghini Gold）、text `#000000`、padding 24px、fontSize 16px、fontWeight 400、borderRadius 0px、no border。
- Hover：bg `#917300`（Dark Gold），显著变暗。
- Class: `btn-accent btn-large`
- 用于：“Discover More”、“Tickets”、“Start Configuration”。

**Transparent Ghost** — Dark background 上的 secondary action：
- Default：bg transparent、text `#FFFFFF`、border 1px solid `#FFFFFF`、padding 16px、opacity 0.5。
- Hover：bg `#1EAEDB`（Teal Action）、text white、opacity 0.7。
- Focus：bg `#1EAEDB`、border 1px solid `#000000`、outline 2px solid `#000000`。
- 用于：hero section 与 dark panel 上的 secondary CTA。

**White Filled** — Light-mode primary：
- Default：bg `#FFFFFF`、text `#202020`、no border。
- 用于：gold 不合适的 dark section CTA。

**Black Filled** — Dark filled variant：
- Default：bg `#000000`、text `#202020`。
- 用于：light section 上的 inverted CTA。

**Gray Neutral** — Subtle action：
- Default：bg `#969696`、text `#202020`。
- 用于：secondary / tertiary action、badge-like button。

### Cards & Containers
- Background：black canvas 上使用 `#202020`（Charcoal），或在 lighter section 上使用 `#000000`。
- Border：section divider 使用 `0px 1px solid #202020` bottom border。
- Border-radius：0px（完全 sharp corners）。
- Shadow：minimal，通过 overlay opacity 表达 depth。
- Content：full-bleed photography + white overlaid text。

### Inputs & Forms
- Marketing site 上 form presence 很少。
- Switch element：border-radius 20px（唯一 rounded element）、border 1px solid `#DDDDDD`。
- Cookie banner input style：black 上 white text，border 为 `#7D7D7D`。

### Navigation
- **Desktop**：居中的 bull logo，左侧带 icon 的 “MENU” hamburger，右侧 search icon + bookmarks icon。
- **Background**：Transparent（继承 black page background）。
- **Sticky**：Fixed to top，漂浮在 content 上方。
- **No visible borders or shadows**：元素漂浮在黑暗中。
- **“MENU” label**：14px weight 400 white uppercase text，与 hamburger icon 搭配。
- **Hexagonal motifs**：Hero section 上的 pause button 使用 hexagonal outline shape。

### Image Treatment
- **Hero**：Full-viewport video section（100vh），承载 cinematic event / vehicle footage。
- **Event photography**：Lamborghini Arena event 的 full-bleed aerial shot。
- **Vehicle imagery**：Dark background 上的 high-contrast studio shot，full-width。
- **Aspect ratios**：以 16:9 和更宽比例为主，制造 cinematic feel。
- **Dark gradient overlays**：Video 顶部 / 底部边缘 subtle darkening，确保 text legibility。

### Distinctive Components
- **Hexagonal Pause Button**：Video control 使用 hexagonal outline（匹配 typeface 中的 brand geometric DNA），位于 hero section 右下角。
- **Progress Bar**：Hero section 底部的 thin white line，指示 video / slide progress。
- **Badge/Tag**：bg `#969696`、text white、padding 8px、fontSize 10px、borderRadius 2px，是 tiny metallic pills。

## 5. Layout 原则

### Spacing System
- **Base unit**：8px。
- **Full scale**：2px、4px、5px、8px、10px、12px、15px、16px、20px、24px、32px、40px、48px、56px。
- **Button padding**：16px（ghost）、24px（gold accent）。
- **Section padding**：vertical 48–56px、horizontal 40px。
- **Small spacing**：2–5px，用于 fine adjustment（badge padding、border spacing）。

### Grid & Container
- **Framework**：Bootstrap grid system（container + row + col）。
- **Max width**：1440px（largest breakpoint）。
- **Columns**：标准 12-column Bootstrap grid。
- **Full-bleed**：Hero section 跳出 grid，edge-to-edge 填满 viewport。
- **Content areas**：在 1200px max-width container 内居中。

### Whitespace Philosophy
Lamborghini 把 darkness 当作 whitespace。Content block 之间宽阔的黑色区域，承担 light design 中 white space 的同等功能：创造 breathing room，并把每个元素抬升为 exhibit。一个 model name 漂浮在 black viewport 中央，拥有类似 white wall 上 gallery piece 的视觉重量。颜色的缺席本身就是设计。

### Border Radius Scale
| Value | 场景 |
|-------|---------|
| 0px | 一切的默认值：button、card、container、image |
| 1px | Subtle span elements |
| 2px | Badge、close button、cookie element，几乎不可察觉 |
| 20px | 仅用于 toggle switch，是唯一 rounded element |

## 6. Depth 与 Elevation

| Level | Treatment | 用途 |
|-------|-----------|-----|
| Level 0 (Abyss) | `#000000` flat | Page background、deepest layer |
| Level 1 (Surface) | `#181818` or `#202020` | Card、content panel、elevated section |
| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrop、video dimming |
| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlay、hover state |
| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |

### Shadow Philosophy
Lamborghini 通过 surface color layering 而不是 shadow 来实现 depth。在 black canvas 上，传统 drop shadow 不可见；因此系统通过从 absolute black 逐步转向更亮的 dark gray 来创造 elevation：`#000000` → `#181818` → `#202020` → `#494949`。这种 “darkness gradient” 方法意味着 elevated element 在字面上比周围更亮，反转了传统 shadow model。

### Decorative Depth
- Full-bleed video 通过 cinematic lighting 提供 atmospheric depth。
- Hexagonal pause button 以 thin white outline stroke 漂浮。
- Hero section 底部的 progress bar 创造 subtle horizon line。
- UI element 不使用 gradient、glow 或 blur effect；所有 visual richness 由 photography 提供。

## 7. Do's and Don'ts

### Do
- 使用 absolute black（`#000000`）作为 primary background，绝不要用 dark gray 替代。
- Lamborghini Gold（`#FFC000`）只用于 primary CTA button，不用于装饰。
- 所有 display heading 使用 LamboType uppercase；brand voice 始终是 SHOUTING。
- Button 与 card 使用 zero border-radius；sharp angle 是不可妥协的。
- Display type 保持 tight line-height（0.92–1.19），创造 dense、architectural text block。
- Dark background 上 secondary CTA 使用 transparent ghost button（white border，50% opacity）。
- 让 full-viewport video / photography 承载 emotional weight；UI 是 infrastructure，不是 decoration。
- Hexagonal geometry 保留给 UI icon 与 video control button。
- Headline 使用 weight 400（regular）；typeface 足够鲜明，不需要 bold emphasis。
- Gray palette 保持 achromatic；所有 neutral 都是不带 tint 的 pure gray。

### Don't
- 不要在 gold 之外引入额外 accent color；monochrome-plus-gold system 是核心。
- 不要给 button 或 card 添加 border-radius；curved edge 与 angular vehicle aesthetic 冲突。
- 不要以 italic 或 decorative style 使用 LamboType；品牌始终 upright、direct。
- 不要给 button 或 surface 添加 gradient；depth 来自 surface layering，不来自 blending。
- 不要把 light background 作为 primary canvas；darkness 是默认状态，light 是例外。
- 不要在 display heading 中混入 lowercase；uppercase convention 传达 authority 与 power。
- 不要添加 scale 或 translate 的 hover animation；interaction 应只改变 color（background / opacity shift）。
- 不要用 Open Sans 做 display text；所有 visible typography 必须由 LamboType 承载。
- 不要创建很多小元素组成的 busy layout；Lamborghini 的设计是 singular、bold statement。
- 不要给元素添加 shadow；在 black canvas 上 shadow 没有意义，应改用 surface color shift。

## 8. Responsive Behavior

### Breakpoints
| Name | Width | 关键变化 |
|------|-------|-------------|
| Mobile Small | <425px | Single column、type scale 降低、button 堆叠 |
| Mobile | 425-576px | Single column、hamburger nav、hero text 约 40px |
| Tablet Small | 576-768px | 2-column grid 开始，padding 调整 |
| Tablet | 768-1024px | 2-column layout、expanded hero、vehicle card side-by-side |
| Desktop | 1024-1280px | Full navigation、3+ column grid、display text 80px |
| Desktop Large | 1280-1440px | Full layout、hero 120px display、max-width container |
| Wide | >1440px | Content 居中、margin 扩展、hero 填满 viewport |

### Touch Targets
- Gold CTA button：48px+ minimum height，24px padding（超过 WCAG 44×44px）。
- Ghost button：48px+，16px padding。
- Hamburger menu：large touch target（约 48px square）。
- Hexagonal pause button：直径约 48px。

### Collapsing Strategy
- **Navigation**：始终基于 hamburger（“MENU” + icon）；任何 breakpoint 都不展开 horizontal nav。
- **Hero video**：所有 breakpoint 保持 full-viewport height，并调整 object-fit。
- **Display type**：从 120px（desktop）→ 80px（tablet）→ 54px / 40px（mobile）缩放。
- **Button layout**：Desktop 上 side-by-side，mobile 上 vertical stack。
- **Grid columns**：3-column → 2-column → 1-column 递进。
- **Section spacing**：Vertical padding 从 56px → 40px → 24px 缩减。

### Image Behavior
- Hero video 使用 `object-fit: cover`，在所有尺寸保持 cinematic framing。
- Vehicle image 在 container 内按比例缩放，并保持 aspect ratio。
- Event photography 在 narrow screen 上裁切到 viewport width。
- Background image 在边缘变暗，以在所有 viewport 上保持 text contrast。

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA：“Lamborghini Gold (#FFC000)”
- Background：“Absolute Black (#000000)”
- Surface：“Charcoal (#202020)”
- Heading text：“Pure White (#FFFFFF)”
- Body text：“Ash (#7D7D7D)”
- Link hover：“Link Blue (#3860BE)”
- Accent：“Cyan Pulse (#29ABE2)”
- Border：“Pure White (#FFFFFF) at 50% opacity”

### Example Component Prompts
- “创建一个 hero section：full-viewport black background，model name ‘TEMERARIO’ 使用 LamboType 120px uppercase weight 400 white text、0.92 line-height，垂直居中，下方放 Lamborghini Gold (#FFC000) ‘Discover More’ button；sharp corners、0px radius、24px padding、black text。”
- “设计 transparent ghost button：black background 上 1px solid white border at 50% opacity，white text 14.4px uppercase，0.2px letter-spacing，padding 16px；hover state 变为 Teal Action (#1EAEDB) background，70% opacity。”
- “构建 navigation bar：absolute black 上 zero visible background，居中 bull logo，左侧 ‘MENU’ text label + hamburger icon，右侧 search + bookmark icon；全部 white，sticky position。”
- “创建 news card grid：charcoal (#202020) background，27px uppercase white headline，16px #7D7D7D body text，以及 white underlined ‘Read More’ link，hover 时变为 #3860BE。”
- “设计 section divider：black canvas 上使用 1px solid bottom border #202020；elevation difference 纯粹通过 surface color shift 表达，不使用 shadow。”

### Iteration Guide
当 refine 使用此 design system 生成的现有 screen 时：
1. 一次只聚焦一个 component；Lamborghini 的 system 很 extreme，每个元素都必须有 aggressive 感。
2. 引用本文中的具体 color name 与 hex code；palette 只有约 5 个 active colors。
3. 使用 natural language description，而不是 CSS value；说 “sharp-cut golden rectangle”，不要只说 “border-radius: 0px; background: #FFC000”。
4. 将目标 “feel” 与具体 measurement 一起描述；“floating in total darkness” 比 “background: #000000” 更能传达 black canvas。
5. 记住 UPPERCASE IS THE DEFAULT；display size 的文字如果不是 uppercase，通常就应该改成 uppercase。