視覺設計在體驗中的應用：深度研究報告
================================================================================
目 錄
一、前言
二、視覺層次（Visual Hierarchy）原則
三、排版設計（Typography）最佳實踐
四、色彩理論與配色方案
五、空間運用與留白
六、視覺重量與對齊
七、設計系統中的視覺規範
八、結論
================================================================================
一、前 言
視覺設計是數位體驗的核心組成部分，它不僅關乎美觀，更直接影響用戶如何理解、
互動與記憶產品。優秀的視覺設計透過精心組織的資訊架構、一致的色彩語言、和諧
的排版系統，以及對空間的敏銳掌控，引導用戶無縫地完成目標任務。
本報告深入探討六大核心領域：視覺層次、排版設計、色彩理論、空間運用、視覺
重量與對齊、以及設計系統中的視覺規範。每個章節均包含理論基礎、實務方法、
具體範例與可操作的指導原則。
================================================================================
二、視覺層次（Visual Hierarchy）原則
2.1 什麼是視覺層次？
視覺層次是指透過有意識地排列和設計視覺元素，引導用戶的注意力優先順序。
它決定了用戶在面對一頁內容時，會先看什麼、再看什麼、最後看什麼。有效的
視覺層次能將複雜的資訊轉化為清晰、易懂的結構。
2.2 視覺層次的建構方法
以下為五種核心的視覺層次建構方法：
--- 方法一：大小與比例（Size & Scale）---
原理：人眼自然會被較大的元素吸引。這是視覺層次中最直接、最有效的手段。
實務應用：
- 標題字體應明顯大於內文，建議比例至少為 1.5:1
- 主要行動呼籲按鈕（Primary CTA）應比次要按鈕（Secondary CTA）更大
- 圖片或插圖的尺寸應與其重要性成正比
比例階梯範例（以 rem 為單位）：
h1: 2.5rem (40px) — 頁面主標題
h2: 2.0rem (32px) — 章節標題
h3: 1.5rem (24px) — 子章節
body: 1.0rem (16px) — 正文
caption: 0.875rem (14px) — 輔助文字
--- 方法二：色彩與對比度（Color & Contrast）---
原理：高對比度的元素在視覺上「跳脫」背景，吸引注意力。
實務應用：
- 使用亮色或飽和色標記最重要的資訊（如價格、促銷標籤）
- 背景與前景之間需維持至少 4.5:1 的對比度（WCAG AA 標準）
- 利用色彩建立資訊分級：主色用於關鍵元素，中性色用於次要內容
- 避免在重要資訊上使用相近色，以免被忽略
--- 方法三：間距與留白（Spacing & Whitespace）---
原理：元素周圍的空白越多，該元素在視覺上越突出。
實務應用：
- 重要元素周圍增加邊距，使其從周圍內容中「浮現」
- 使用間距建立內容區塊之間的視覺分隔，而非依賴分割線
- 遵循「雙倍間距法則」：區塊間距應至少是區塊內部行高的兩倍
- 內文段落間距建議為行高的 1.5 至 2 倍
--- 方法四：位置與佈局（Position & Layout）---
原理：用戶閱讀習慣決定了不同位置的視覺權重。
實務應用：
- F 型閱讀模式：用戶通常先橫向掃描頂部，然後向下移動並縮短橫向範圍
- Z 型閱讀模式：適用於沒有大量文本的頁面（如登陸頁），視線沿著 Z 字路徑移動
- 左上角是視覺起點，右上角是常見的操作區域（如導航、搜尋）
- 螢幕中心區域具有最高的視覺權重
- 上方元素比下方元素更容易被注意到
--- 方法五：重複與一致性（Repetition & Consistency）---
原理：重複的視覺模式建立認知慣性，讓用戶快速理解資訊結構。
實務應用：
- 所有同級別的標題使用相同的樣式
- 所有行動呼籲按鈕使用一致的顏色和形狀
- 圖標風格保持一致（線性 vs. 填充）
- 卡片式設計中，所有卡片保持相同的內部間距和邊框樣式
2.3 視覺層次的實戰檢查清單
[ ] 用戶能否在 3 秒內識別頁面的主要訊息？
[ ] 最重要的行動呼籲是否是最醒目的元素？
[ ] 次要資訊是否不會干擾主要內容的閱讀？
[ ] 視覺焦點是否與業務目標一致？
[ ] 在不同螢幕尺寸下，層次關係是否仍然清晰？
================================================================================
三、排版設計（Typography）最佳實踐
3.1 排版的四大支柱
排版設計不僅是選擇好看的字型，更是關於資訊的可讀性、可掃描性和整體
視覺和諧。以下是排版的四個核心維度：
--- 支柱一：字型選擇（Font Selection）---
原則：
- 正文字型應具備優異的可讀性，優先選擇經過時間檢驗的無襯線體（Sans-serif）
或高品質的襯線體（Serif） - 標題字型可以選擇更具個性的字型，但不可犧牲辨識度
- 網頁安全字型推薦：Inter、Roboto、Source Sans Pro、Open Sans
- 高品質付費字型推薦：SF Pro、Helvetica Neue、Georgia
字型類別適用場景：
無襯線體（Sans-serif）：現代數位產品、科技品牌、簡潔介面
襯線體（Serif）：出版媒體、高端品牌、長篇閱讀
手寫體（Script）：僅用於裝飾性標題，不適用於正文
等寬字型（Monospace）：程式碼顯示、技術文件
--- 支柱二：字型配對原則（Font Pairing Principles）---
原則一：對比中求和諧
- 選擇兩種在風格上相互補充但不衝突的字型
- 最佳配對策略：一種個性強的字型（用於標題）+ 一種中性易讀的字型（用於正文）
常見有效配對範例：
組合 A（現代感）：
標題：Montserrat（粗體）
正文：Open Sans（常規）
組合 B（經典感）：
標題：Playfair Display（粗體）
正文：Source Sans Pro（常規）
組合 C（科技感）：
標題：Inter（半粗體）
正文：Inter（常規）— 同一字族的字重變化
組合 D（優雅感）：
標題：Cormorant Garamond（粗體）
正文：Lato（常規）
原則二：限制字型數量
- 單一頁面最多使用 2-3 種字型
- 優先透過同一字族的不同字重（Light、Regular、Medium、Bold）來建立變化
- 避免超過三種字型家族，否則視覺會顯得混亂
原則三：建立字型比例系統
- 使用數學比例（如黃金比例 1.618、完美四度 1.333、大六度 1.618）來定義
不同層級字型的字體大小關係 - 這確保了所有字型尺寸之間存在和諧的比例關係
--- 支柱三：行距與字距（Line Height & Letter Spacing）---
行距（Line Height）最佳實踐：
- 正文字號 16px：行距建議 24px（1.5 倍）
- 正文字號 14px：行距建議 20px（約 1.43 倍）
- 標題行距建議 1.2 至 1.3 倍，因為大字體本身需要更多垂直空間
- 多行文本的行距不宜過緊，會降低可讀性；也不宜過鬆，會破壞行與行之
間的視覺連結
字距（Letter Spacing）最佳實踐：
- 大標題（48px 以上）：可略微增加字距（0.02em - 0.05em）以提升優雅感
- 全大寫文字：必須增加字距（0.1em 左右），否則難以辨識
- 小字體（12px 以下）：略微減少字距（-0.02em）以提高緊湊度
- 一般正文：保持默認字距，不建議調整
字重（Font Weight）使用指南：
100-300（Thin-Light）：裝飾性用途，不適合正文
400（Regular）：正文標準字重
500（Medium）：強調文本、標籤
600-700（Semi-Bold/Bold）：標題、關鍵數據
800-900（Extra-Bold/Black）：僅用於極大標題
--- 支柱四：文本對齊與長度（Alignment & Line Length）---
對齊方式選擇：
- 左對齊（Left Align）：最適合拉丁語系和中文的正文閱讀，因為每行起始
位置一致，眼睛容易定位 - 两端對齊（Justify）：可用於雜誌風格排版，但需要仔細調整字距以避免
詞間距不均 - 置中对齊（Center Align）：僅適用於短標題或少量文本，不適合正文
- 右對齊（Right Align）：僅用於特殊情境（如數字表格、日期）
最佳行長：
- 英文：每行 45-75 個字符（含空格）
- 中文：每行 25-40 個字元
- 過長的行會導致換行時眼睛難以定位下一行的起點
- 過短的行會造成頻繁換行，破壞閱讀節奏
3.2 響應式排版策略
響應式排版不是簡單地縮放字體大小，而是根據螢幕尺寸和使用情境調整整個
排版系統。
策略一：流動排版（Fluid Typography）
使用 CSS 的 clamp() 函數實現線性縮放：
font-size: clamp(1rem, 0.875rem + 0.625vw, 1.25rem);
這表示：
- 最小字體：1rem（16px）
- 最大字體：1.25rem（20px）
- 中間值根據視口寬度線性計算
策略二：斷點字型調整
在不同斷點處調整字型比例：
/* 手機 (< 768px) */
h1: 1.75rem, h2: 1.5rem, h3: 1.25rem, body: 1rem
/* 平板 (768px - 1024px) */
h1: 2.25rem, h2: 1.75rem, h3: 1.5rem, body: 1.0625rem
/* 桌面 (> 1024px) */
h1: 3rem, h2: 2.25rem, h3: 1.75rem, body: 1.125rem
策略三：行長控制
隨著螢幕變寬，需要增加容器的最大寬度以保持最佳行長：
.prose {
max-width: 65ch; /* 65 個字符寬度 */
}
策略四：字重與行距的動態調整
在大螢幕上，可以稍微減輕字重（因為大字更易讀），同時減少行距：
@media (min-width: 1024px) {
body {
font-weight: 400;
line-height: 1.5;
}
h1 {
line-height: 1.2;
}
}
策略五：可訪問性優先
- 始終允許用戶在瀏覽器中放大字體（不使用固定像素限制）
- 尊重用戶的系統字型偏好（prefers-reduced-motion、forced-colors）
- 確保文字縮放至 200% 後仍可正常閱讀
- 考慮色盲用戶，不單獨依靠色彩傳達資訊
================================================================================
四、色彩理論與配色方案
4.1 色彩的三屬性
理解色彩的第一步是掌握其三個基本屬性：
色相（Hue）：色彩的種類，如紅、黃、藍等。色相環上任意角度代表不同色相。
飽和度（Saturation）：色彩的純度和強度。高飽和度顯得鮮豔活潑，低飽和度
顯得柔和沉穩。
明度（Value/Lightness）：色彩的明亮程度。高明度接近白色，低明度接近黑色。
4.2 色彩心理學應用
不同色彩會引發不同的心理反應和情感聯想：
--- 紅色（Red）---
心理影響：緊急、熱情、能量、危險、食欲
適用場景：促銷標籤、錯誤提示、行動呼籲按鈕、食品相關產品
注意事項：過度使用會引起焦慮感，建議作為強調色而非主色
--- 藍色（Blue）---
心理影響：信任、專業、穩定、冷靜、科技感
適用場景：金融服務、科技產品、醫療健康、社交媒體
注意事項：最廣泛偏好的顏色，但也最容易顯得平淡，需搭配對比色增加活力
--- 綠色（Green）---
心理影響：自然、成長、健康、成功、環保
適用場景：生態相關產品、成功狀態指示、財務增長、有機食品
注意事項：在西方文化中代表「通行」和「成功」，在亞洲文化中也有財富寓意
--- 黃色（Yellow）---
心理影響：樂觀、溫暖、注意、警示、創造力
適用場景：警告標籤、創意品牌、兒童產品、高光標記
注意事項：低飽和度黃色在淺色背景上可讀性差，慎用
--- 紫色（Purple）---
心理影響：奢華、創意、神秘、靈性、女性化
適用場景：美容產品、創意工具、高端品牌、冥想應用
注意事項：深紫色傳達高級感，淺紫色（薰衣草色）較為溫和
--- 橙色（Orange）---
心理影響：活力、友好、親切、冒險、年輕
適用場景：行動呼籲按鈕、運動品牌、餐飲業、社交應用
注意事項：比紅色溫和但同樣引人注目，是很好的 CTA 選擇
--- 黑色（Black）---
心理影響：權威、優雅、力量、現代感、正式
適用場景：高端品牌、時尚、科技產品、文字主體
注意事項：在數位介面中，純黑 (#000000) 過於強烈，建議使用深灰 (#1A1A1A)
--- 白色（White）---
心理影響：乾淨、簡約、開放、清晰、現代
適用場景：背景、留白、最小化設計
注意事項：白色本身不是顏色，而是光的呈現；在深色主題中對應「黑色」
4.3 配色方案類型
方案一：單色系配色（Monochromatic）
- 基於單一色相，透過改變飽和度和明度產生變化
- 優點：極度和諧、不易出錯、專業感強
- 缺點：可能顯得單調，需要善用對比度區分元素
- 適用：數據儀表板、專業工具、企業網站
方案二：類似色配色（Analogous）
- 使用色相環上相鄰的 2-4 種顏色
- 優點：自然和諧、視覺舒適
- 缺點：對比度有限，可能需要額外的強調色
- 適用：生活方式品牌、旅遊平台、藝術相關產品
方案三：互補色配色（Complementary）
- 使用色相環上相對的兩種顏色
- 優點：強烈對比、視覺衝擊力大
- 缺點：搭配不當會顯得刺眼，建議一方作為主色、另一方作為點綴
- 適用：行動呼籲按鈕、促銷活動、創意品牌
方案四：分裂互補色配色（Split-Complementary）
- 使用一種主色 + 其互補色兩側的顏色
- 優點：保留對比度的同時更加柔和
- 適用：大多數數位產品，是比較安全的選擇
方案五：三元色配色（Triadic）
- 使用色相環上等距的三種顏色
- 優點：豐富多彩、充滿活力
- 缺點：需要精確控制各種顏色的飽和度和比例
- 適用：兒童產品、遊戲、創意工具
4.4 數位產品的色彩系統架構
一個完整的數位色彩系統應包含以下層級：
主色（Primary Color）
- 品牌的核心色彩，用於主要互動元素
- 通常有淺、中、深三個變體
- 示例：#2563EB（主色）、#DBEAFE（淺色）、#1D4ED8（深色）
次要色（Secondary Color）
- 與主色搭配，用於次要元素和視覺變化
- 示例：#7C3AED（紫色系）
強調色（Accent Color）
- 用於行動呼籲、通知、特殊狀態
- 通常具有高對比度和吸引力
- 示例：#F59E0B（琥珀色）、#10B981（翠綠色）
中性色（Neutral Colors）
- 用於背景、文字、邊框等非功能性元素
- 通常包含一套灰階色板
- 示例：#FFFFFF、#F9FAFB、#F3F4F6、#E5E7EB、#9CA3AF、#6B7280、#374151、#1F2937、#111827、#000000
語義色（Semantic Colors）
- 用於傳達特定狀態和意義
- 成功：#10B981（綠色）
- 警告：#F59E0B（琥珀色）
- 錯誤：#EF4444（紅色）
- 資訊：#3B82F6（藍色）
4.5 色彩可訪問性（Accessibility）
確保色彩組合滿足可訪問性標準至關重要：
WCAG 2.1 對比度要求：
- 常規文字（小於 18px）：至少 4.5:1 的對比度（AA 級）
- 大文字（大於等於 18px 或 14px 加粗）：至少 3:1 的對比度（AA 級）
- AAA 級別要求更高：常規文字 7:1，大文字 4.5:1
測試工具推薦：
- WebAIM Contrast Checker
- Stark（Figma/Sketch 外掛）
- axe DevTools（瀏覽器擴充功能）
色彩可訪問性最佳實踐：
- 不單獨依靠色彩傳達資訊（如錯誤狀態應同時有圖標和文字說明）
- 確保文字與背景的對比度符合標準
- 測試色盲模擬效果（紅色盲、綠色盲、藍色盲）
- 支援深色模式時，重新校準所有色彩組合
================================================================================
五、空間運用與留白
5.1 留白的價值
留白（Whitespace / Negative Space）不是「空白的浪費」，而是設計中有價值的
積極元素。它的作用包括：
- 提升可讀性：適當的行距、字距和段落間距讓文字更容易閱讀
- 建立層次：重要的元素周圍有更多留白，視覺上更突出
- 增強美感：留白創造了呼吸感和高級感
- 引導注意力：留白將用戶的視線引向關鍵內容
- 分隔內容：用間距代替分割線，視覺上更乾淨
5.2 間距系統（Spacing System）
建立一致的間距系統是設計系統的基石。
標準間距比例（以 4px 為基礎單位）：
4px (0.25rem) — 微間距：圖標與文字之間、緊密關聯的元素
8px (0.5rem) — 小間距：表單字段內邊距、按鈕內部空間
12px (0.75rem) — 中小間距：卡片內部元素間距
16px (1rem) — 標準間距：段落之間、列表項目之間
24px (1.5rem) — 中等間距：區塊之間、組件之間
32px (2rem) — 大間距：頁面區塊之間
48px (3rem) — 超大間距：主要版面區塊之間
64px (4rem) — 極大間距：頁面段落之間
96px (6rem) — 特大間距：Hero 區域、重大分隔
間距應用規則：
- 內部間距（Padding）應小於外部間距（Margin）
- 相鄰元素的間距不應超過它們各自容器間距的總和
- 遵循「遞增法則」：從一個元素到下一個元素的距離應該逐漸增加
5.3 網格系統（Grid Systems）
網格系統是組織空間的框架，確保版面的一致性和秩序感。
常用網格配置：
桌面端（12 欄網格）：
- 視口寬度：1440px
- 欄寬：60px
- 間距（Gutter）：20px
- 邊距（Margin）：80px（左右各）
- 可用內容區域：1280px
平板端（8 欄網格）：
- 視口寬度：768px
- 欄寬：48px
- 間距：16px
- 邊距：24px
手機端（4 欄網格）：
- 視口寬度：375px
- 欄寬：64px
- 間距：16px
- 邊距：16px
網格系統設計原則：
- 內容應盡量對齊網格線，建立視覺秩序
- 跨欄組合應靈活：單欄、雙欄、三欄、全寬等
- 避免內容恰好居中在欄與欄之間，這會造成視覺不確定感
- 網格應在響應式中動態調整欄數，而非固定不變
5.4 視覺密度（Visual Density）
不同頁面區域需要不同的視覺密度：
高密度區域：
- 數據儀表板：需要展示大量資訊，間距可較小
- 管理後台：操作頻繁，節省空間提高效率
- 表格和列表：行間距適中，確保可掃描性
中密度區域：
- 部落格文章：正文行距充足，段落間距明確
- 產品目錄：卡片間距均衡，留白適中
低密度區域：
- 登陸頁 Hero 區域：大量留白，聚焦單一訊息
- 品牌首頁：營造高級感和沉浸感
- 表單填寫：減少干擾，提升專注度
5.5 間距的響應式調整
間距不應在所有螢幕尺寸上保持固定：
桌面端：
section padding: 96px 0
card gap: 32px
container margin: 80px
平板端：
section padding: 64px 0
card gap: 24px
container margin: 48px
手機端：
section padding: 48px 0
card gap: 16px
container margin: 16px
CSS 實作範例：
:root {
--space-xs: 0.25rem; /* 4px /
--space-sm: 0.5rem; / 8px /
--space-md: 1rem; / 16px /
--space-lg: 1.5rem; / 24px /
--space-xl: 2rem; / 32px /
--space-2xl: 3rem; / 48px /
--space-3xl: 4rem; / 64px */
}
@media (max-width: 768px) {
:root {
--space-xl: 1.5rem;
--space-2xl: 2rem;
--space-3xl: 3rem;
}
}
================================================================================
六、視覺重量與對齊
6.1 視覺重量（Visual Weight）的概念
視覺重量是指一個元素在畫面中「看起來有多重」，即它吸引注意力的能力。
視覺重量重的元素會先被看到，輕的元素則退居次位。
影響視覺重量的因素：
- 大小：越大越重
- 色彩：越飽和、越暗越重
- 對比度：與周圍對比越強越重
- 複雜度：越複雜越重（細節多的圖案比簡單的形狀更有重量）
- 密度：元素越密集越重
- 位置：靠近中心的元素比邊緣的更重
- 熟悉度：我們認識的元素更容易被注意到
- 色彩心理：暖色比冷色看起來更重
6.2 視覺平衡（Visual Balance）
平衡是視覺設計的基礎原則之一，分為兩種類型：
對稱平衡（Symmetrical Balance）：
- 畫面兩側的元素在視覺重量上相等
- 創造穩定、正式、權威的感覺
- 適用於企業網站、政府機構、法律服務
- 風險：可能顯得乏味或缺乏動感
非對稱平衡（Asymmetrical Balance）：
- 不同大小的元素透過視覺權重的調整達到平衡
- 例如：左側一個大圖像的重量 = 右側多個小元素的總和
- 創造動態、有趣、現代的感覺
- 適用於創意作品集、生活方式品牌、創新產品
- 挑戰：需要更高的設計敏感度
平衡的實務技巧：
- 使用網格系統作為平衡的參考框架
- 大元素配小間距，小元素配大間距
- 色彩豐富的區域需要更多留白來平衡
- 文字密集的區域可以用圖像或色塊來平衡
6.3 對齊原則（Alignment）
對齊是建立視覺秩序和專業感的關鍵。
四種基本對齊方式：
左對齊（Left Alignment）：
- 最常見、最易讀的對齊方式
- 所有元素的左邊緣對齊在同一垂直線上
- 建立清晰的閱讀起點
- 適用於大多數文字內容和列表
右對齊（Right Alignment）：
- 適合數字、日期、價格等需要對齊的元素
- 用於創造視覺張力和不平衡的美感
- 文字內容不建議右對齊（除非是阿拉伯文等從右向左書寫的語言）
中心對齊（Center Alignment）：
- 創造正式、平衡的感覺
- 適合短標題、引言、封面頁
- 不適合作為正文的主要對齊方式
- 長文本中心對齊會嚴重降低可讀性
混合對齊（Mixed Alignment）：
- 不同區塊使用不同的對齊方式
- 例如：標題左對齊，引用文字中心對齊
- 需要謹慎使用，確保整體仍然有統一的視覺秩序
對齊的最佳實踐：
- 每個元素都應該與頁面上的某個其他元素對齊
- 避免隨意放置元素，即使看起來「差不多」
- 使用網格線作為對齊的參考基準
- 對齊可以隱含（通過網格）或明確（通過邊框、分割線）
- 當無法完美對齊時，寧可不對齊也不要勉強
6.4 視覺流（Visual Flow）
視覺流是指用戶視線在頁面上移動的路徑。設計師可以透過以下方式引導視覺流：
引導技巧：
- 指向性元素：箭頭、手指、目光方向
- 線條和邊界：水平線引導橫向移動，垂直線引導縱向移動
- 色彩漸變：從深色到淺色的過渡引導視線
- 大小漸變：由大到小的元素排列引導閱讀順序
- 留白引導：在兩個元素之間留白，暗示它們屬於不同群組
- 圖標和圖形：視覺上突出的圖形元素吸引注意力
視覺流的設計策略：
- 明確設計用戶的視線路徑
- 在關鍵節點放置視覺錨點（如標題、CTA 按鈕）
- 確保視覺流與內容的邏輯順序一致
- 避免多重競爭的視覺焦點
================================================================================
七、設計系統視覺規範範例
7.1 設計系統概述
設計系統（Design System）是一套共享的語言、工具和規範，確保產品體驗的
一致性和可擴展性。視覺規範是設計系統的核心組成部分，涵蓋色彩、排版、
間距、圖標、影陰、圓角等所有視覺資產。
7.2 完整視覺規範範例
以下是一個完整的設計系統視覺規範範例：
--- 7.2.1 色彩規範 ---
【品牌主色】
Primary-50: #EFF6FF
Primary-100: #DBEAFE
Primary-200: #BFDBFE
Primary-300: #93C5FD
Primary-400: #60A5FA
Primary-500: #3B82F6 <-- 標準主色
Primary-600: #2563EB
Primary-700: #1D4ED8
Primary-800: #1E40AF
Primary-900: #1E3A8A
【品牌次要色】
Secondary-500: #8B5CF6
Secondary-600: #7C3AED
【強調色】
Accent-500: #F59E0B （琥珀色，用於 CTA）
Accent-600: #D97706
【語義色】
Success-500: #10B981
Warning-500: #F59E0B
Error-500: #EF4444
Info-500: #3B82F6
【中性色】
Gray-50: #F9FAFB
Gray-100: #F3F4F6
Gray-200: #E5E7EB
Gray-300: #D1D5DB
Gray-400: #9CA3AF
Gray-500: #6B7280
Gray-600: #4B5563
Gray-700: #374151
Gray-800: #1F2937
Gray-900: #111827
【使用規則】
- 文字顏色：Primary-700 用於標題，Gray-700 用於正文，Gray-500 用於輔助文字
- 背景顏色：Gray-50 用於頁面背景，White 用於卡片和模態框
- 邊框顏色：Gray-200 用於常規邊框，Gray-300 用於禁用狀態
- 互動狀態：Primary-600 用於懸停，Primary-700 用於按下
--- 7.2.2 排版規範 ---
【字族設定】
標題字族：'Inter', sans-serif
正文字族：'Inter', sans-serif
代碼字族：'JetBrains Mono', monospace
【字型比例尺】（基於 1.25 比例）
XS: 0.75rem (12px) — 微小標籤、腳註
SM: 0.875rem (14px) — 輔助文字、表單標籤
Base: 1rem (16px) — 正文標準
LG: 1.125rem (18px) — 正文加大、摘要
XL: 1.25rem (20px) — 小標題、引用文字
2XL: 1.5rem (24px) — 副標題
3XL: 1.875rem (30px) — 大標題
4XL: 2.25rem (36px) — 頁面主標題
5XL: 3rem (48px) — Hero 區域標題
【字重設定】
Light: 300 — 僅用於裝飾性標題
Regular: 400 — 正文標準
Medium: 500 — 強調文本、導航項目
SemiBold: 600 — 副標題、卡片標題
Bold: 700 — 主標題、關鍵數據
ExtraBold: 800 — 僅用於極大標題
【行高設定】
Tight: 1.25 — 大標題（3XL 及以上）
Normal: 1.5 — 正文
Relaxed: 1.75 — 長篇文章、博客
Loose: 2.0 — 引用文字、引言
【樣式類別定義】
.heading-1: font-size: 4XL; font-weight: Bold; line-height: Tight
.heading-2: font-size: 3XL; font-weight: SemiBold; line-height: Tight
.heading-3: font-size: 2XL; font-weight: SemiBold; line-height: Normal
.heading-4: font-size: XL; font-weight: Medium; line-height: Normal
.body-large: font-size: LG; font-weight: Regular; line-height: Normal
.body: font-size: Base; font-weight: Regular; line-height: Normal
SOCIAL SHARE CARD GENERATOR