精選 · 開放 · 免費
Ingmarcoenen
一個大膽的單色調作品集網站，以巨大的客製化字體和簡潔的極簡主義為核心。
PortfolioStudioCleanTypographyPhotographic
01
設計氣質 DNA
大膽極簡實驗性創意數位
高對比的編輯風格作品集，具有極端的字體比例
02
色彩
#000000Ink
#3a4042Ink soft
#ffffffBG
#f2f2f2BG soft
#919191Muted
rgba(0,0,0,1.0)Line
高對比單色調，偶爾搭配攝影圖片
03
字型
display-sans · neo-grotesque-sans · serif
- display
295px · 400 - body
13px · 400 - heading
36px · 400
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
80px
120px
不對稱，搭配寬裕的留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 12px
lg · 12px
pill · 100px
啟用狀態下為 1px solid black，其餘無邊框
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱網格，頂部對齊的巨大主視覺與偏移的內容區塊
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
淡入淡出過渡
按鈕與連結的背景顏色變化 · 細膩的縮放或顏色變化
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
這是一個高對比的單色調作品集網站，為數位設計總監而設計。設計 DNA 以極端的字體比例定義，使用客製化的展示字體和新幾何無襯線字體作為介面元素。關鍵色彩為純黑 (#000000) 搭配白色 (#ffffff) 或淺灰 (#f2f2f2) 背景。佈局不對稱且留白寬裕，介面元件使用 12px 和 4px 的 border-radii。關鍵禁忌包括：勿使用多色彩色調、勿使用小型展示字體、勿使用厚重投影。語氣專業、直接且個人化，專注於作品本身，而非炫目的視覺效果。
en · zh-CN · zh-TW · ja · ko