精選 · 開放 · 免費
&Tradition
頂級北歐家具品牌,具備編輯風格與畫廊感的數位形象。
furnituredesign
01
設計氣質 DNA
家具設計傳統工藝美學
一個精心策劃的永恆家具作品畫廊。
02
色彩
#282828Ink
#454545Ink soft
#EDECE8BG
#F6F6F6BG soft
#CFD3BCBG quiet
#5D5D5DMuted
rgba(40,40,40,0.1)Line
溫暖、中性的背景,為高品質攝影提供一個寧靜、美術館般的舞台。
03
字型
transitional-serif · geometric-sans
- display
36px · 400 - body
14px · 400
所有 UI 元素、導航與內文使用幾何無襯線字體。 · 主要編輯標題與特寫標題使用過渡襯線字體。 · 保持乾淨、開放的排版感受,並確保足夠的間距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
8px 基線網格,搭配寬鬆的垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(40,40,40,0.1)
rgba(0, 0, 0, 0.1) 0px 0px 2px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的編輯網格,大尺度影像與文字交錯呈現。
07
動效與互動
150msmicro
200mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
懸停時細微的透明度與色彩過渡。 · 開啟覆蓋層時的流暢過渡效果。
連結與按鈕的懸停效果為細微的色彩變化或底線。 · 立即的視覺回饋。
08
組件
- button 極簡的文字連結,偶爾加上底線。
- card 以影像為主的編輯式卡片,下方搭配乾淨的排版。
- chip 大寫、小型大寫字母的導航或分類標籤。
- input 簡潔的文字輸入框,邊框極簡。
- hero 全寬攝影主視覺,文字置中或底部對齊。
09
文案語氣與禁用清單
- 語氣 精緻、詩意且具描述性。
- 標題風格 富有意境與主題性,常使用過渡襯線字體。
- 按鈕文案 極簡且功能性強,通常僅為「閱讀更多」連結。
- 勿使用霓虹色或高飽和的原色——截圖顯示的是柔和、大地色調。
- 勿使用圓潤、泡泡狀的 UI 元素——截圖顯示的是銳利、矩形的形狀。
- 勿在介面中堆砌大量小型圖示——截圖顯示的是極度乾淨、簡約的版面。
- 勿對所有文字使用粗重的無襯線字體——截圖顯示的是襯線與無襯線字體的混合使用。
- 勿以深色模式作為主要主題——截圖顯示的是明亮、溫暖的米白色背景。
- 勿使用強烈的陰影效果——截圖顯示的是極其細微、最小的陰影效果。
- 避免: 激進的行銷用語
- 避免: 花俏或雜亂的視覺元素
- 避免: 大膽、高飽和度的色彩組合
- 避免: 過於複雜的導航結構
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計 DNA 適用於像 &Tradition 這樣的高端編輯式家具品牌。定位為高端且精心策劃。關鍵色彩為溫暖的中性色,如 #EDECE8 和 #F6F6F6,搭配深色墨水 #282828。排版混合使用過渡襯線字體作為展示字體,與幾何無襯線字體作為內文字體。關鍵禁忌:避免使用霓虹色,避免圓潤或高度圓角的 UI,且絕不使用過多小型圖示使介面雜亂。整體感受是寧靜、精緻且如畫廊般的。
en · zh-CN · zh-TW · ja · ko