精選 · 開放 · 免費

David Hckh

一個為網頁開發者設計的、活潑的 3D 插圖個人作品集

01

設計氣質 DNA

一個如插畫般溫馨、彷彿活了起來的開發者工作空間

02

色彩

溫暖的奶油色基底，搭配深墨色以製造對比，並用鮮明橘色作為主要操作色彩

03

字型

humanist-sans · monospace

• display72px · 800
• h248px · 800
• body16px · 400

導覽與標籤使用大寫字母 · 大型展示文字保持緊湊的負字距 · 標題使用粗體字重，以建立強烈的視覺層級

04

間距

一致的 4px 格線，主要區塊周圍留有寬裕的留白

05

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

外框使用 2px 實心墨色，標籤使用 4px 實心強調色

0 4px 24px rgba(45, 42, 36, 0.08) · 0 8px 32px rgba(45, 42, 36, 0.12)

06

版面

全寬分割佈局的主視覺，專案使用雙欄格線

07

動效與互動

hover 時平滑的背景顏色與變換過渡 · 顏色與透明度變化的 ease-in-out 過渡

互動元素上的細微背景顏色與變換變更 · 透過微過渡立即回應

08

組件

• button 藥丸形狀，border-radius 為 100px，橘色背景搭配白色文字
• card 帶有影像、border-radius 為 24px 的微圓角卡片
• chip 傾斜 4px 邊框的標籤，文字為大寫
• input 截圖中未顯示
• hero 分割佈局，左側為粗體大標題，右側為 3D 插圖

09

文案語氣與禁用清單

• 語氣 友善、易親近且專業
• 標題風格 大膽、粗體、略帶小寫風格的個性化人文無襯線體
• 按鈕文案 大寫的藥丸形按鈕，採用高對比橘色

• 不要使用細體字重——截圖顯示標題使用字重 800
• 不要使用深色背景——截圖顯示溫暖的奶油色背景 #F5EFE6
• 不要使用方形圓角——截圖顯示藥丸形狀的 border-radius 高達 100px
• 不要使用藍色作為強調色——截圖顯示橘色 #FF8400 為主要強調色
• 不要使用襯線字體——截圖僅使用 Urbanist 人文無襯線體
• 不要使用極簡留白——截圖顯示區塊間有寬裕的 padding 與間距
• 避免: 不要使用襯線字體
• 避免: 不要使用冰冷或臨床感的藍色作為主要強調色
• 避免: 不要使用銳利的方形圓角
• 避免: 不要使用細體或輕字重作為標題
• 避免: 不要使用深色模式背景
• 避免: 不要使用區塊間擁擠的間距

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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