精選 · 開放 · 免費
Delba de Oliveira
專為開發者教育專家打造的簡潔、字體排印焦點作品集。
portfoliodev
01
設計氣質 DNA
極簡開發者教育編輯風格簡潔文字導向
排版精良的學術論文
02
色彩
#2A2A29Ink
#FAF9F7BG
#666666Muted
rgba(0, 0, 0, 0.1)Line
溫暖中性背景上的高對比度
03
字型
transitional-serif · monospace
- display
40px · 500 - headline
24px · 600 - body
18px · 400 - small
16px · 400
使用單一襯線字族同時作為展示字體與內文字體，以維持編輯美學。 · 確保標題具有強烈的視覺重量層次。 · 內文連結使用底線，以維持文字區塊的可讀性。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
章節之間採用寬裕的垂直間距，列表內部則保持緊湊節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
無，但手機版佈局頂部有細微邊框。
06
版面
1200container
12columns
48pxgutter
768 / 1024breakpoints
桌面版為雙欄不對稱網格，手機版為單欄。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
幾乎無可見動態效果。
連結可能會改變顏色或底線樣式。 · 標準連結導覽。
08
組件
- button 實心黑色背景、白色文字、微圓角。
- card 無。內容以平面化、基於文字的列表格式呈現。
- chip 無。
- input 無。
- hero 極簡的文字專屬主視覺，包含大型襯線標題與簡短介紹段落。
09
文案語氣與禁用清單
- 語氣 專業、直接且明確。
- 標題風格 清晰且具描述性的章節標題。
- 按鈕文案 對話式且以行動為導向。
- 勿使用裝飾性漸層 — 截圖顯示為平面、實心背景。
- 勿使用圓角容器邊框 — 截圖顯示為銳利、方正的邊緣。
- 勿使用鮮豔、高彩度的強調色 — 截圖顯示為嚴格的單色調色盤。
- 勿使用無襯線字體作為內文字體 — 截圖顯示標題與內文皆使用襯線字體。
- 勿使用複雜的卡片或面板 — 截圖顯示為簡單、無邊框的內容區塊。
- 勿在 UI 元素上使用陰影 — 截圖顯示完全平面的設計。
- 避免: 避免使用術語過多或過於複雜的語言。
- 避免: 避免使用分散內容注意力的裝飾性元素。
- 避免: 避免使用隨意的俚語或過度熱情的語氣。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計是為開發者教育專家打造的精緻、編輯風格作品集。採用黑色與深灰色組成的單色調色盤，搭配溫暖的米白色（#FAF9F7）背景。字體排印是核心元素，標題與內文皆使用過渡襯線字體。佈局在桌面版為簡潔的雙欄不對稱網格，專注於可讀性。關鍵禁忌包括：避免裝飾性漸層、避免圓角容器邊框、不使用高彩度強調色。
en · zh-CN · zh-TW · ja · ko