设计系统 —— 灵感源自 Lamborghini
1. 视觉主题与氛围
Lamborghini 的网站是一座黑暗的教堂——一个数字舞台，漆黑表面无限延伸，每个元素都如聚光灯下的机器般从虚空中浮现。页面几乎完全是黑色。不是深灰，不是近黑——是真实、毫不妥协的黑（#000000），饱和视口且拒绝退让。在这片深渊中，白色字体与 Lamborghini 金（#FFC000）以手术般的精度部署，造就一种仿佛穿梭于夜间赛车活动中的视觉语言：每个表面都吸收光线，唯有重要的东西显形。
英雄区是一个全视口视频——黑暗、电影感、沉浸——展示活动画面或车辆揭幕，Lamborghini 公牛标志在其上飘渺悬浮。导航极简：居中的公牛 logo、左侧的"MENU"汉堡菜单、右侧的搜索/书签图标，全部以白色渲染于黑色画布之上。这里没有边框、没有可见的导航容器、没有顶部背景——只有浮于黑暗中的白色标记。整体氛围是夜间奢华：排他、戏剧化、刻意威压。每一次段落切换都是穿过黑暗的滚动，通向下一次揭示。
字体是这片黑暗的声音。LamboType——由 Character Type 与设计机构 Strichpunkt 共同打造的定制 Neo-Grotesk 字体——从 120px 的大写展示标题到 10px 的微标签皆被使用。其标志性的 12° 倾斜端点灵感来自 Lamborghini 超级跑车的空气动力学线条，比例从 Normal 到 Ultracompressed 不等。标题以紧致行高（120px 时 0.92）大写咆哮，营造出仿佛被钢模压印的密集文字块。字体承载六边形几何 DNA——由六边形、三角星与圆形构成——这种基因贯穿于界面的六边形暂停按钮与 UI 图标。底层基于 Bootstrap 网格，配合 68 个 Element Plus/UI 组件，技术底座在戏剧化表面之下十分厚重。
关键特征：
- 真黑（
#000000）主导表面，白与金是唯一的提亮色 - LamboType 定制 Neo-Grotesk 字体，12° 倾斜端点灵感来自空气动力学车线
- Lamborghini 金（
#FFC000）作为唯一点缀色——专用于主 CTA 按钮 - 极端尺寸（120px、80px、54px）下的全大写展示字体，配紧致行高
- 全视口视频英雄区，电影化活动/车辆内容
- 按钮零圆角——锐利、棱角分明、毫不妥协的矩形
- UI 元素中的六边形母题（暂停按钮、图标系统）呼应品牌几何
- 底层基于 Bootstrap 网格 + Element Plus/UI 68 个组件
- 透明幽灵按钮配 50% 透明度的白色边框，作为次级 CTA 模式
2. 配色与角色
主色
- Lamborghini 金（
#FFC000）：标志性点缀色——一种温暖、饱和的琥珀金（rgb 255、192、0），专用于主操作按钮（"Discover More"、"Tickets"、"Start Configuration"）。整个界面唯一的彩色，在黑色画布上如车灯划破夜色般点燃 - 纯白（
#FFFFFF）：深色表面的主文字色、logo 渲染、导航元素，以及浅色模式的按钮填充——从黑暗中发声的声音
次级与点缀
- 暗金（
#917300）：金色按钮的悬浮/按下状态——深琥珀（rgb 145、115、0），使金色变暗以暗示交互 - 金文字（
#FFCE3E）：略亮的金色变体（rgb 255、206、62），用于行内文字点缀与高亮标签 - 青色脉冲（
#29ABE2）：电光蓝青（rgb 41、171、226），作为信息点缀与交互元素高亮出现 - 链接蓝（
#3860BE）：中蓝（rgb 56、96、190），所有文字颜色下通用的链接悬浮状态
表面与背景
- 绝对黑（
#000000）：主导表面色——用于页面背景、英雄区、页头、页脚与多数容器 - 炭灰（
#202020）：抬升的暗色表面（rgb 32、32、32）——黑色画布之上卡片、面板、文字容器的主要"深灰" - 暗铁（
#181818）：柔和的表面变体（rgb 24、24、24）——与黑色几乎不可区分，用于页脚与深处段落 - 覆盖黑（
rgba(0,0,0,0.7)）：模态与视频调暗的半透明覆盖层 - 近白（
#F8F8F8）：罕见的浅色表面（rgb 248、248、248），用于白色模式段落中的内容块 - 雾（
#E6E6E6）：次级浅色模式容器的浅灰表面
中性与文字
- 纯白（
#FFFFFF）：深色背景上的主文字——标题、正文、导航标签 - 烟（
#F5F5F5）：深色表面上的次级文字——略柔和于纯白 - 石墨（
#494949）：浅色表面的深灰文字（rgb 73、73、73） - 灰烬（
#7D7D7D）：中调灰，用于弱化文字、时间戳与元数据（rgb 125、125、125） - 钢（
#969696）：较浅的灰，用于禁用文字与微妙标签（rgb 150、150、150） - 板岩（
#666666）：次级内容的另一种中灰 - 铁（
#555555）：正文字体变体的深中灰 - 影（
#313131）：深色表面文字中白色过强时的极深灰
语义与点缀
- 青色脉冲（
#29ABE2）：用于信息高亮与交互反馈 - 链接蓝（
#3860BE）：所有超链接的通用悬浮状态 - 青色操作（
#1EAEDB）：透明/幽灵变体的按钮悬浮背景（rgb 30、174、219）
渐变系统
- 调色板中无显式渐变——从暗到浅的递进通过表面分层实现：
#000000→#181818→#202020→#494949→#7D7D7D - 视频英雄区使用内容本身的自然氛围渐变
- 页顶渐变：全幅图样边缘的柔和暗到更暗的渐隐
3. 字体排版规则
字体族
- 展示与 UI：
LamboType、Roboto、Helvetica Neue、Arial——由 Character Type 为 Lamborghini 2024 品牌焕新打造的定制 Neo-Grotesk 字体。可用宽度从 Normal 到 Ultracompressed，字重从 Light（300）到 Black。具备 12° 倾斜端点（灵感来自空气动力学车几何）、六边形构造逻辑，并支持 200 多种语言（含拉丁、西里尔、希腊） - 回退/UI：
Open Sans——用作某些按钮/表单场景的系统回退 - 未观察到营销网站上的斜体变体——品牌声音始终是正立的
层级
| 角色 | 字号 | 字重 | 行高 | 字距 | 备注 |
|---|---|---|---|---|---|
| 英雄 展示 | 120px（7.50rem） | 400 | 0.92 | 正常 | LamboType，大写，最大冲击 |
| 展示 2 | 80px（5.00rem） | 400 | 1.13 | 正常 | LamboType，大写，主要段落标题 |
| 段落标题 | 54px（3.38rem） | 400 | 1.19 | 正常 | LamboType，大写 |
| 子段落 | 40px（2.50rem） | 400 | 1.15 | 正常 | LamboType，大写 |
| 特性标题 | 27px（1.69rem） | 400 | 1.37 | 正常 | LamboType，大写 |
| 卡片标题 | 24px（1.50rem） | 400 | — | 正常 | LamboType |
| 正文 大 | 18px（1.13rem） | 400 | 1.56 | 正常 | LamboType，大写与小写混合变体 |
| 正文 / UI | 16px（1.00rem） | 400/700 | 1.50 | 正常/0.16px | LamboType，主要正文 |
| 按钮 大 | 16px（1.00rem） | 400 | 1.50 | 正常 | 金色 CTA 按钮 |
| 按钮 标准 | 14.4px（0.90rem） | 300/700 | 1.00 | 0.14–0.2px | LamboType，大写，幽灵按钮 |
| 按钮 小 | 13px（0.81rem） | 300/500 | 1.20 | 0.13–0.2px | LamboType，紧凑按钮变体 |
| 说明 | 14px（0.88rem） | 600/700 | 1.14–1.50 | -0.42px | LamboType，大写，负字距 |
| 标签 | 12px（0.75rem） | 400/500 | 1.83 | 0.96px | LamboType，大写徽标与微标签 |
| 微 | 10px（0.63rem） | 400 | 1.00–2.00 | 0.225px | LamboType，大写，最小文字 |
原则
- 全大写是默认声音：展示与特性标题一律大写。这制造出咆哮、命令式的语气，匹配品牌的攻击性
- 极端尺寸范围：从 120px 英雄到 10px 微标签——12:1 的比例营造戏剧化视觉层级
- 大尺度紧致行高：展示型尺寸使用 0.92-1.19 行高，形成密集、压缩的文字块，更像压印而非排版
- 400 字重主导：与许多用粗体强调的设计系统不同，Lamborghini 的常规字重承载标题——字体本身已足够独特，无需字重变化
- 说明用负字距：14px 说明用 -0.42px 字距，营造压缩、技术感美学
- 微文字用正字距：10px 下 +0.225px 确保最小尺寸的可读性
- 单一字体纪律：LamboType 处理一切——12° 倾斜端点与六边形几何在所有尺寸下提供视觉一致性
4. 组件样式
按钮
所有按钮使用零圆角——锐利、棱角分明的矩形，呼应 Lamborghini 车辆的激进线条。
金色点缀 CTA —— 主要操作：
- 默认：背景
#FFC000（Lamborghini 金），文字#000000，内边距 24px，字号 16px，字重 400，圆角 0px，无边框 - 悬浮：背景
#917300（暗金），显著变暗 - 类名：
btn-accent btn-large - 用于："Discover More"、"Tickets"、"Start Configuration"
透明幽灵 —— 深色背景上的次级操作：
- 默认：背景透明，文字
#FFFFFF，边框 1px solid#FFFFFF，内边距 16px，透明度 0.5 - 悬浮：背景
#1EAEDB（青色操作），白色文字，透明度 0.7 - 聚焦：背景
#1EAEDB，边框 1px solid#000000，描边 2px solid#000000 - 用于：英雄区与深色面板上的次级 CTA
白色填充 —— 浅色模式主按钮：
- 默认：背景
#FFFFFF，文字#202020，无边框 - 用于：金色不适用的深色段落的 CTA
黑色填充 —— 深色填充变体：
- 默认：背景
#000000，文字#202020 - 用于：浅色段落上的反色 CTA
灰色中性 —— 柔和操作：
- 默认：背景
#969696，文字#202020 - 用于：次级/三级操作，徽标式按钮
卡片与容器
- 背景：黑色画布上的
#202020（炭灰），或浅色段落上的#000000 - 边框：
0px 1px solid #202020段落分隔的底部边框 - 圆角：0px（完全锐利的角）
- 阴影：最小，使用覆盖透明度制造深度
- 内容：铺满的摄影 + 白色叠加文字
输入与表单
- 营销网站上表单存在感极弱
- 开关元素：圆角 20px（唯一圆润的元素），边框 1px solid
#DDDDDD - Cookie 横幅输入样式：白字于黑底，
#7D7D7D边框
导航
- 桌面：居中公牛 logo、左侧"MENU"汉堡 + 图标、右侧搜索图标 + 书签图标
- 背景：透明（继承黑色页面背景）
- 黏性：固定顶部，悬浮于内容之上
- 无可见边框或阴影——元素漂浮于黑暗中
- "MENU"标签：14px 字重 400 白色文字，大写，伴随汉堡图标
- 六边形母题：英雄区的暂停按钮使用六边形轮廓
图像处理
- 英雄：全视口视频段落（100vh），配电影化活动/车辆画面
- 活动摄影：Lamborghini Arena 活动的铺满航拍
- 车辆图样：深色背景上的高对比度棚拍，全宽
- 宽高比：以 16:9 及更宽为主，营造电影感
- 暗色渐变覆盖：视频顶部/底部边缘的柔暗化，确保文字可读
特色组件
- 六边形暂停按钮：视频控制使用六边形轮廓（匹配字体的品牌几何 DNA），位于英雄区右下角
- 进度条：英雄区底部的细白线，指示视频/幻灯片进度
- 徽标/标签：背景
#969696，白色文字，内边距 8px，字号 10px，圆角 2px——微型金属胶囊
5. 布局原则
间距体系
- 基础单位：8px
- 完整刻度：2px、4px、5px、8px、10px、12px、15px、16px、20px、24px、32px、40px、48px、56px
- 按钮内边距：16px（幽灵），24px（金色点缀）
- 段落内边距：垂直 48–56px，水平 40px
- 小间距：2–5px 用于微调（徽标内边距、边框间距）
网格与容器
- 框架：Bootstrap 网格系统（container + row + col）
- 最大宽度：1440px（最大断点）
- 列数：标准 12 列 Bootstrap 网格
- 全幅：英雄区突破网格填满视口边缘
- 内容区：居中于 1200px 最大宽度容器内
留白哲学
Lamborghini 用黑暗作为留白。内容块之间的充裕黑色扩张承担了浅色设计中白色空间同样的功能——创造呼吸空间，把每个元素抬升到展品的地位。一个悬浮于黑色视口中央的车型名称，其视觉份量等同于白墙上的一件画廊作品。色彩的缺席即设计。
圆角体系
| 数值 | 场景 |
|---|---|
| 0px | 默认——按钮、卡片、容器、图片 |
| 1px | 细微的 span 元素 |
| 2px | 徽标、关闭按钮、Cookie 元素——几乎不可察觉 |
| 20px | 仅限开关——唯一圆润的元素 |
6. 深度与层次
| 层级 | 处理方式 | 用途 |
|---|---|---|
| Level 0（深渊） | #000000 平面 | 页面背景，最深层 |
| Level 1（表面） | #181818 或 #202020 | 卡片、内容面板、抬升段落 |
| Level 2（覆盖） | rgba(0,0,0,0.7) | 模态背景、视频调暗 |
| Level 3（雾） | rgba(0,0,0,0.5) | 较浅覆盖、悬浮状态 |
| Level 4（轻雾） | rgba(0,0,0,0.25) | 微妙深度暗示 |
阴影哲学
Lamborghini 通过表面色分层而非阴影实现深度。在黑色画布上，传统投影不可见——系统通过从绝对黑过渡到逐步变浅的深灰来制造抬升：#000000 → #181818 → #202020 → #494949。这种"暗度梯度"方法意味着抬升元素字面意义上比周围更亮，反转了传统的阴影模型。
装饰性深度
- 全幅视频通过电影化灯光提供氛围深度
- 六边形暂停按钮带细白色描边，漂浮于其上
- 英雄区底部的进度条形成微妙的地平线
- UI 元素无渐变、光晕或模糊效果——摄影提供所有视觉丰富度
7. 推荐与避免
推荐
- 使用绝对黑（
#000000）作为主背景——永不以深灰替代 - Lamborghini 金（
#FFC000）专用于主 CTA 按钮——绝不作装饰 - 所有展示标题使用 LamboType 大写——品牌声音始终是咆哮
- 按钮与卡片使用零圆角——锐角不容妥协
- 展示型字体保持紧致行高（0.92–1.19），营造密集、建筑感的文字块
- 深色背景上的次级 CTA 使用透明幽灵按钮（白色边框、50% 透明度）
- 让全视口视频/摄影承载情绪份量——UI 是基础设施，不是装饰
- UI 图标与视频控制按钮保留六边形几何
- 标题使用 400 字重（常规）——字体本身已足够独特，无需粗体强调
- 灰色调色板保持无色——所有中性色皆为纯灰，无染色
避免
- 不要在金色之外引入其他点缀色——单色加金系统是神圣的
- 不要给按钮或卡片加圆角——弯曲边缘与棱角分明的车辆美学相矛盾
- 不要把 LamboType 用于斜体或装饰样式——品牌始终正立、直接
- 不要给按钮或表面加渐变——深度来自表面分层，非混合
- 不要用浅色背景作为主画布——黑暗是默认，浅色是例外
- 不要在展示标题中混入小写——大写约定传达权威与力量
- 不要用缩放或位移做悬浮动画——交互应仅靠颜色（背景/透明度切换）
- 不要在展示文字上使用 Open Sans——LamboType 必须处理所有可见字体
- 不要用许多小元素创建繁忙布局——Lamborghini 的设计关乎单一、大胆的陈述
- 不要给元素加阴影——在黑色画布上，阴影无意义；改用表面色切换
8. 响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| 移动 小 | <425px | 单列，缩小字号，堆叠按钮 |
| 移动 | 425-576px | 单列，汉堡导航，英雄文字约 40px |
| 平板 小 | 576-768px | 双列网格开始，内边距调整 |
| 平板 | 768-1024px | 双列布局，英雄扩展，车辆卡并排 |
| 桌面 | 1024-1280px | 完整导航，3+ 列网格，展示文字 80px |
| 桌面 大 | 1280-1440px | 完整布局，英雄 120px 展示，最大宽度容器 |
| 宽 | >1440px | 内容居中，页边距扩展，英雄填满视口 |
触摸目标
- 金色 CTA 按钮：48px+ 最小高度配 24px 内边距（超出 WCAG 44×44px）
- 幽灵按钮：48px+ 配 16px 内边距
- 汉堡菜单：大触摸目标（约 48px 方形）
- 六边形暂停按钮：约 48px 直径
折叠策略
- 导航：始终基于汉堡（"MENU" + 图标）——任何断点都不展开水平导航
- 英雄视频：所有断点保持全视口高度，调整 object-fit
- 展示型字体：从 120px（桌面）→ 80px（平板）→ 54px/40px（移动）缩放
- 按钮布局：桌面并排，移动竖向堆叠
- 网格列数：3 列 → 2 列 → 1 列递进
- 段落间距：垂直内边距从 56px → 40px → 24px 收缩
图片行为
- 英雄视频使用
object-fit: cover在所有尺寸下保持电影化构图 - 车辆图像在容器内缩放，保持宽高比
- 活动摄影在窄屏上按视口宽度裁剪
- 背景图像在所有视口边缘变暗，保持文字对比
9. 智能体提示指南
快速配色参考
- 主 CTA："Lamborghini 金（#FFC000）"
- 背景："绝对黑（#000000）"
- 表面："炭灰（#202020）"
- 标题文字："纯白（#FFFFFF）"
- 正文："灰烬（#7D7D7D）"
- 链接悬浮："链接蓝（#3860BE）"
- 点缀："青色脉冲（#29ABE2）"
- 边框："纯白（#FFFFFF）50% 透明度"
示例组件提示
- "创建英雄区：全视口黑色背景，车型名 'TEMERARIO' 使用 LamboType 120px 大写字重 400 白色文字，行高 0.92，垂直居中，下方放置 Lamborghini 金（#FFC000）'Discover More' 按钮——锐角，0px 圆角，24px 内边距，黑字"
- "设计透明幽灵按钮：1px solid 白色边框 50% 透明度，14.4px 大写白色文字 0.2px 字距，内边距 16px，黑色背景——悬浮状态变为青色操作（#1EAEDB）背景 70% 透明度"
- "构建导航栏：绝对黑上零可见背景，居中公牛 logo，左侧 'MENU' 文字标签 + 汉堡图标，右侧搜索 + 书签图标——全白，黏性定位"
- "在炭灰（#202020）背景上创建新闻卡网格，白色标题 27px 大写，正文 #7D7D7D 16px，白色下划线 'Read More' 链接悬浮时变 #3860BE"
- "设计段落分隔线：在黑色画布上用 1px solid #202020 底部边框——抬升差异纯粹通过表面色切换实现，不用阴影"
迭代指南
在精炼由此设计系统生成的现有界面时：
- 一次只聚焦一个组件——Lamborghini 的系统是极端的，每个元素都必须感觉激进
- 直接引用本文档中的特定颜色名与十六进制代码——调色板只有约 5 个活跃色
- 使用自然语言描述而非 CSS 值——"锐利的金色矩形"而非"border-radius: 0px; background: #FFC000"
- 在具体测量之外描述期望的"感觉"——"悬浮于完全黑暗中"传达黑色画布比"background: #000000"更好
- 记住大写是默认——展示尺寸下如果不是大写，可能就应该大写