Design System Preview

Refined 誌上優雅

Serif-forward editorial system — Playfair Display 領銜、藍紫僅作配角
Where typography carries the interface's authority.

01 / Palette

Core Palette 核心色板

天青藍 Primary
#3B82F6
紫羅蘭 Secondary
#8B5CF6
皓白 Surface
#FFFFFF
墨黑 Text
#111827
成功綠 Success
#16A34A
警告橙 Warning
#D97706
危險紅 Danger
#DC2626
02 / Type

Typography 字體樣張

H1 — Playfair Display · 700 · clamp(1.8rem, 4vw, 2.2rem)

字體就是介面

H2 — Playfair Display · 600 · 24px

Editorial, Authoritative, Curated

H3 — Playfair Display · 600 · 20px

卡片標題級距

Body — Inter · 16px · line-height 1.7

大字級標題用 Playfair Display 承載編輯權威，小字級控制項一律切回 Inter 保證可讀。技術性內容用 JetBrains Mono。

03 / Actions

Buttons 按鈕

色彩只標記可互動元素，從不佔滿大面積色塊。

04 / Labels

Tags & Badges 標籤徽章

FEATURE EDITION — 02 Verified Deprecated
05 / Surfaces

Cards 卡片

作品集展示

白底、細邊框、hover 轉天青藍並浮出極淺陰影，不搶字體風采。

訂閱方案

大字級品名用 Playfair Display，說明文字保持 Inter 的清晰。

作者頁面

留白慷慨，讓襯線字型的筆畫細節有呼吸空間。

06 / Signature

Editorial Stat 誌面數字

128
Published Pieces
4.9
Reader Rating
32K
Subscribers

"字體本身就帶有品質、傳統與用心的文化聯想，這會影響使用者對產品的觀感。"

— Design Philosophy, Refined System
07 / Reference

Color Reference 色彩對照

色彩Hex角色
天青藍#3B82F6Primary — 主要動作、連結
紫羅蘭#8B5CF6Secondary — 輔助強調
皓白#FFFFFFSurface — 畫布底色
墨黑#111827Text — 內文與標題
成功綠#16A34ASemantic — Success
警告橙#D97706Semantic — Warning
危險紅#DC2626Semantic — Danger