精選 · 開放 · 免費

Brittany Chiang

一個強調字型排版與內容層級的簡潔、無障礙開發者作品集。

01

設計氣質 DNA

一份精心打造的工程作品集

02

色彩

採用高對比度的深色背景與淺色文字，確保可讀性，並以青綠色作為互動元素的強調色。

03

字型

humanist-sans · monospace

• display48px · 700
• h120px · 500
• body16px · 400
• caption12px · 500

標籤使用大寫 · 次要資訊使用柔和色調 · 名稱與標題使用粗體

04

間距

4px 基礎網格

05

表面 (圓角 / 陰影 / 邊線)

rgba(226,232,240,0.1)

06

版面

採用兩欄式佈局，包含固定的側邊欄導航與主要內容區域。

07

動效與互動

懸停時的顏色與背景色過渡效果 · 連結的變換過渡效果

文字顏色變化，標籤的背景色變化。 · 標準的連結導航。

08

組件

• button 藥丸形狀的標籤，採用青綠色背景與深色文字。
• card 經驗條目，包含日期、職稱與技術標籤。
• chip 用於展示技術的圓角小矩形。
• hero 大而粗體的名稱、副標題與簡短簡介。

09

文案語氣與禁用清單

• 語氣 專業、自信且清晰。
• 標題風格 直接且具描述性。
• 按鈕文案 極簡，通常僅為帶有箭頭的文字連結。

• 避免使用淺色背景 — 螢幕截圖顯示的是深石板色（#0f172a）背景。
• 避免只使用單一強調色 — 螢幕截圖顯示青綠色（#5eead4）僅用於亮點。
• 避免使用過大的間距 — 螢幕截圖顯示緊湊的 16px 間隔與 4px 基礎網格。
• 避免使用裝飾性字型 — 螢幕截圖顯示的是簡潔的人文無襯線字體。
• 避免使用厚重的陰影 — 螢幕截圖顯示的是平坦的表面。
• 避免使用複雜的漸層 — 螢幕截圖顯示的是純色與微妙的放射狀漸層。
• 避免: 過於隨意的語言
• 避免: 華麗或分散注意力的動畫
• 避免: 對作品的模糊描述

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko