精選 · 開放 · 免費
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