Design Systemv2.0
好事發生數位
Good Things Digital
這是一套基於「原子設計」與「無印美學」構建的設計語言。
我們定義了微小的間距、精確的字階與流暢的動態，
確保每一個數位接觸點，都能傳遞出理性與溫度的完美平衡。
Logo System
標誌系統
Primary Logotype
好事發生數位AI
01. Philosophy
核心設計理念
「如無印良品般的數位體驗」
我們的設計不追求過度的裝飾與喧嘩，而是專注於內容的本質與閱讀的呼吸感。
E
Essentialism
去除多餘裝飾
只保留意義
T
Tactile Quality
微細紋理
紙張手感
R
Rhythm
字級對比
閱讀韻律
02. Colors
色彩系統
Brand Primary
Brand Ink
#2D2A26
主要標題、內文、強調元素
Brand Background
#F5F5F0
整體頁面背景 (米色紙張)
Secondary & Accent
Brand Gray
#8C8C88
Brand Line
#E0E0D8
Brand Red
#C84630
僅用於點綴 (5%)
03. Typography
字體系統
| TOKEN | PREVIEW | SIZE (PX/REM) | LINE-HEIGHT | TRACKING | WEIGHT |
|---|---|---|---|---|---|
| H1 | 好事發生 | 60px / 3.75rem | 1.2 (Tight) | 0.05em | 300 (Light) |
| H2 | 數據的秩序 | 36px / 2.25rem | 1.3 | 0.05em | 300 (Light) |
| H3 | 我們的核心價值 | 24px / 1.5rem | 1.4 | 0.025em | 400 (Regular) |
| H4 | 服務項目概覽 | 18px / 1.125rem | 1.5 | 0.025em | 500 (Medium) |
| Body | 最好的科技是隱形的，它應該像空氣與水一樣自然。 | 16px / 1rem | 1.8 (Loose) | 0 | 300 (Light) |
| Small | Design System v2.0 | 12px / 0.75rem | 1.5 | 0.1em | 400 (Regular) |
04. Layout & Spacing
格線與間距 / Grid & Spacing
8pt 間距系統
所有的 Margin 與 Padding 皆為 8 的倍數。這創造了視覺上的韻律感與一致性。
例外：對於微小元件（如 Tag）內部可使用 4px。
xs4px (0.25rem)
sm8px (0.5rem)
base16px (1rem)
md24px (1.5rem)
lg32px (2rem)
xl64px (4rem)
2xl128px (8rem)
12 欄佈局規範
Content Container
Max-Width: 1600px
- Mobile: 4 Columns, 16px Gutter, 24px Margin
- Tablet: 6 Columns, 24px Gutter, 32px Margin
- Desktop: 12 Columns, 32px Gutter, Auto Margin
05. Components
元件庫
表單 / Forms
Focus: Border-color #2B2B2B
引言 / Blockquote
"Simplicity is the ultimate sophistication."
06. Interaction
UI 互動原則
Motion Principles
我們的動畫應該是「優雅且緩慢」的，避免彈跳 (Bounce) 或急速 (Linear) 的效果。 所有過渡效果應模仿墨水暈染或紙張翻動的物理特性。
Duration: 700ms - 1000msEasing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
07. RWD Strategy
響應式策略
Mobile
< 767px
堆疊佈局
隱藏 Hover
Tablet
768px - 1023px
混合佈局
觸控友善
Desktop
≥ 1024px
12 欄網格
最大寬度 1600px