受 Tesla 启发的设计系统

1. 视觉主题与氛围

Tesla 的网站是激进减法的练习——一个数字展厅，产品就是一切，界面几乎为零。页面以全视口首屏开场，用电影化的汽车摄影填满整个屏幕：三辆车停在抛光混凝土地面上，背对朦胧的城市天际线天空，一个车型名称以半透明的白色字体浮在它们上方。没有装饰边框、没有渐变、没有图案、没有阴影。UI 仅用于提供刚刚足够的导航结构来让路。产品图像以外的每个像素都是留白，而这种克制是设计系统最有力的宣言。

色彩哲学几乎是禁欲式的：单一蓝色（#3E6AE1）用于主要行动召唤，三档深灰色用于文字层级，白色用于其他一切。所有的情感重量都由摄影承担——广阔的全景景观镜头、工作室打光的车辆轮廓、以及贯穿每个视口高度区段的大气环境构图。UI 外框溶解在图像中。导航栏浮在首屏之上，没有可见的背景、边框或阴影——TESLA 字标和五个导航标签只是存在于空间中，信任其下方内容提供足够的对比度。

字体排版最近从 Gotham 过渡到 Universal Sans——一个分为"Display"（标题）和"Text"（正文 / UI 元素）的定制字体族——将网站、手机 App 和车载软件统一为单一字体声线。Display 变体以 40px 字重 500 渲染首屏标题，而 Text 变体处理从导航（14px/500）到正文副本（14px/400）的所有内容。该字体带有几何精度和略带人文风格的字尾，感觉是工程化的而非设计的——恰好匹配 Tesla 不需要自我宣告的技术品牌身份。没有文字阴影、没有文字渐变、没有装饰性字体处理。每个字形都仅凭清晰度赢得位置。

关键特征：

• 全视口首屏区段（100vh）由电影化的汽车摄影主导，配极少覆盖 UI
• 几乎为零的 UI 装饰：页面上任何地方都没有阴影、渐变、边框、图案
• 单一点缀色——Electric Blue（#3E6AE1）——专门用于主要 CTA 按钮
• Universal Sans 字体族（Display + Text）统一网页、App 和车载界面
• 摄影优先的呈现方式，产品图像承担所有情感重量
• 磨砂玻璃导航概念，透明 / 白色导航浮在首屏内容之上
• 0.33s cubic-bezier 过渡作为所有交互状态变化的通用时序
• 轮播驱动的首屏配圆点指示器和边缘箭头导航用于多车辆展示
• "Ask a Question" 持久聊天栏锚定在视口底部

2. 配色与角色

主色

• Electric Blue（#3E6AE1）：主 CTA 按钮背景——一种自信的、中等饱和度的蓝色（rgb 62, 106, 225），在整个界面中作为唯一的色彩色独自存在。专门用于"Order Now"和其他主要行动按钮
• Pure White（#FFFFFF）：所有表面、面板、导航和次要按钮填充的主导背景色——让摄影呼吸的画布

辅助与点缀

• Promo Blue（#3E6AE1）：蓝色也用于促销文字（"0% APR Available"），以与 CTA 相同的色相显示在首屏图像之上——在激励信息和动作之间建立视觉联系
• 没有辅助点缀色存在。Tesla 故意避免色彩多样性以保持极端的视觉纪律

表面与背景

• White Canvas（#FFFFFF）：页面背景、导航面板、下拉菜单和所有表面容器
• Light Ash（#F4F4F4）：用于区段差异化的微妙替代表面——相比纯白几乎不可察觉的偏移（rgb 244, 244, 244）
• Carbon Dark（#171A20）：首屏文字覆盖和潜在暗色模式上下文的暗色表面（rgb 23, 26, 32）——带有蓝色底调的暖近黑
• Frosted Glass（rgba(255, 255, 255, 0.75)）：滚动时导航背景滤镜效果的半透明白色

中性与文字

• Carbon Dark（#171A20）：主标题和导航文字——最深的文字值（rgb 23, 26, 32），用于浅色背景上的车型名称、导航标签和首屏标题
• Graphite（#393C41）：正文和次要内容（rgb 57, 60, 65）——默认段落色，略暖于纯灰
• Pewter（#5C5E62）：子链接、次要导航链接（如 "Learn" 和 "Order"）的第三级文字（rgb 92, 94, 98）
• Silver Fog（#8E8E8E）：输入框中的占位文字和禁用状态（rgb 142, 142, 142）
• Cloud Gray（#EEEEEE）：浅色边框和分隔线（rgb 238, 238, 238）
• Pale Silver（#D0D1D2）：微妙的 UI 边框和描绘（rgb 208, 209, 210）

语义与点缀

• Tesla 的营销网站避免语义颜色编码（没有绿色 / 红色 / 黄色状态指示）。错误、成功和警告状态在表单上下文中遵循标准浏览器默认值
• 蓝色 CTA（#3E6AE1）作为唯一的交互颜色信号

渐变系统

• 界面中任何地方都不使用渐变
• 深度完全通过摄影、留白以及满幅图像与干净白色表面之间的二元对比实现
• 导航通过不透明度（磨砂玻璃效果）而非渐变或阴影实现分层

3. 字体排版规范

字体族

• Display：Universal Sans Display, -apple-system, Arial, sans-serif——用于首屏标题和大型车型名称。一种几何无衬线，具有精确工程化的比例，最近取代 Gotham 以统一 Tesla 的数字生态系统（网站、手机 App、车辆界面）
• Text/UI：Universal Sans Text, -apple-system, Arial, sans-serif——用于导航、正文副本、按钮和所有 UI 文字。优化较小尺寸下的可读性，比 Display 变体具有略宽的比例
• 没有检测到 OpenType 特性——字体排版完全没有修饰
• 没有斜体变体出现在营销网站上

层级

原则

• "Normal" 字距贯穿所有地方：与大多数使用负字距的现代科技品牌不同，Tesla 在每个层级使用默认字距。这反映了一种哲学：字体应不言自明，无需操作
• 字重克制：仅出现两个字重——500（中等）用于标题 / UI，400（常规）用于正文。没有粗体（700），没有细体（300）。系统避免字体戏剧性
• 统一的字体大小：大多数 UI 文字集中在 14px，只有首屏标题（40px）和促销文字（22px）有所突破。这种极端的统一性创造出工程化一致性的感觉
• Display 与 Text 的分离：双变体系统（Display 用于首屏，Text 用于 UI）在没有可见样式差异的情况下创建微妙的光学校正——它们在不同尺寸下看起来是同一种字体
• 没有文字转换：主导航或 CTA 中不出现大写文字——小写方式强化了 Tesla 低调的自信

4. 组件样式

按钮

所有按钮使用几乎不可察觉的圆角矩形（4px 圆角半径）——创造出锐利、技术性的美学，呼应车辆的精度。

Primary CTA——主要行动按钮：

• 默认：背景 #3E6AE1（Electric Blue），文字 #FFFFFF，字体大小 14px，字重 500，内边距 4px 内容居中，圆角 4px，最小高度 40px，宽度 200px
• 边框：3px solid transparent（为聚焦 / 激活边框动画保留空间）
• 盒阴影：rgba(0,0,0,0) 0px 0px 0px 2px inset（静止时不可见，聚焦时动画为可见）
• 过渡：border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s
• 悬停：蓝色背景略微变暗
• 用于："Order Now" 行动召唤

Secondary CTA——替代行动按钮：

• 默认：背景 #FFFFFF，文字 #393C41（Graphite），与主按钮相同的尺寸和边框图案
• 过渡：与主按钮相同的时序（0.33s）
• 用于：与主 CTA 配对的 "View Inventory"

Nav Button——顶部导航项：

• 默认：背景透明，文字 #171A20（Carbon Dark），字体大小 14px，字重 500，圆角 4px，内边距 4px 16px，最小高度 32px
• 过渡：color 0.33s, background-color 0.33s
• 激活 / 展开：微妙的背景高亮
• 用于："Vehicles"、"Energy"、"Charging"、"Discover"、"Shop"

Text Link——内容中动作：

• 默认：文字 #5C5E62（Pewter），字体大小 14px，字重 400，无背景，无边框
• 悬停：带盒阴影过渡的下划线装饰
• 过渡：box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75), color 0.33s
• 用于：下拉面板中的 "Learn"、"Order"、"Experience"、"New"、"Pre-Owned" 链接

卡片与容器

Vehicle Card（导航面板）：

• 背景：透明（继承面板白色）
• 边框：无
• 阴影：无
• 内容：车辆图像（透明 PNG）+ 居中下方的车型名称 + 两个文本链接
• 布局：下拉面板内的 3 列网格
• 卡片本身无悬停动画——交互通过下方的文本链接

Category Card（首页下方区段）：

• 背景：满幅景观摄影
• 圆角半径：约 12px（微妙圆角）
• 溢出：hidden（将图像裁剪到圆角）
• 文字：左上角白色标签（"Sport Sedan"、"Midsize SUV"）
• 尺寸：大格式，约 2:1 宽高比
• 没有阴影、边框、覆盖渐变——文字依赖图像暗度来获得对比度

输入与表单

• 背景：透明
• 文字颜色：#171A20（Carbon Dark）
• 占位符颜色：#8E8E8E（Silver Fog）
• 边框：最小，继承自浏览器默认值
• 字体：Universal Sans Text，14px
• "Ask a Question" 聊天输入栏位于视口底部，带有干净的白色背景和微妙的边框

导航

• 桌面：居中水平导航，TESLA 字标（字母间距宽松大写）在左，五个类别按钮居中对齐，三个图标按钮（帮助、地球 / 语言、账户）在右
• 背景：白色（在滚动时通过类切换 tds-site-header--white-background 从暗色首屏上的透明过渡到不透明白色）
• 下拉面板：全宽白色面板带 3 列车辆网格 + 右侧文本链接侧栏，无阴影、无边框——无缝出现在导航下方
• 粘性行为：sticky-without-slide 类——保持在顶部无滑入动画
• 移动：汉堡折叠模式
• 导航与内容之间没有可见的分隔线——导航与首屏融合

图片处理

• 首屏：全视口（100vh）区段配电影化摄影——边缘到边缘，无内边距，无外边距
• 车辆图像：透明 PNG 在白色背景上的下拉面板中渲染，工作室品质的 3/4 角度镜头
• 类别卡片：约 2:1 比例的景观摄影，圆角（12px）
• 轮播：自动播放配圆点指示器（3 个圆点）和边缘的左 / 右箭头导航
• 懒加载：折叠下方区段使用懒加载，在滚动到视图中之前呈现为空白白色

持久聊天栏

• 锚定到视口底部，跨所有区段可见
• 白色背景带微妙的边框
• 包含：聊天图标 + "Ask a Question" 标签 + 占位文字（"What's Dog Mode?"） + 发送图标 + "Schedule a Drive Today" 次要 CTA
• Schedule CTA 带有青色 / 蓝色图标点缀

5. 布局原则

间距系统

• 基础单位：8px
• 常见值：8px（0.5rem）、16px（1rem）、21.44px（1.34rem）
• 按钮内边距：4px（最小外部）通过 flexbox 居中内容，导航项 4px 16px
• 区段内边距：全视口区段配垂直居中的内容
• 卡片间距：类别卡片之间约 16px

网格与容器

• 最大宽度：约 1383px（大多数内容使用完整视口宽度）
• 首屏：满幅出血，边缘到边缘，100vh 区段
• 导航面板：车辆卡片的 3 列网格配右对齐文本侧栏（约 70/30 分割）
• 类别卡片：2 列水平布局（左侧大卡 + 右侧小卡）

留白哲学

Tesla 将留白用作奢华信号。区段之间的慷慨垂直间距（每个区段是完整视口高度）意味着你一次只能看到一条"信息"——一辆车、一个车型名称、一对 CTA。这创造了一种画廊般的浏览体验，每次滚动都是有意的过渡，而非连续的提要。留白不是空的——它是将每辆车提升到艺术品地位的画框。

圆角尺度

6. 层次与深度

阴影哲学

Tesla 对层次的处理本质上就是"无"。该网站在其主要界面中完全避免盒阴影。深度通过三种替代策略传达：

1. Z-index 分层：粘性导航通过定位而非阴影位于首屏内容之上
2. 基于不透明度的透明度：磨砂玻璃导航和覆盖模态使用背景色不透明度而非阴影来指示分层
3. 摄影即深度：满幅图像通过透视、光照和构图创建自己的视觉深度——使 UI 阴影冗余

装饰性深度

• UI 元素上没有渐变、发光或大气效果
• 首屏图像本身提供所有视觉丰富度——夕阳天空、车辆表面的反射光、工作室照明的地面阴影
• 轮播箭头按钮使用半透明白色背景浮在首屏图像之上而不打断它

7. 推荐与避免

推荐

• 让摄影主导每个屏幕——产品即设计
• 将 Electric Blue（#3E6AE1）专门用于主要 CTA——从不用于装饰目的
• 为主要内容块保持视口高度区段——每个屏幕一条信息
• 将字体排版保持在字重 400-500——没有粗体，没有细体，没有极端
• 为所有交互元素使用 4px 圆角半径——精度优先于俏皮
• 信任留白作为奢华信号——不要因为空就填充可用空间
• 将所有过渡保持在 0.33s——运动的一致性与颜色的一致性同样重要
• 在白色背景上对产品展示使用透明 PNG 车辆图像
• 在车型名称下方水平居中 CTA——垂直节奏是车型 → 副标题 → 按钮
• 维持 Display / Text 字体分离——Display 仅用于首屏规模文字，Text 用于其他一切

避免

• 不要给任何元素添加阴影——通过阴影的层次与扁平、画廊式美学相矛盾
• 除蓝色 CTA 外不要使用多于一种的色彩色——调色板有意为单色加一
• 不要将渐变、图案或装饰背景应用于表面——白色和摄影是唯一的背景
• 不要在网页上使用大于 40px 的文字——即使在首屏尺度上字体排版也刻意克制
• 不要给卡片或容器添加边框——分离通过间距而非线条实现
• 不要使用大写文字转换——Tesla 的自信通过小写的冷静表达
• 不要引入圆角胶囊按钮或大圆角半径——4px 半径是刻意且精确的
• 不要用其他字体覆盖 Universal Sans 族——跨平台一致性是核心品牌价值
• 不要使用带 scale / translate 变换的悬停动画——Tesla 的交互仅是颜色（背景和边框过渡）
• 不要让视口充满多个 CTA——每个屏幕应最多有两个行动按钮

8. 响应式行为

断点

触摸目标

• 主 CTA 按钮：200px × 40px 最小（远超 44×44px WCAG 要求）
• 导航按钮：32px 最小高度配 4px 16px 内边距——充足的触摸目标
• 轮播箭头：约 44px 方形白色半透明按钮位于视口边缘
• 文本链接（"Learn"、"Order"）：14px 文字配充足的行高间距用于触摸

折叠策略

• 导航：水平类别按钮（Vehicles、Energy、Charging、Discover、Shop）在移动端折叠为汉堡 / 抽屉菜单
• 首屏 CTA 对：桌面上的并排按钮在移动端垂直堆叠
• 类别卡片：2 列水平布局在移动端折叠为单列全宽
• 车辆网格：桌面导航面板中的 3 列网格在平板上变为 2 列，在移动端变为单列
• 间距：区段垂直内边距保持慷慨（视口高度区段）但水平内边距减少

图像行为

• 首屏图像完全响应式，在每个断点填充整个视口
• 车辆轮播图像使用 object-fit: cover 在各宽度下保持电影化构图
• 透明 PNG 车辆图像在导航面板中按比例缩放在其网格单元内
• 类别卡片图像保持其景观比例并通过带圆角的 overflow: hidden 裁剪

9. 智能体提示指南

快速颜色参考

• 主 CTA："Electric Blue (#3E6AE1)"
• 背景："Pure White (#FFFFFF)"
• 标题文字："Carbon Dark (#171A20)"
• 正文文字："Graphite (#393C41)"
• 第三级文字："Pewter (#5C5E62)"
• 占位符："Silver Fog (#8E8E93)"
• 替代表面："Light Ash (#F4F4F4)"
• 暗色表面："Carbon Dark (#171A20)"

示例组件提示

• "创建一个首屏区段配全视口背景图像，居中的 'Model Y' 标题用 Universal Sans Display 40px 字重 500 白色，下方一条副标题行，以及两个并排按钮：一个主 Electric Blue (#3E6AE1) 'Order Now' 按钮和一个次要白色 'View Inventory' 按钮，都带 4px 圆角和 40px 高度"
• "设计一个导航栏配字母间距宽松的字标在左，五个文本按钮（14px，字重 500，Carbon Dark #171A20）居中，三个图标按钮在右，全部在白色背景上无阴影或边框"
• "构建一个车辆卡片网格 3 列，每张卡片显示一个透明背景的汽车图像位于车型名称上方（17px，字重 500，Carbon Dark），以及两个文本链接（14px，字重 400，Pewter #5C5E62）标记为 'Learn' 和 'Order'，在纯白表面上无边框或阴影"
• "创建一个类别卡片配满幅景观摄影，12px 圆角半径，溢出隐藏，以及左上角定位的白色文字标签（'Sport Sedan'）无覆盖渐变"
• "设计一个持久的底部栏配聊天输入（'Ask a Question' 占位符）、发送图标和次要 CTA（'Schedule a Drive Today'）带青色图标，锚定到视口底部在白色背景上"

迭代指南

改进使用此设计系统生成的现有屏幕时：

1. 一次专注于一个组件——Tesla 的系统如此极简，以至于每个元素都必须像素完美
2. 引用本文档中的具体颜色名称和十六进制代码——整个系统只有 6-7 种颜色
3. 使用自然语言描述而非 CSS 值——"几乎不可察觉的圆角"而非 "border-radius: 4px"
4. 描述所需的"感觉"以及具体度量——"区段之间的画廊式静默"比 "margin-bottom: 100vh" 更好地传达留白哲学
5. 始终验证摄影承担情感的重负——如果 UI 本身感觉"被设计过"，那就太多了