我們精心設計的
網頁＆品牌識別指引
這是一套專注於「簡潔、專業、現代」的設計語言。我們定義了精確的色彩、字階與動態效果，確保每一個數位接觸點都能傳遞出專業與創新的完美平衡。
標誌系統
標誌是品牌的核心識別，展現了我們的專業與創新精神。請遵循安全空間與最小尺寸規範，確保在各種載體上清晰可辨，維持品牌的一致性與辨識度。
主要標誌型
完整組合
左側頭像
兩行排列
右側頭像
兩行排列
最小尺寸
數位媒體：120px 寬度
印刷品：30mm 寬度
安全空間
四周保持字高的 0.5 倍空間
使用場景
標誌型：網站頁首
搭配頭像：名片、社群
色彩系統
我們建立了一套完整的色彩系統，包含品牌主色、輔助色以及中性色調。這確保了在各種介面呈現上的一致性與視覺層次，同時適應深色與淺色模式的需求。
字體系統
字體系統定義了層級分明的標題與內文規範，此設計系統透過字重與大小的變化，引導使用者閱讀動線，同時兼顧閱讀的舒適性與資訊的易讀性。
Display
72px / 4.5rem
Weight: 700
陳愷翊 Kaiyi Chen
Hero 標題
H1
48px / 3rem
Weight: 700
陳愷翊 Kaiyi Chen
頁面主標題
H2
36px / 2.25rem
Weight: 700
陳愷翊 Kaiyi Chen
區塊標題
H3
24px / 1.5rem
Weight: 600
陳愷翊 Kaiyi Chen
子標題
Body Large
18px / 1.125rem
Weight: 400
陳愷翊 Kaiyi Chen
引言、重點內文
Body
16px / 1rem
Weight: 400
陳愷翊 Kaiyi Chen
一般內文
Small
14px / 0.875rem
Weight: 400
陳愷翊 Kaiyi Chen
輔助文字、標籤
字體家族
格線與間距
基於 4px 為單位的格線系統，確保了版面的整齊與節奏感。統一的間距規範能夠創造出呼吸感，讓介面佈局更加和諧，適應不同螢幕尺寸的變化。
4 倍欄位佈局規範
所有的 Margin 與 Padding 皆為 4 的倍數。這創造了視覺上的韻律感與一致性。
桌面版佈局 (Desktop)
12 欄，32px 間距，2.5vw 邊距
8pt 間距系統
xs
4px極小間距
sm
8px小間距
md
16px標準間距
lg
24px大間距
xl
32px區塊間距
2xl
48px段落間距
3xl
64px頁面區塊間距
UI 元件
標準化的元件庫包含了按鈕、卡片與輸入框等互動元素。這確保了操作體驗的一致性，並提升了開發與設計的效率，讓產品迭代更加迅速。
按鈕 / Buttons
主要按鈕
次要按鈕
透明按鈕
卡片 / Cards
標準卡片
使用 rounded-xl (12px) 圓角，border-border 邊框，bg-card 背景色。
className="p-6 bg-card rounded-xl border border-border"強調卡片
使用 rounded-2xl (16px) 圓角，bg-muted/30 背景色，適合重要內容區塊。
className="p-6 bg-muted/30 rounded-2xl border"動態原則
動態設計不僅是裝飾，更是互動的反饋。我們定義了頁面轉場與元件互動的物理準則，創造流暢且自然的數位體驗，增強使用者的沉浸感與愉悅度。
頁面顯示效果
所有頁面必須使用 PageReveal 組件包裹，提供一致的頁面進入動畫效果。
<PageReveal>
{/* 頁面內容 */}
</PageReveal>淡入動畫
區塊內容使用 FadeIn 組件，可設定 delay 實現錯落進場效果。
<FadeIn delay={0.2}>
{/* 內容 */}
</FadeIn>文字分割效果
標題文字使用 SplitText 組件，實現逐字進場的動態效果。
<SplitText>
標題文字
</SplitText>過渡時間
標準過渡：300ms
慢速過渡：500ms
快速過渡：150ms
使用 ease-in-out 緩動函數，避免 linear 或 bounce 效果。
響應式策略
適應不同裝置螢幕的設計策略，確保在手機、平板與桌機上都能提供最佳的使用體驗。透過流動佈局與彈性元件，打造真正無縫的跨裝置體驗。
手機裝置
< 768px
- • 單欄佈局
- • 隱藏 Hover 效果
- • 觸控友善的按鈕尺寸
- • 簡化導航選單
平板裝置
768px - 1023px
- • 雙欄佈局
- • 混合觸控與滑鼠
- • 適度的間距
- • 展開式導航
桌面裝置
≥ 1024px
- • 多欄網格佈局
- • 完整 Hover 效果
- • 最大寬度 1600px
- • 完整導航選單