精選 · 開放 · 免費
Garden Eight
一個位於東京的數位設計工作室作品集，以富有表現力的排版和寬廣的留白為特色。
StudioPortfolioEditorialTypographyAgency
01
設計氣質 DNA
設計工作室東京數位大膽編輯風格
一個極簡的畫廊，排版是主要展品。
02
色彩
#1E1F1FInk
#DCD6D1BG
#DBD6D0Muted
rgba(30,31,31,1.0)Line
極度克制地使用單色調色板，讓富有表現力的排版和 3D 影像成為所有焦點。
03
字型
didone-serif · humanist-sans
- display
215px · 400 - body
15px · 400
導航連結使用大寫字母和字距調整。 · 在展示字重和內文字重之間營造高對比度。 · 允許標題和內文之間有巨大的尺寸變化。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的 padding，搭配寬廣的留白來框住內容區塊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgb(30, 31, 31)
rgb(30, 31, 31) 0px 2px 2px 0px inset · rgb(219, 214, 208) 0px 3px 2px 0px inset
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
極簡的格線系統，將內容推向絕對的邊緣。
07
動效與互動
222msmicro
400mssmall
800msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing
圖片顯示時，使用緩慢、流暢的 opacity 過渡。 · 3D 背景元素使用平滑的 transform 運動。
文字連結上有細膩的游標變化或 opacity 轉變。 · 標準的 pointer 狀態，提供最小化的即時視覺反饋。
08
組件
- button 極簡的文字連結，採用大寫樣式且無背景填充。
- card 邊緣乾淨，無 border-radius 或陰影效果。
- chip 極簡，如果存在，很可能是純文字標籤。
- input 極簡，如果存在，很可能是細長的底線輸入框。
- hero 佔滿整個視窗高度的大型排版。
09
文案語氣與禁用清單
- 語氣 自信、精緻、安靜。
- 標題風格 富有表現力、超大尺寸、具哲學性（例如：「我們下一步能創造什麼」）。
- 按鈕文案 極簡的大寫文字連結，依賴上下文而非按鈕。
- 不要使用明亮色彩——截圖顯示的是嚴格的中性米色和黑色調色板。
- 不要使用大圓角——截圖顯示的是銳利、方形的邊緣。
- 不要使用小的標題字型——截圖顯示展示字型佔滿了整個視窗。
- 不要使用雜亂的背景——截圖顯示的是乾淨、寬廣的米色表面。
- 不要使用粗體按鈕樣式——截圖顯示的是簡單的大寫文字連結。
- 不要使用深色主題——截圖顯示的是以明亮、暖色調為主的介面。
- 避免: 雜亂的佈局
- 避免: 明亮、飽和的色彩
- 避免: 裝飾性的 UI 元素
- 避免: 小而擁擠的排版
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個位於東京的高端數位設計工作室作品集，其特點是極端的排版尺度和極簡的克制。調色板為單色調，包含溫暖的米色背景（#DCD6D1）和深炭色墨水（#1E1F1F）。排版類別包括用於富有表現力展示文字的 didone-serif，以及用於清晰內文的 humanist-sans。關鍵的設計限制包括：避免添加明亮的強調色或裝飾性的 UI 花紋，永遠不要將主標題字型縮小到視窗的 20% 以下，並在元素之間保持廣闊的留白，以維持畫廊般的氛圍。
en · zh-CN · zh-TW · ja · ko