精選 · 開放 · 免費

Haleys

融合哥德字體與低飽和苔蘚色調的學術作品集。

01

設計氣質 DNA

深橡木桌上的一本手工裝訂論文

02

色彩

深森林綠背景上的高對比羊皮紙色

03

字型

blackletter · transitional-serif

• display72px · 400
• h132px · 400
• body20px · 300
• caption16px · 200

04

間距

區段與網格項目之間保留寬裕的垂直間距

05

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

0px 2.4px 0px 0px #12332b

06

版面

對稱網格，置中對齊並搭配寬邊距

07

動效與互動

hover 時背景色與邊框色的平滑過渡 · 裝飾性 SVG 元素的填色與描邊過渡

導航與專案連結的細微色彩變化與底線效果 · 透過游標 pointer 狀態提供即時視覺回饋

08

組件

• button 文字式導航，帶有細微邊框與小寫/斜體樣式
• card 無實心背景的文字式專案列表
• chip 導航列中的小型輪廓徽章（例如 'w'、'T'、'A'）
• hero 中央位置的大型哥德體名稱，兩側襯以襯線標語

09

文案語氣與禁用清單

• 語氣 工藝感、學術性、略帶趣味
• 標題風格 精緻的哥德體與過渡襯線字體，通常置中排列
• 按鈕文案 細微且融入整體設計，避免使用強勢按鈕

• 勿使用簡潔的現代無襯線字體——截圖顯示為哥德體與過渡襯線字體的混合。
• 勿使用明亮或飽和的背景色——截圖顯示為深邃低飽和的森林綠（#12332b）。
• 勿使用高對比的行動呼籲按鈕——截圖顯示為細微的文字式導航連結。
• 勿使用帶有厚重邊框的複雜多欄網格——截圖顯示為寬敞、對稱的佈局，搭配細緻線條。
• 勿使用活潑或趣味的色彩組合——截圖採用奶油色（#f8f2de）與苔蘚綠（#5a7c6b）的克制色盤。
• 勿使用強勢的投影或厚重的視覺重量——截圖顯示為極其細微、最小化的陰影效果。
• 避免: 霓虹色彩
• 避免: 強勢的無襯線字體
• 避免: 缺乏呼吸空間的密集文字區塊
• 避免: 高飽和或暖色調背景
• 避免: 喧鬧的行動呼籲

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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