精选 · 开放 · 免费
Genesis
拥有电影式暗色美学与锐利几何精准度的高端汽车品牌
automotive
01
设计气质 DNA
豪华汽车性能精准精致
配备电影式灯光的高端豪华车展厅
02
色彩
#ffffffInk
#6e6e6eInk soft
#000000BG
#1a1a1aBG soft
#f1f1f1BG quiet
rgba(26, 26, 26, 1.0)Line
具有戏剧性灯光效果的高对比度单色系
03
字体
grotesque-sans · humanist-sans
- display
40px · 400 - h1
40px · 400 - h2
24px · 400 - body
16px · 400 - caption
14px · 400
标题采用全大写与宽松字距 · 正文保持充裕行高 · 字重始终维持轻至中等
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
96px
以24px为主要间距的充裕布局
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 0px
lg · 0px
pill · 0px
采用深色色调的1px实线极简边框
0 0 5px 0 rgb(128, 128, 128) · 0 0 18px 0 rgba(0, 0, 0, 0.2)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域,内容左对齐叠加
07
动效与交互
200msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的颜色过渡 · 可见性变化时的透明度渐变 · 交互元素的变换动画
0.2s ease-in-out的颜色过渡 · 微妙的缩放或透明度变化
08
组件
- button 圆角极简线框样式
- card 图像优先,叠加排版
- input 极简下划线样式
- hero 电影式全出血摄影与文字叠加
09
文案语气与禁用清单
- 语气 自信且令人向往
- 标题风格 全大写的粗体宣言式标题
- 按钮文案 简洁内敛的行动号召
- 避免使用俏皮或圆角元素——截图显示锐利的几何精准度
- 避免使用繁杂的背景——截图显示简洁的摄影聚焦
- 避免使用多种强调色——截图显示单色系
- 避免创建拥挤的布局——截图显示充裕的留白与间距
- 避免使用粗重的字重——截图显示轻至中等的排版
- 避免添加装饰性边框——截图显示仅有的极简1px边框
- 避免使用圆角容器——截图显示贯穿始终的直角
- 避免: 过于技术性的术语
- 避免: 随意或俏皮的语言
- 避免: 拥挤的布局
- 避免: 明亮饱和的色彩
- 避免: 装饰性元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Genesis汽车网站,采用高端奢华品牌标识与电影式暗色美学。主色调为#000000和#1a1a1a背景,搭配#ffffff文字与#6e6e6e柔和色调。排版采用grotesque-sans作为展示字体,humanist-sans作为正文字体,字号分别为40px和16px。布局采用全宽主视觉区域,留有24px间距。关键约束:避免圆角元素,保持单色系,维持充裕留白,使用轻字重,并将装饰元素减至最少。
en · zh-CN · zh-TW · ja · ko