品牌視覺規範
我們精心設計的
網頁＆品牌識別指引
這是一套專注於「簡潔、專業、現代」的設計語言。我們定義了精確的色彩、字階與動態效果，確保每一個數位接觸點都能傳遞出專業與創新的完美平衡。
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
往下看更多精彩特色設計 ▼Scroll Down To Unlock More Features ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
Scroll Down To Unlock More Features ▼往下看更多精彩特色設計 ▼
主要標誌型
完整組合
陳愷翊
Kaiyi Chen
左側頭像
兩行排列
陳愷翊
Kaiyi Chen
右側頭像
兩行排列
陳愷翊
Kaiyi Chen
最小尺寸
數位媒體：120px 寬度
印刷品：30mm 寬度
安全空間
四周保持字高的 0.5 倍空間
使用場景
標誌型：網站頁首
搭配頭像：名片、社群
Primary
var(--theme-color-primary)
品牌主色、主要按鈕
Secondary
var(--theme-color-secondary)
輔助色、強調元素
Background
var(--theme-color-background)
整體頁面背景
Foreground
var(--theme-color-text)
主要文字顏色
Muted
var(--theme-color-surface-muted)
次要背景、卡片背景
Muted Foreground
var(--theme-color-text-muted)
次要文字、說明文字
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
陳愷翊 Kaiyi Chen
字體家族
Noto Sans TC思源黑體
Noto Sans TC思源黑體
Noto Sans TC思源黑體
Noto Sans TC思源黑體
InterNoto Sans TC
InterNoto Sans TC
InterNoto Sans TC
InterNoto Sans TC
-apple-systemsystem-ui
-apple-systemsystem-ui
-apple-systemsystem-ui
-apple-systemsystem-ui
Cards (卡片變體)
1. Default
預設背景 (Surface)
2. Muted
次要背景 (Surface Muted)
3. Outline
透明背景 + 邊框
4. Primary
主色背景
5. Secondary
副色背景
6. Interactive
滑鼠移入時會浮起
Badges (狀態標籤)
Primary
Secondary
Muted
Danger
Outline
搭配 Icon 變體 (左側 / 右側)：
Left Icon
Right Icon
Button Sizes
Buttons (操作按鈕)
搭配 Icon 變體 (左側 / 右側)：
