精選 · 開放 · 免費
Artek
一個精緻的家具品牌網站,強調攝影敘事與克制、經典的字體排印。
furnituredesign
01
設計氣質 DNA
斯堪的納維亞家具設計傳承極簡主義
一本簡潔、高端的家具型錄
02
色彩
#000000Ink
#FFFFFFBG
#F7F7F7BG soft
#EAEAEABG quiet
#919191Muted
rgba(0,0,0,0.1)Line
單色調的 UI 色盤,高度依賴高品質攝影來提供溫暖感與深度。
03
字型
geometric-sans
- display
48px · 400 - heading
26px · 400 - body
18px · 400 - small
14px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白,通常由如 45px 的 padding 區塊定義。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 15px
pill · 999px
極簡,通常為 1px solid black 的輪廓線或底線。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
大型、全寬的攝影區塊,穿插結構化的文字網格版面。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI 元素採用流暢的淡入效果與細微過渡。
細微的色彩變化或透明度調整。 · 即時的回饋。
08
組件
- button 極簡的輪廓樣式,通常僅為帶有邊框或簡單填色的文字。
- card 以圖片為主導,搭配簡潔的文字覆蓋層。
- chip 不適用
- input 簡潔的底線或邊框式極簡輸入框。
- hero 全出血攝影,搭配顯眼、置中或左對齊的字體排印。
09
文案語氣與禁用清單
- 語氣 沉靜、權威且優雅。
- 標題風格 簡短、直接,並在字體排印上突出顯示。
- 按鈕文案 低調,通常僅為底線文字或簡潔按鈕。
- 不要使用高飽和度色彩——截圖顯示嚴格的單色調色盤。
- 不要使用厚重的陰影——截圖顯示平整、簡潔的表面。
- 不要使用裝飾性襯線字體——截圖顯示幾何無襯線字體排印。
- 不要讓版面充斥細小、密集的文字區塊——截圖顯示寬裕的間距。
- 不要使用醒目、彩色的按鈕——截圖顯示極簡的輪廓按鈕。
- 不要使用深色模式——截圖顯示主要為淺色背景。
- 避免: 過度裝飾
- 避免: 鮮豔色彩
- 避免: 俏皮的語言
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
Artek 是一個高端的芬蘭家具品牌。其網站展現了精緻的編輯美學,聚焦於高品質攝影。設計採用簡潔的幾何無襯線字體(Artek Futura)。色盤嚴格採用單色調,使用黑、白與中性灰(#F7F7F7、#EAEAEA),讓產品攝影提供溫暖感與特色。關鍵十六進位值包括 #FFFFFF 作為主要背景與 #000000 作為主要文字。不要使用過度裝飾或鮮豔色彩;避免厚重陰影或俏皮的字體排印;不要讓版面過於雜亂。
en · zh-CN · zh-TW · ja · ko