精选 · 开放 · 免费
Rolls-Royce
一个超豪华汽车品牌，通过沉浸式、影院级的摄影和克制的排版来展示其优雅的车辆。
automotiveluxury
01
设计气质 DNA
超豪华传承汽车工艺
一本高端豪华汽车杂志
02
色彩
#FFFFFFInk
#151515BG
#222222BG soft
#888888Muted
rgba(255, 255, 255, 0.2)Line
单色系暗色基底，搭配高对比度的白色文字，让摄影本身成为主角。
03
字体
geometric-sans · sans-serif
- display
70px · 300 - sub-display
28px · 300 - body
16px · 400
所有文本均为大写 · 大号展示文字使用浅字重 · 标题采用宽松的字间距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白，以强调奢华感并确保呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
用于分隔线和轮廓的微妙细线
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血英雄区，内容居中
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
文本和UI元素的平滑淡入
微妙的不透明度变化或背景色过渡 · 立即响应并伴随平滑过渡
08
组件
- button 药丸形轮廓按钮，文字大写
- card 全出血的影院级英雄区图片
- hero 全屏背景图，搭配居中、堆叠的排版
09
文案语气与禁用清单
- 语气 权威、优雅且含蓄
- 标题风格 全大写、宽字间距、浅字重
- 按钮文案 药丸形轮廓按钮，文字居中且大写
- 不要使用明亮、饱和的强调色——调色板严格为单色系且具有影院感
- 不要使用厚重、粗体的字重——美学依赖于轻盈、优雅的排版
- 不要使用小而紧凑的字间距——设计通过标题的宽字距来体现呼吸感
- 不要使用装饰性、手写体或高度衬线字体——排版应干净、几何感且现代
- 不要在界面上堆砌多个行动号召——布局应聚焦于单一、清晰的焦点
- 不要使用繁杂、有纹理或渐变的背景——设计依赖于干净的摄影和纯色暗调
- 避免: 杂乱的布局
- 避免: 明亮、饱和的强调色
- 避免: 随意的语言
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个豪华汽车品牌网站。设计语言是影院级的，采用全出血摄影和深色、单色系调色板（#151515, #222222）。排版全部使用大写，采用干净的几何无衬线字体（Jost），字间距宽松（例如，大标题使用11.2px），字重较轻（300-400）以传达优雅感。交互是微妙的，依赖于平滑的不透明度与transform过渡（0.4秒）。关键禁忌包括：避免使用明亮的强调色，避免使用厚重的粗体字重，以及避免使用有太多竞争元素的杂乱界面。整体感受应是极度的克制、高端的工艺和永恒的精致，让产品摄影成为首要焦点。
en · zh-CN · zh-TW · ja · ko