精選 · 開放 · 免費
Def Studio
一個設計工作室作品集，以大尺度排版搭配深色氛圍的產品攝影。
StudioPortfolioDark ModeBold TypographyClean
01
設計氣質 DNA
設計工作室作品集視覺識別網站開發
一個極簡數位作品集，透過粗體排版與高對比視覺效果展示創意作品。
02
色彩
#EFEFEFInk
#000000BG
#747474Muted
rgba(239,239,239,0.1)Line
嚴格的高對比單色調色板，依賴純黑背景與白色/淺灰文字以達最佳可讀性。
03
字型
humanist-sans
- display
96px · 300 - heading
25px · 300 - body
16px · 400
使用淺字重（300）作為展示與導覽文字，以維持優雅感。 · 文字層級主要透過極端的尺寸差異而非字重變化來建立。 · 導覽項目使用與章節標題相同的字體，但尺寸較小。
04
間距
4px
8px
10px
16px
20px
24px
30px
48px
60px
100px
寬裕、不對稱的間距，由特定 padding 值如 100px 30px 60px 30px 驅動。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極少使用邊框，主要為導覽元素的文字邊框。
06
版面
1400container
12columns
30pxgutter
768 / 1024breakpoints
全寬深色背景，搭配大型、左側對齊的排版覆蓋層。
07
動效與互動
220msmicro
300mssmall
500msmedium
600mslarge
cubic-bezier(1, 0.5, 0.8, 1)easing
廣泛應用 0.5 秒過渡於頂部與透明度屬性。 · 使用透明度淡入淡出來處理元素可見性變化。
Pointer 游標表示互動元素，可能伴隨細微的透明度或色彩變化。 · 直接導覽至作品集區塊或外部連結。
08
組件
- button 純文字按鈕，游標為 pointer，無背景填充。
- card 基於圖片的作品集卡片，下方帶有文字標籤，無邊框或背景容器。
- hero 全螢幕深色氛圍圖片，搭配大型左側對齊的文字導覽。
09
文案語氣與禁用清單
- 語氣 自信、極簡且專業。
- 標題風格 小寫、大尺度、淺字重、無襯線體。
- 按鈕文案 簡單的文字連結，整合於導覽或行內文字中。
- 不要使用圓角——截圖顯示所有卡片與元素皆為銳利邊緣
- 不要添加陰影——截圖顯示完全平坦、無邊框的表面
- 不要使用多欄文字佈局——截圖顯示左側對齊、寬幅排版
- 不要使用粗字重——截圖主要使用淺字重（300）與一般字重（400）
- 不要使用裝飾性圖案——截圖顯示純色與攝影背景
- 不要使用置中對齊文字——截圖顯示導覽與標題採用強烈的左對齊
- 避免: 過多裝飾性元素
- 避免: 高飽和度強調色
- 避免: 密集的文字區塊
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Def.studio 是一個以極端排版尺度與嚴格單色調色板為特色的設計工作室作品集。其視覺識別依賴大尺度（96px）的淺字重無襯線體，在純黑背景（#000000）上營造大膽、極簡的美學。關鍵色彩包括純黑背景與淺灰（#EFEFEF）主文字，以及較不顯眼的柔和灰色（#747474）輔助色調。佈局為不對稱且全版面，將攝影用作背景紋理而非框景。關鍵限制包括避免圓角或陰影、維持嚴格的左對齊文字，以及絕不使用高飽和度強調色，確保焦點完全留在作品與排版上。
en · zh-CN · zh-TW · ja · ko