精選 · 開放 · 免費
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 solid 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
狀態變更時使用淡入淡出轉場 · 基於 transform 的 hover 效果 · 頁面轉場使用較長的過渡時間
細微的透明度或色彩過渡 · 立即回饋，降低透明度
08
組件
- button 極簡幽靈按鈕，搭配 1px 白色邊框，藥丸形或矩形圓角 6px
- card 全出血圖片卡片搭配文字覆層，無可見容器邊框
- chip 未顯著使用
- input 未顯著使用
- hero 全視野電影級影像，置中白色文字，垂直節奏
09
文案語氣與禁用清單
- 語氣 權威、尊貴、內斂
- 標題風格 直接陳述式，大小寫混合或全大寫
- 按鈕文案 以行動為導向，使用祈使動詞如「見證」或「探索」
- 不要使用多種字重 — 截圖顯示全程使用一致的 400 字重
- 不要添加裝飾性邊框或陰影 — 截圖顯示極簡或無凸起效果
- 不要使用色彩強調 — 截圖完全依賴黑、白與攝影色彩
- 不要擁擠內容 — 截圖顯示所有元素間有寬裕的留白
- 不要使用小寫導航 — 截圖顯示 MENU、STORE、WITNESS THE LEGEND 全為大寫
- 不要製作複雜的版面配置 — 截圖顯示乾淨的單欄或雙欄格線結構
- 避免: 非正式語言
- 避免: 過多的驚嘆號
- 避免: 擁擠的版面配置
- 避免: 鮮豔的色彩強調
- 避免: 裝飾性字體排印
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