精選 · 開放 · 免費
Vitra
高端現代家具品牌，透過電影級影像與克制的極簡主義，展現頂級設計。
furnituredesign
01
設計氣質 DNA
設計家具現代辦公室永續高端建築感
將高端建築型錄搬上網路，融合產品展示與編輯式敘事。
02
色彩
#101010Ink
#333333Ink soft
#FFFFFFBG
#F7F7F7BG soft
#E6E6E6BG quiet
#767676Muted
rgba(204,204,204,1.0)Line
嚴格的單色調色板，依靠高對比度攝影創造視覺趣味。
03
字型
geometric-sans
- display
56px · 500 - headline
40px · 500 - body
17px · 500 - small
15px · 500 - micro
13px · 500
整體使用幾何無襯線字體 · 主要文字維持 500 字重 · 小型標籤採用大寫與間距調整 · 段落左對齊並搭配寬裕行高
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 8px 為基礎單位，區塊間距寬裕，為 64px-96px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用 1px 細實線淺灰色邊框進行微妙分隔，無陰影效果。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全版面主視覺圖片搭配置中文字，後接緊密的雙欄產品網格。
07
動效與互動
150msmicro
400mssmall
800msmedium
cubic-bezier(0.17, 0.16, 0, 0.6)easing
文字覆蓋層採用平滑淡入效果 · 互動元件採用線性色彩過渡
文字與圖示細微地轉變為柔和灰色。 · 立即回應，搭配最小化的微互動。
08
組件
- button 僅文字或外框按鈕，配備細邊框、大寫標籤與寬裕內距。
- card 以圖片為主的卡片，文字標題置於下方，無邊框或背景。
- chip 不適用
- input 簡約的搜尋輸入框，僅底部有細邊框。
- hero 全視窗電影級攝影，文字覆蓋層垂直與水平方向皆置中。
09
文案語氣與禁用清單
- 語氣 權威、精緻且具前瞻性。
- 標題風格 簡短、具衝擊力的產品名稱或概念性提問。
- 按鈕文案 直接且行動導向，例如「立即探索」或「了解更多」。
- 勿使用陰影效果——截圖顯示依賴攝影深度的平面設計。
- 勿在按鈕或卡片上使用圓角——截圖顯示銳利方正的邊緣。
- 勿使用鮮豔的強調色——截圖顯示嚴格的單色調色板。
- 勿使用粗體字重作為內文字體——截圖顯示所有文字皆使用中等字重 (500)。
- 勿使用密集的文字區塊——截圖顯示寬裕的行高與段落間距。
- 勿使用裝飾性邊框——截圖顯示僅有功能性的 1px 細線。
- 避免: 避免使用隨意語言或表情符號
- 避免: 避免過多文字破壞視覺層次
- 避免: 避免使用鮮豔飽和的強調色
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Vitra 的視覺系統是編輯驅動的高端家具展示。採用以白色 (#FFFFFF)、近黑墨色 (#101010) 與柔和灰色 (#F7F7F7, #333333, #767676) 為中心的嚴格單色調色板。字型為簡潔的幾何無襯線字體，始終使用中等字重 (500)，並搭配寬裕行高與標籤字距。佈局以全版面電影級攝影與簡約、銳邊的 UI 元件定義。關鍵限制：永不使用陰影、永不使用鮮豔強調色、永不在按鈕或卡片等 UI 元件上使用圓角。
en · zh-CN · zh-TW · ja · ko