Design System Preview

Terracotta 陶土誌

暖奶油紙面・墨棕 serif 標題・單一陶土強調色
A sun-baked editorial system for long-form reading

Core Palette 核心配色

陶土棕
#C56A3C
暖沙紙
#F3E9D8
焦墨棕
#3A241C
墨色
#111827
灰棕霧
#6F5A4E
淨面白
#FFFFFF

Typography 字級樣張

H1 — DM Serif Display · 40px

Designing With Clay

H2 · 32px

暖色，是一種克制

Body — DM Serif Display · 18px · line-height 1.65

陶土色只當作單一強調色，像編輯在稿紙上蓋的一枚印章，真正撐起氣質的是墨棕標題與寬鬆行距。技術性資訊如 #C56A3C 用 JetBrains Mono 呈現。

Buttons 按鈕

Primary 陶土實心底，Secondary 透明底 + rule 邊框，focus-visible 為 3px 陶土外框

Tags & Badges 標籤

Essay Culture Saved Review Error

Story Cards 文章卡

Essay

Designing With Clay

A short essay on warmth, restraint, and the rhythm of editorial interfaces.
8 min read · Culture Desk
 Interview

晒過太陽的紙

與陶藝師談釉色、耐心，以及一份好雜誌該有的溫度。
12 分鐘閱讀 · 工藝專欄

Pull Quote 引言（招牌元件）

"Warmth comes from restraint. The clay accent should guide attention — it should not flood the interface." — Editorial Principle No. 4

32–40px DM Serif Display，3px 陶土左邊線，前後留白充足避免打斷閱讀

Color Reference 色彩對照

色彩Hex角色
陶土棕#C56A3CPrimary — 連結、按鈕、pull quote 邊線
暖沙紙#F3E9D8Secondary — 全頁畫布底色
焦墨棕#3A241C標題與編輯層級文字
墨色#111827內文正文、UI 文字
灰棕霧#6F5A4EMetadata、caption
成功綠#16A34ASemantic — 成功、已儲存
危險紅#DC2626Semantic — 錯誤、刪除確認