好事發生數位
Good Things Digital
網站、報價單、月報與簡報共用的同一套設計語言。
顏色、字級與間距各只有一份定義，
所以四個地方不會各自漂移，改一次全部跟著變。
標誌系統
核心設計理念
「寫在規範上的每一句，都可以拿去驗」
我們賣的是「讓 AI 查得到你，而且說得出根據」。 如果自己的設計規範做不到同一件事，就沒有立場賣。
所以這一頁沒有形容詞。下面三條是這套系統實際遵守的規矩， 每一條都可以打開網站原始碼對照。
Verifiable 可驗證
每個顏色都登記了對比度
過不了 AA 的就標明不能作正文
Restraint 克制
強調色一個畫面最多兩次
超過就不再是重點
Single Source 單一來源
顏色與間距各只有一份定義
頁面裡不寫死色碼
色彩系統
主色取自標誌實測。色值的唯一來源是 public/brand/tokens.css， 網站、報價單、月報與簡報共用同一份，所以四個地方的顏色不會各自漂移。
寫程式時只用語意層的名字（--ohya-primary）， 不要寫色階編號，更不要把 hex 寫死在頁面裡。
品牌藍綠
#0D768B --ohya-primary
連結、按鈕、重點。白底上 5.27:1，可作正文
墨色
#0C2126 --ohya-ink
標題與正文。白底上 16:1
薄荷白
#F3F9F8 --ohya-mint
區塊底色、卡片底
深色底
#084B58 --ohya-deep
首屏、CTA、頁尾的深色區塊
次要文字
#4A6167 --ohya-text-secondary
說明、註記。白底上 6.6:1
分隔線
#DCE7E9 --ohya-line
框線、分隔線
印章紅
#B8411D --ohya-accent
小面積強調，一個畫面最多兩次
藍綠色階
600 是標誌主色，50 是標誌的薄荷白。中間各階給圖表與狀態使用，版面請一律走上面的語意層，不要直接用編號。
50
#F3F9F8
100
#E2EFF2
200
#C5E1E6
300
#9BCAD4
400
#59ADBE
500
#1E95AD
600
#0D768B
700
#0A5D6D
800
#084B58
900
#063943
950
#0C2126
深色底上的文字只有三層
白 #FFFFFF 9.7:1 標題
--ohya-on-deep-bright #C6DBE0 6.8:1 深底正文
--ohya-on-deep #A9C4CB 5.3:1 次要文字、註記
深色區塊用 800 而不是 950：950 接近黑色，會讓面積最大的視覺看不出品牌是藍綠色。 要更多層次請改字級與字重，不要再發明第四個灰。
字體系統
| 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 v3.0 | 12px / 0.75rem | 1.5 | 0.1em | 400 (Regular) |
格線與間距 / Grid & Spacing
8pt 間距系統
所有的 Margin 與 Padding 皆為 8 的倍數。這創造了視覺上的韻律感與一致性。
例外：對於微小元件（如 Tag）內部可使用 4px。
12 欄佈局規範
- Mobile: 4 Columns, 16px Gutter, 24px Margin
- Tablet: 6 Columns, 24px Gutter, 32px Margin
- Desktop: 12 Columns, 32px Gutter, Auto Margin
元件庫
表單 / Forms
引言 / Blockquote
"Simplicity is the ultimate sophistication."
UI 互動原則
Motion Principles
我們的動畫應該是「優雅且緩慢」的，避免彈跳 (Bounce) 或急速 (Linear) 的效果。 所有過渡效果應模仿墨水暈染或紙張翻動的物理特性。
響應式策略
Mobile
< 767px
堆疊佈局
隱藏 Hover
Tablet
768px - 1023px
混合佈局
觸控友善
Desktop
≥ 1024px
12 欄網格
最大寬度 1600px