精選 · 開放 · 免費
Soussfurniture
極簡主義產品型錄,透過互動式文字導覽展示家具作品。
EditorialRestraintProductCuration
01
設計氣質 DNA
極簡產品型錄功能性簡潔
一個精心策劃的展間,讓家具自行訴說其設計
02
色彩
#000000Ink
#D6D5CFBG
#666666Muted
rgba(0,0,0,1.0)Line
絕對單色調——在柔和的暖灰色調背景上使用黑色文字,無任何色彩變化。
03
字型
geometric-sans
- display
48px · 400 - body
16px · 400 - caption
30px · 400
所有文字粗細統一為 400 · 底線用於表示產品的啟用/選取狀態 · 導覽使用句首字母大寫,無裝飾性樣式
04
間距
4px
8px
16px
20px
24px
32px
48px
64px
寬鬆的垂直節奏,互動元素周圍留有充裕的內邊距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
無可見邊框——佈局僅依賴排版與負空間
06
版面
1440container
1columns
48pxgutter
768 / 1024breakpoints
不對稱佈局,包含固定頂部標頭、置中文字區塊及懸浮產品剪影
07
動效與互動
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing
產品剪影在不同狀態間轉換 · 文字底線在懸停/選取時出現 · 所有互動元素具備流暢轉場效果
產品名稱下方出現底線 · 產品剪影變換且文字狀態更新
08
組件
- button 無傳統按鈕——整個產品名稱字串均可點擊,並帶有底線懸停狀態
- card 無卡片容器——產品以懸浮剪影的形式呈現於背景上
- hero 全視窗文字驅動的產品選擇器,具備互動式底線狀態
09
文案語氣與禁用清單
- 語氣 直接、功能性、極簡
- 標題風格 採用句首字母大寫並以句點結尾的簡潔產品名稱
- 按鈕文案 低調的「資訊」與「Instagram」導覽連結
- 不要添加鮮豔色彩——截圖顯示純粹單色調色板
- 不要使用粗體字——截圖顯示全文統一使用 400 字重
- 不要建立基於卡片的佈局——截圖顯示懸浮剪影置於平面背景上
- 不要添加裝飾性邊框或分隔線——截圖顯示僅透過排版進行分隔
- 不要使用多種字型家族——截圖顯示全程使用單一幾何無襯線字體
- 不要為元素添加陰影效果——截圖顯示完全平面的設計
- 避免: 裝飾性語言
- 避免: 行銷誇飾用語
- 避免: 複雜的導覽結構
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Souss Furniture 是一個極簡主義的家具產品型錄。設計採用單色調色板:#D6D5CF 背景搭配 #000000 文字。排版使用幾何無襯線字體 (acumin-pro),全文統一使用 400 字重,產品列表為 48px,導覽為 16px。佈局為不對稱設計,包含固定的頂部標頭、置中的產品列表文字區塊,以及懸浮的產品剪影。互動機制依賴文字底線來表示選取狀態。嚴格禁止事項:絕對不添加鮮豔色彩——設計嚴格採用單色調。絕對不使用粗體字——所有文字字重皆為 400。絕對不建立基於卡片的佈局——產品以剪影形式懸浮。絕對不添加裝飾性邊框——僅透過排版分隔。絕對不使用多種字型家族——一致性是關鍵。絕對不添加陰影效果——設計完全平面。
en · zh-CN · zh-TW · ja · ko