TingYu's Design System — Color & Component Preview
淡巧克力 → 金色升格為核心第 7 色;深紫灰降為互動專用
薄荷 → 奶油 → 淡霜 → 薰衣草 → 金色,冷暖交織
從核心 7 色衍生 — 互動狀態、深色區塊、輔助色
#745A86 深紫灰僅用於 hover/pressed 狀態,不再作為區塊背景
薄荷底色搭配薰衣草紫強調
最常用 — Hero、重點區塊
奶油底搭配金色裝飾線
古典文章頁、簽名區塊
霧紫背景搭配金色點綴
引言區、深色 CTA 區塊
淡霜底搭配金色文字
輔助資訊、時間線、metadata
每一件作品,都是一個沒說完的故事
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.
莫蘭迪一生都在畫瓶瓶罐罐,用最安靜的顏色說最深的話。他的灰調粉、灰調綠、灰調藍,不是退讓,是一種溫柔的堅定。這個色系讓我想到手作的觸感 — 不完美,但真實。
左:原本 #745A86(太重)→ 右:建議 #9585A6(灰霧紫,莫蘭迪感)
Deep Purple Gray #745A86
灰霧紫 #9585A6
— Giorgio Morandi 的色彩哲學,也是這套設計系統的核心精神
| 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 |