精選 · 開放 · 免費
Simonfosters Website
資深產品設計師的作品集，以克制美學展示頂級案例研究
PortfolioCleanPremiumTypographyAgency
01
設計氣質 DNA
作品集資深產品設計師案例研究簡潔專業
以沉靜自信與精準排版呈現的設計作品精選畫廊
02
色彩
#393737Ink
#F6F7F6BG
rgba(57,55,55,0.5)Muted
rgb(57,55,55)Line
帶有細微雜訊紋理的中性暖灰色調，讓專案影像提供所有色彩
03
字型
grotesque-sans · monospace
- display
61px · 400 - heading
55px · 400 - subhead
24px · 400 - body
16px · 400 - small
14px · 400
所有文字統一使用 400 字重 · 大寫字體謹慎用於標籤與分類標籤 · 顯示尺寸的緊湊行高以增強衝擊力
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
章節間寬裕的垂直間距，搭配一致的 32px 與 96px 間隙，創造呼吸空間
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 48px
1px 實線深灰色（#393737）邊框，按鈕與標籤採用寬裕的膠囊形圓角
06
版面
1280container
12columns
32pxgutter
768 / 1024breakpoints
單欄作品集佈局，搭配寬裕的內距與置中內容
07
動效與互動
200msmicro
200mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
所有互動元素採用 0.2s 流暢過渡 · 所有過渡皆使用一致的 cubic-bezier 緩動
細膩的透明度或色彩過渡，0.2s 內完成，採用自訂 cubic-bezier 緩動 · 標準點擊行為，23 個互動元素顯示指標游標
08
組件
- button 膠囊形外框按鈕，寬裕內距（16px 32px）與 48px border-radius，透明背景配深色文字
- card 全寬專案展示，帶有雜訊紋理漸層背景與嵌入式瀏覽器截圖
- chip 小型大寫標籤，1px 實線邊框與緊湊內距，用於分類
- hero 大型排版專案標題，附年份範圍、標籤與描述性副標題，位於全寬專案預覽圖像上方
09
文案語氣與禁用清單
- 語氣 專業、內斂、自信而不浮誇
- 標題風格 大型、簡潔的 grotesque-sans 標題，附年份範圍，以克制優雅呈現
- 按鈕文案 簡單的大寫文字標籤，位於膠囊形外框按鈕中
- 勿使用多種字重——截圖顯示全文統一使用 400 字重
- 勿添加裝飾性圖形或插圖——截圖僅顯示排版與專案影像
- 勿在 UI 中使用鮮豔強調色——截圖顯示中性灰色調，色彩僅來自專案內容
- 勿建立複雜的多欄佈局——截圖顯示簡潔的單欄置中佈局
- 勿為卡片或元素添加陰影——截圖顯示完全扁平、無陰影的表面
- 勿在任何地方使用襯線字體——截圖僅顯示線條簡潔的 grotesque-sans 排版
- 勿為按鈕添加背景色——截圖僅顯示外框式膠囊按鈕
- 避免: 鮮豔色彩
- 避免: 裝飾性元素
- 避免: 複雜動畫
- 避免: 雜亂佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個資深產品設計師的作品集網站，具有簡潔、內斂的美學。設計採用中性暖灰色調（#F6F7F6）背景，帶有細微雜訊紋理，搭配深木炭色（#393737）排版。所有文字使用 Neue Montreal（grotesque-sans 類別）400 字重，營造一致而精緻的外觀。專案標題以大尺寸（55-61px）顯示，搭配緊湊行高。佈局為單欄式，章節間有寬裕的 96px 間距。按鈕為膠囊形，具 48px border-radius 與 1px 實線邊框。UI 本身無強調色——色彩僅來自專案展示影像。關鍵禁止事項：絕不使用多種字重、絕不添加陰影、絕不使用裝飾性圖形，並嚴格保持中性灰色調。本網站優先考慮內容清晰度與呼吸空間，而非視覺複雜度。
en · zh-CN · zh-TW · ja · ko