精選 · 開放 · 免費
Stephaniespecht
一個原始、專案導向的作品集，讓多元的設計作品自行發聲。
StudioPortfolioEditorialTypographyGallery
01
設計氣質 DNA
實驗性結構直覺平面設計研究
一個平面設計工作室的數位展覽空間
02
色彩
#000000Ink
rgba(0,0,0,0.6)Ink soft
#FFFFFFBG
#FEFEFEBG soft
#E6E6E6BG quiet
#B0B0B0Muted
rgba(0,0,0,0.1)Line
採用嚴格的單色基底，讓色彩豐富的專案影像主導視覺。
03
字型
humanist-sans · geometric-sans
- display
32px · 700 - title
25px · 400 - body
16px · 400 - caption
12px · 400
預設字體堆疊為 'Helvetica Neue', Arial, sans-serif · 嚴格使用 400 與 700 的字體粗細 · 極簡的排版以避免與專案視覺元素競爭
04
間距
4px
8px
14px
16px
24px
32px
48px
專案容器與導覽元素均採用一致的 24px padding。
05
表面 (圓角 / 陰影 / 邊線)
sm · 5px
md · 5px
lg · 0px
pill · 999px
使用細微的 1px 邊框或底邊框進行區隔
rgba(0, 0, 0, 0.05) 0px 1px 3px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
一個密集的瀑布流風格網格，自適應從單欄至多欄佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
ease-outeasing
導覽元素 hover 時平滑的 opacity 過渡 · 互動狀態下細微的邊框過渡
導覽連結與專案影像的 opacity 變化 · 直接導覽至專案詳情頁面
08
組件
- button 基於文字的導覽連結，具有 hover 狀態
- card 代表個別專案的全幅出血影像容器
- chip 專案影像中的彩色標籤或小型標示
- input 極簡或隱藏
- hero 大型、沉浸式的專案影像，佔滿整個視窗寬度。
09
文案語氣與禁用清單
- 語氣 安靜、自信且著重過程
- 標題風格 簡短、具描述性的標題，嵌入於專案影像中
- 按鈕文案 細微且整合，常透過簡單的文字連結實現
- 不要使用複雜的色盤 — 螢幕截圖顯示為嚴格的單色基底（黑、白、灰）。
- 不要使用裝飾性字體 — 螢幕截圖顯示為功能性的 humanist-sans，用於所有介面文字。
- 不要添加厚重的陰影或光暈 — 螢幕截圖僅在部分元素上顯示非常細微的單像素陰影。
- 不要在專案影像上使用圓角 — 螢幕截圖顯示主要內容網格具有銳利邊緣。
- 不要讓介面充斥圖示或徽章 — 螢幕截圖顯示極簡的標頭，僅有文字連結。
- 不要建立多層次的導覽系統 — 螢幕截圖顯示為平面的水平頂層選單。
- 避免: 行銷術語或過度熱情的語言
- 避免: 大型、色彩鮮豔的行動呼籲按鈕
- 避免: 複雜且分散作品焦點的互動花樣
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為 Specht Studio 設計的工作室作品集網站。其設計 DNA 植根於原始、實驗性的美學，優先呈現專案影像而非介面裝飾。核心色盤嚴格採用單色，背景為白色（#FFFFFF），墨色為黑色（#000000），次要表面為淺灰色（#E6E6E6）。字體依賴標準的 humanist-sans 堆疊（Helvetica Neue, Arial, sans-serif），僅工作室名稱使用粗體，所有導覽與內文均使用常規字重。佈局為密集的瀑布流網格，展示全幅出血的專案影像。關鍵限制：1）切勿引入主導的強調色；讓作品提供所有色彩變化。2）切勿使用裝飾性字體或複雜的字體配對；保持介面嚴格的功能性。3）避免添加厚重的 UI 元素，如大型按鈕或複雜卡片；作品應是主要焦點。
en · zh-CN · zh-TW · ja · ko