Design System 02 / Structural

BRUTALISM
粗獷主義

裸露混凝土的結構誠實,搬進介面。厚邊框、直角、陶土與赭石的材料語言 — 沒有柔和陰影,沒有漸層,沒有裝可愛的圓角。

01Core Palette 核心配色

陶土紅與赭石黃是唯二的裝飾色,其餘全是混凝土灰階與印墨黑 — 材料標示,不是彩虹色盤。

陶土紅 Terracotta
#DD614C
赭石黃 Ochre
#DAA144
印墨黑 Ink Black
#111827
混凝土灰 Concrete Gray
#78716C
生白 Raw White
#FFFFFF
淺混凝土 Concrete Light
#E7E5E1
成功綠 Success
#16A34A
危險紅 Danger
#DC2626

02Typography 字重範圍

單一字族 Darker Grotesque,靠 100 → 900 的極端字重跨度撐出層級,反差即層級。

100Structural honesty 結構誠實
300Structural honesty 結構誠實
500Structural honesty 結構誠實
700Structural honesty 結構誠實
900Structural honesty 結構誠實

03Buttons 按鈕

直角、粗框、硬陰影 — hover 是瞬間跳變,沒有 easing 曲線。

04Tags & Badges 標籤

方形材料編號牌,零圓角、零旋轉。

PRIMARY SECONDARY SUCCESS 成功 WARNING 警告 DANGER 危險 NEUTRAL 中性

05Cards 卡片

白底粗框卡片,絕不旋轉、絕不錯位 — 與貼紙式新粗獷主義的關鍵區隔。

01 / STRUCTURE

結構誠實

邊框是結構線,不是裝飾線。每個容器都看得見自己怎麼被撐起來。

02 / MATERIAL

材料配色

陶土、赭石、混凝土灰 — 顏色來自燒製與氧化,不是印刷原色盤。

03 / IMMEDIACY

即時反饋

狀態變化沒有 easing 曲線,改變是立即發生、清楚可見的。

06Material Sample Panel 材料樣本板

招牌元件 — 像建材倉庫的材料樣本牆,每一格標示編號、名稱、色碼,架構本身就是內容。

MAT / 01
陶土
Terracotta
#DD614C
MAT / 02
赭石
Ochre
#DAA144
MAT / 03
混凝土
Concrete
#78716C
MAT / 04
印墨
Ink
#111827

07Color Reference 色碼對照

SwatchName 名稱HexRole 用途
🟠Terracotta 陶土紅#DD614CPrimary — actions / links
🟡Ochre 赭石黃#DAA144Secondary — accents
Ink Black 印墨黑#111827Text / borders / shadows
Raw White 生白#FFFFFFSurface
Concrete Gray 混凝土灰#78716CMuted / dividers
Concrete Light 淺混凝土#E7E5E1Alt surface
🟢Success 成功#16A34AConfirmation states
🟤Warning 警告#D97706Caution states
🔴Danger 危險#DC2626Error / delete states