精选 · 开放 · 免费
Bugatti
以电影般的影像和克制的优雅，打造超高端汽车品牌体验
EditorialPremiumCleanRestraintReference
01
设计气质 DNA
奢华传承精准汽车专属
高端汽车杂志与奢侈时尚品牌的结合
02
色彩
#FFFFFFInk
#000000BG
#999999Muted
rgba(255,255,255,0.2)Line
黑白鲜明对比，所有色彩均来自摄影图像
03
字体
humanist-sans · monospace
- display
60px · 400 - headline
36px · 400 - body
16px · 400 - caption
14px · 400 - micro
12px · 400
所有文字均为黑底白字 · 大写仅用于导航和标签，且需节制使用 · 大写文本元素需提供充足的字间距
04
间距
4px
8px
12px
16px
24px
36px
48px
64px
96px
基于4px的统一单位，以充足的留白营造奢华感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
交互元素使用1px实线 rgba(255,255,255,0.2) 边框，其他元素无边框
rgba(0,0,0,0) 0px 0px 0px 0px · rgba(0,0,0,0.1) 0px 10px 15px -3px · rgba(0,0,0,0.1) 0px 4px 6px -4px
06
布局
1440container
2columns
36pxgutter
768 / 1024breakpoints
全幅主视觉区域，车辆卡片采用双列网格布局
07
动效与交互
150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
状态变化使用淡入淡出过渡 · 基于变换的悬停效果 · 页面切换使用较长的过渡时间
细微的透明度或颜色过渡 · 立即反馈，降低透明度
08
组件
- button 极简幽灵按钮，1px白色边框，药丸形或6px圆角矩形
- card 全幅图像卡片叠加文字，无可见容器边框
- chip 未显著使用
- input 未显著使用
- hero 全视口电影感影像，居中白色文字，垂直节奏
09
文案语气与禁用清单
- 语气 权威、尊贵、内敛
- 标题风格 直接且陈述性的，大小写混合或全大写
- 按钮文案 以动作为导向，使用祈使动词，如“见证”或“探索”
- 勿使用多种字重——截图显示全文档均使用一致的400字重
- 勿添加装饰性边框或阴影——截图显示极少或没有立体效果
- 勿使用色彩点缀——截图完全依赖黑、白及摄影图像的色彩
- 勿使内容拥挤——截图显示所有元素间留有充足的空白
- 勿使用小写导航——截图显示“菜单”、“商店”、“见证传奇”均为全大写
- 勿创建繁杂的布局——截图显示为简洁的单列或双列网格结构
- 避免: 非正式语言
- 避免: 过多的感叹号
- 避免: 杂乱的布局
- 避免: 明亮的色彩点缀
- 避免: 装饰性字体
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Bugatti.com 是一个超高端定位的奢侈汽车品牌网站。设计采用黑白鲜明的配色方案（#000000背景，#FFFFFF文字），所有视觉焦点均来自电影感的汽车摄影。字体为humanist-sans-serif，统一使用400字重，主视觉标题尺寸最大可达60px。布局极简，采用全幅区域和充足的留白。交互元素使用带白色边框的细微幽灵按钮。网站整体散发出克制与传承的气息。关键禁忌：绝不要使用明亮的色彩点缀，绝不要添加装饰性阴影或边框，绝不要用繁杂的布局挤占内容，绝不要使用多种字重，绝不要使用小写导航标签，绝不要牺牲充足的留白。
en · zh-CN · zh-TW · ja · ko