回首頁
品牌配色與字體規範
全站統一採用「藍・白・黃」三色系統。所有團隊成員、加盟屋主與軟裝／行銷合作夥伴， 製作任何文宣、簡報或網頁時請直接引用本頁色票與字體階層，確保品牌一致。
藍 60% 主色白 25% 底色黃 15% 強調
核心色票
請使用語意代號（token），不要在元件內寫死色碼，才能同步淺色／深色模式。
oklch(0.52 0.16 255)
品牌藍（主色）
--primary主要按鈕、連結、重點數據、品牌識別
oklch(0.985 0.006 240)
純淨白（底色）
--background / --card頁面底色、卡片、留白區塊
oklch(0.92 0.11 95)
暖陽黃（強調）
--accent獎勵、分潤亮點、CTA 輔助標籤（面積不超過 15%）
oklch(0.24 0.05 255)
深藍墨（文字）
--foreground標題與內文主色，勿改用純黑
輔助色
oklch(0.94 0.025 245)
淺藍霧面
--secondary次要按鈕、標籤底
oklch(0.95 0.014 240)
灰霧
--muted說明區塊、表格斑馬底
oklch(0.9 0.02 245)
邊界線
--border卡片與分隔線
oklch(0.55 0.19 27)
警示紅
--destructive法規風險、刪除、錯誤提示
身份角色識別色
分潤圖表、派工單與合約說明中，各合作身份固定使用下列顏色與圖示。
🏠 屋主
--role-owner✨ 清潔
--role-clean🏢 平台
--role-platform🔧 修繕
--role-repair📢 行銷
--role-marketing👥 房客
--role-tenant字體規範
標題字 Display
風格公寓 Aa 123
Cormorant Garamond + Noto Serif TC；用於 h1–h4、主視覺標語。
font-display / --font-serif內文字 Body
風格公寓 Aa 123
Inter + Noto Serif TC；用於內文、按鈕、表格與數據。
font-sans / --font-sans| 層級 | 尺寸建議 | 用途 |
|---|---|---|
| H1 標題 | text-3xl / sm:text-4xl・font-display・semibold | 頁面主標 |
| H2 章節 | text-2xl・font-display・semibold | 區塊標題 |
| H3 小節 | text-lg・semibold | 卡片標題 |
| Body 內文 | text-sm ~ text-base・regular | 說明文字 |
| Caption 註解 | text-xs・text-muted-foreground | 法規備註、單位 |
| 數據強調 | text-2xl・font-semibold・text-primary | 分潤金額、點數 |
使用守則
建議做法
- • 以白底為主，藍色承擔行動與資訊層級。
- • 黃色只用於「獲利、獎勵、亮點」，維持稀缺感。
- • 所有顏色以語意 token 引用（bg-primary、text-accent-foreground）。
- • 中英文混排時字距 -0.01em，數字用內文字體。
- • 圓角統一 0.75rem（rounded-xl / rounded-md）。
請避免
- • 使用純黑 #000 或純灰階做文字與底色。
- • 大面積黃底配白字（對比不足，不符無障礙）。
- • 自行加入紫色、綠色等第四色系。
- • 在元件中寫死色碼（#3b82f6、text-white）。
- • 標題使用無襯線體、內文使用襯線體（角色顛倒）。
合作夥伴快速取用
主藍 HEX 近似值：#2F6BD8
暖黃 HEX 近似值：#F7D774
底白 HEX 近似值：#FAFBFD
墨藍 HEX 近似值：#1D2A45
印刷品請以 CMYK 校色為準，網頁與簡報一律使用上述 HEX。