精選 · 開放 · 免費
Dougalves Work
一個高對比、以文字排版為核心的視覺設計師作品集。
PortfolioEditorialTypographyCleanStudio
01
設計氣質 DNA
極簡編輯風格文字排版專業單色調
一本經過精心挑選的藝廊專題畫冊,搭配超大展示字型。
02
色彩
#FFFBF9Ink
#FFFBF9A6Ink soft
#1D1610BG
rgba(40,40,40,0.1)Line
嚴格的高對比單色調,帶有暖色基調。
03
字型
geometric-sans · neo-grotesque-sans
- display
197px · 400 - heading
16px · 400 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
緊湊的垂直節奏與寬裕的水平間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
無可見邊框。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面端為嚴謹的四欄格線,在行動端縮減為兩欄。
07
動效與互動
200msmicro
400mssmall
500msmedium
cubic-bezier(0.4, 0.24, 0.4, 1)easing
滾動時平滑揭示。 · 變形屬性的 cubic-bezier 過渡效果。
細微的透明度或變形變化。 · 即時過渡。
08
組件
- button 純文字連結,無視覺容器。
- card 無可見元件。
- chip 無可見元件。
- input 無可見元件。
- hero 全視窗的文字排版聲明,搭配大型幾何文字。
09
文案語氣與禁用清單
- 語氣 直接、專業且極簡。
- 標題風格 巨大、緊縮字距、大寫的幾何無襯線體。
- 按鈕文案 純文字,無視覺強調。
- 不要使用陰影效果——截圖顯示的是無深度提示的平面表面
- 不要使用圓角按鈕——截圖顯示的是無邊框或圓角的純文字連結
- 不要使用多種字型家族——截圖顯示的是嚴格的兩種字型系統(幾何展示字型、新怪誕體內文字型)
- 不要使用鮮豔的強調色——截圖顯示的是深棕色與米白色的嚴格單色調色盤
- 不要為內文使用過大的行高——截圖顯示的是緊湊、緊密的行距
- 不要使用裝飾性邊框——截圖顯示的是僅用於嚴格分隔的極簡水平線
- 避免: 裝飾性元素
- 避免: 過多的內邊距
- 避免: 鮮豔的強調色
- 避免: 陰影效果
- 避免: 複雜的格線
- 避免: 斜體文字
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個視覺設計師的極簡作品集網站,使用深沉、溫暖的棕色背景(#1D1610)與米白色(#FFFBF9)文字。文字排版以巨大的幾何無襯線展示字型主導主標題,搭配簡潔的新怪誕體作為內文字型。版面是嚴謹的格線式結構,具有寬裕的水平間距與緊湊的垂直節奏。關鍵的禁止事項:避免使用任何鮮豔的強調色或陰影效果,因為此設計完全依賴高對比的單色調與平面表面。不要使用圓角按鈕或裝飾性邊框;互動處理透過純文字連結與細微的透明度變化。最後,避免過多的內邊距或複雜的視覺元素,以免分散對文字排版的專注。
en · zh-CN · zh-TW · ja · ko