v2 — Revised Palette

Classical Morandi

TingYu's Design System — Color & Component Preview

Core Palette

淡巧克力 → 金色升格為核心第 7 色;深紫灰降為互動專用

#E3F3F1
薄荷冰
Mint Ice
Hero 區塊背景、重點段落底色、文字選取色
#C9E4E2
薄荷綠
Mint Green
次要表面、hover 狀態、活躍區域邊框
#F8F7EE
米白 / 奶油
Cream
頁面主背景 — 溫暖紙質感,取代純白
#F4F6F7
淡霜
Frost
交替區塊背景、卡片表面、微對比層
#A186B4
薰衣草紫
Lavender
主要強調色 — 按鈕、連結、焦點環、標籤
#C9A96E
古典金
Gold
裝飾線、Drop Cap、時間戳、溫暖輔助文字
升格為核心色
#E8D5A8
淡金
Gold Light
金色邊框、分隔線、輕量標籤底色
升格為核心色

Harmony Strip

薄荷 → 奶油 → 淡霜 → 薰衣草 → 金色,冷暖交織

Derived & Utility

從核心 7 色衍生 — 互動狀態、深色區塊、輔助色

#745A86 深紫灰僅用於 hover/pressed 狀態,不再作為區塊背景

Semantic Colors

Success 成功
Warning 警告
Error 錯誤
Info 資訊

Color Combinations

Mint + Purple

薄荷底色搭配薰衣草紫強調
最常用 — Hero、重點區塊

分類標籤

Cream + Gold

奶油底搭配金色裝飾線
古典文章頁、簽名區塊

2024 · Taiwan

Mist Purple + Gold

霧紫背景搭配金色點綴
引言區、深色 CTA 區塊

Premium

Frost + Gold

淡霜底搭配金色文字
輔助資訊、時間線、metadata

✦ Featured

Hero Section

◆ ✦ ◆

Where Craft Meets Code

每一件作品,都是一個沒說完的故事

◆ ✦ ◆

Typography Preview

The Art of Quiet Things

Morandi spent his life painting bottles and vases — ordinary objects rendered extraordinary through silence and subtlety. His palette taught us that restraint is not absence, but presence distilled. Every muted tone carries the weight of a deliberate choice.

莫蘭迪一生都在畫瓶瓶罐罐,用最安靜的顏色說最深的話。他的灰調粉、灰調綠、灰調藍,不是退讓,是一種溫柔的堅定。這個色系讓我想到手作的觸感 — 不完美,但真實。

Buttons

Dark Section — Before vs After

左:原本 #745A86(太重)→ 右:建議 #9585A6(灰霧紫,莫蘭迪感)

BEFORE

"Less color, more feeling."

Deep Purple Gray #745A86

AFTER ✦

"Less color, more feeling."

灰霧紫 #9585A6

"Less color, more feeling."

— Giorgio Morandi 的色彩哲學,也是這套設計系統的核心精神

Palette Summary

Color Hex Tier Role
薄荷冰 #E3F3F1 Core Hero 背景
薄荷綠 #C9E4E2 Core 次要表面、邊框
奶油 #F8F7EE Core 頁面背景
淡霜 #F4F6F7 Core 卡片、交替背景
薰衣草紫 #A186B4 Core 主強調色
古典金 #C9A96E Core ✦ 裝飾 + 輔助文字
淡金 #E8D5A8 Core ✦ 金色邊框、分隔線
霧紫 #9585A6 Derived 深色區塊背景
深紫灰 #745A86 Derived hover / pressed only