Design System Preview

Cream 奶油圓融

溫暖圓角的產品介面設計系統
奶油與柔霧灰交替鋪底・活力藍互動層・邊框取代陰影

Palette 色彩

Core Palette 核心色板

七色核心色板：兩個交替版面底色、一個活力藍主色、標題與正文兩級文字色、髮絲邊框，以及支援儀表板的天藍點綴。

奶油底

Cream Surface

#FBF6EC

柔霧灰

Soft Gray Surface

#F0F1F4

活力藍

Vivid Blue

#2F6FED

墨黑標題

Ink Heading

#1E2029

暖灰正文

Warm Body Gray

#6B6D76

髮絲邊框

Hairline Border

#E3E1DA

天藍點綴

Sky Tint

#A9C6FF

Typography 字體

Typography Specimen 字體樣本

Montserrat 定義標題與 UI 個性；長段落正文改用 Inter 撐住可讀性，兩者字面比例相近，換字不換氣質。

H1 — Montserrat 800

友善介面，值得信任

H2 — Montserrat 700 · 2rem

圓角外殼，統一材質語言

H3 — Montserrat 700 · 1.375rem

邊框定義結構，而不是陰影

Body — Inter 400 · 17px · line-height 1.7

Cream 系統用活力藍連結領銜互動層，長段落交給 Inter 負責，讀起來柔和不生硬，同時保留 Montserrat 撐起的品牌辨識度。

Buttons 按鈕

24px 圓角矩形，非全膠囊；Primary 藍底白字，Hover 加深至 #1E4FC2

Tags 標籤

Tags & Badges 標籤與徽章

緊湊控制項一律 4px 圓角，與大容器的 24px 形成刻意的雙層節奏。

推薦 Recommended 上線中 Active 審核中 Pending 已停用 Disabled 草稿 Draft 3

Cards 卡片

Bordered Cards 邊框卡片

卡片背景是所在版面的淺色調，搭配 1.5px 邊框，不用陰影撐深度。

預約管理 Booking

柔霧灰版面上的卡片使用 Gray Card #FAFBFD，比版面底色再淺一階。

學習追蹤 Progress

邊框顏色統一使用髮絲邊框 #E3E1DA，Hover 才出現極淺陰影。

創作者工具 Creator Tools

24px 圓角讓卡片與按鈕、輸入框共享同一種材質感。

Signature Component 招牌元件

✨ Alternating Section Card Stack 交替版面卡片堆疊

系統的定義特徵：兩個版面堆疊，各自用自己的底色，內含一張「更淺一階＋邊框」的卡片 — 這是 Cream 系統辨識度最高的畫面。

Section A — Cream 奶油面

奶油面卡片

底色 #FBF6EC，卡片用更淺的 Cream Card #FFFEFA + 邊框，構成本系統的第一種節奏。

Section B — Soft Gray 柔灰面

柔灰面卡片

底色 #F0F1F4，卡片用更淺的 Gray Card #FAFBFD + 邊框，與上方奶油面交替出現。

Reference 對照

Color Reference 色彩對照表

色彩	Hex	角色
奶油底	#FBF6EC	Primary section background
柔霧灰	#F0F1F4	Secondary section background
活力藍	#2F6FED	Primary action — buttons, links, focus
墨黑標題	#1E2029	Heading text
暖灰正文	#6B6D76	Body text, captions
髮絲邊框	#E3E1DA	Card / input / table borders
天藍點綴	#A9C6FF	Extended chart-accent