精選 · 開放 · 免費
Wakawaka
一個精緻的設計工作室作品集,以大膽、雕塑感的排版展示功能性木製物件。
PremiumStudioPhotographicBold TypographyClean
01
設計氣質 DNA
家具工作室極簡工藝首頁
極簡主義的畫廊展覽目錄。
02
色彩
#28282AInk
#EDEAE4BG
#D4D1CBBG soft
#C9C7C4Muted
rgba(40,40,42,1.0)Line
高對比、極簡的色彩方案,著重於讓排版與攝影成為焦點。
03
字型
grotesque-sans
- display
560px · 500 - body
14px · 400
導覽與元資料使用大寫小型大寫字母 · 小型大寫文字使用寬鬆的字間距 · 巨大的展示文字使用極端緊縮的負字間距
04
間距
4px
8px
16px
20px
24px
32px
48px
96px
寬裕的垂直間距搭配最小的水平 padding,讓排版可延伸至邊緣。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 50px
無;依賴形狀與間距進行區隔。
06
版面
1440container
12columns
20pxgutter
768 / 1024breakpoints
全出血垂直堆疊,以超大排版主導視區。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.445, 0.05, 0.55, 0.95)easing
在 hover 狀態下進行細微的透明度與變換過渡。
細微的縮放或透明度變化。 · 立即回應,無彈跳效果。
08
組件
- button 無可見元素。
- card 無可見元素。
- chip 無可見元素。
- input 無可見元素。
- hero 巨大的排版標誌,搭配全寬攝影研究。
09
文案語氣與禁用清單
- 語氣 極簡、安靜且自信。
- 標題風格 單詞、巨大且具雕塑感。
- 按鈕文案 無可見元素。
- 不要使用白色背景 — 截圖顯示為灰白色(#EDEAE4)背景。
- 不要為元素添加陰影 — 截圖顯示為完全平面的設計,無陰影。
- 不要使用小而緊湊的展示字體 — 截圖顯示為巨大、擴展的排版。
- 不要在主視覺文字上使用寬鬆的字間距 — 截圖顯示為極端緊縮的負字間距。
- 不要使用彩色強調色 — 截圖顯示為嚴格的單色調色彩方案,無鮮豔的強調色。
- 不要在佈局元素上使用圓角 — 截圖顯示為銳利、未倒角的邊緣。
- 避免: 雜亂
- 避免: 過度裝飾
- 避免: 複雜的導覽
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個極簡主義設計工作室作品集,為「Waka Waka」而設,這是一家位於洛杉磯的家具製造商。視覺識別依賴巨大、極度緊縮的 grotesque-sans 排版,文字延伸至螢幕邊緣,創造出雕塑般的效果。色彩方案嚴格克制:灰白色背景(#EDEAE4)、深炭灰色墨水(#28282A)以及用於質感的柔和灰色(#C9C7C4)。攝影帶有柔和、帶有顆粒感的質感。關鍵禁忌:永遠不要在佈局元素上使用圓角、永遠不要添加陰影、永遠不要在標題上使用寬鬆的字間距。設計在於文字巨大規模與其周圍安靜、空白空間之間的張力。
en · zh-CN · zh-TW · ja · ko