完整設計規範

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

基於 Figma 原型（學生端 / 教師端 / 管理員端）與功能規格文檔生成。本文件為 AI 編程代理可直接消費的結構化設計系統規範。

1. Visual Theme & Atmosphere

品牌定位: 兒童華語學習 App — 活潑、溫暖、有安全感 視覺基調: Playful & Professional — 在童趣與教育專業之間取得平衡 核心關鍵詞: 清亮 · 圓潤 · 溫暖 · 漸層 · 雲朵 光影質感: 微陰影（soft shadow）+ 柔和漸層背景，避免生硬邊界 參考品牌: Duolingo（遊戲化）+ Apple（排版純粹）+ Stripe（組件精緻）

特徵	描述
主色調	天空藍 → 晴空感的漸層背景
輔色調	珊瑚粉 → 溫暖活潑的行動呼籲
吉祥物	Zuzu（綠色外星生物）貫穿全平台情感設計
形狀語言	大圓角（12-24px），避免銳角
圖標風格	線條圖標（outline）+ 實心圖標（filled）混合

2. Color Palette & Roles

Primary Colors

Token	HEX	CSS Variable	Usage
Primary Blue	`#4A90D9`	`--color-primary`	主按鈕、連結、活躍態導航
Primary Dark	`#2E6DB4`	`--color-primary-dark`	按鈕 hover/active
Primary Light	`#E3F2FD`	`--color-primary-light`	選中背景、標籤
Primary Gradient	`#4A90D9 → #7BB3E8`	`--gradient-primary`	歡迎頁背景、Hero 區

Accent / Interactive

Token	HEX	CSS Variable	Usage
Coral Accent	`#FF6B81`	`--color-accent`	CTA 強調按鈕、徽章、重點提示
Coral Dark	`#E85D72`	`--color-accent-dark`	accent hover
Coral Light	`#FFE4E8`	`--color-accent-light`	accent 背景
Green Mascot	`#5CB85C`	`--color-mascot`	Zuzu 吉祥物、成功狀態、正確答案
Green Light	`#E8F5E9`	`--color-mascot-light`	正確答案背景

Neutral / Gray Scale

Token	HEX	CSS Variable	Usage
Gray 900	`#1A2744`	`--gray-900`	主文字（headings）
Gray 700	`#3A4A62`	`--gray-700`	內文文字
Gray 500	`#6B7D93`	`--gray-500`	輔助文字、placeholder
Gray 300	`#CBD5E1`	`--gray-300`	邊框、分隔線
Gray 100	`#F1F5F9`	`--gray-100`	卡片背景、禁用態
Gray 50	`#F8FAFC`	`--gray-50`	頁面背景

Surface & Borders

Token	HEX	CSS Variable	Usage
Surface White	`#FFFFFF`	`--surface-white`	卡片、模態框
Surface Tinted	`#F0F7FF`	`--surface-tinted`	資訊區塊（藍調）
Border Default	`#E2E8F0`	`--border-default`	輸入框邊框、分割線
Border Focus	`#4A90D9`	`--border-focus`	輸入框聚焦

Semantic Colors

Token	HEX	CSS Variable	Usage
Success	`#22C55E`	`--color-success`	成功提示、正確答案
Warning	`#F59E0B`	`--color-warning`	警告、需注意
Error	`#EF4444`	`--color-error`	錯誤提示、錯誤答案
Info	`#3B82F6`	`--color-info`	資訊提示

Shadow Colors

css

--shadow-color-sm:  rgba(26, 39, 68, 0.06);
--shadow-color-md:  rgba(26, 39, 68, 0.08);
--shadow-color-lg:  rgba(26, 39, 68, 0.12);
--shadow-color-xl:  rgba(26, 39, 68, 0.16);

3. Typography Rules

Font Family

css

--font-display: 'Nunito', 'Noto Sans TC', sans-serif;   /* Headings */
--font-body:    'Inter', 'Noto Sans TC', sans-serif;     /* Body text */
--font-mono:    'JetBrains Mono', 'Consolas', monospace; /* Code/Data */

設計哲學: Nunito 圓潤友善適合兒童學習產品的標題層級； Inter 清晰中性適合大量數據展示與閱讀； Noto Sans TC 為繁體中文後備字體。

Type Scale

Level	Size (px)	Size (rem)	Weight	Line Height	Letter Spacing	Usage
Hero	32	2rem	800	1.2	-0.02em	歡迎頁標題、Dashboard 主標
H1	24	1.5rem	700	1.3	-0.01em	頁面標題
H2	20	1.25rem	700	1.35	0	區塊標題、卡片標題
H3	18	1.125rem	600	1.4	0	子標題、模態框標題
Body L	16	1rem	400	1.5	0	主要內文
Body	14	0.875rem	400	1.5	0	次要內文、表格
Caption	12	0.75rem	500	1.4	0.01em	輔助說明、時間戳
Nano	10	0.625rem	600	1.3	0.02em	標籤、徽章

4. Component Stylings

Buttons

css

/* Primary */
.btn-primary {
  background: var(--color-primary);       /* #4A90D9 */
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--shadow-color-md);
  transition: all 0.2s ease;
}
.btn-primary:hover  { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; }

/* Secondary / Outline */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 10px 24px;
  font-weight: 600;
}
.btn-secondary:hover { background: var(--color-primary-light); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
}
.btn-ghost:hover { background: var(--gray-100); }

/* Accent / CTA */
.btn-accent {
  background: var(--color-accent);        /* #FF6B81 */
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(255, 107, 129, 0.3);
}
.btn-accent:hover { background: var(--color-accent-dark); transform: scale(1.03); }

Cards

css

.card {
  background: var(--surface-white);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 1px 3px var(--shadow-color-sm),
    0 4px 12px var(--shadow-color-md);
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 4px 20px var(--shadow-color-lg); }

.card--highlight {
  border: 2px solid var(--color-primary-light);
  background: var(--surface-tinted);
}

Inputs

css

.input {
  background: var(--surface-white);
  border: 1.5px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--gray-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder { color: var(--gray-500); }
.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}
.input--error { border-color: var(--color-error); }

css

/* Bottom Tab Bar (學生端 App) */
.tab-bar {
  background: var(--surface-white);
  border-top: 1px solid var(--border-default);
  padding: 8px 0 env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-around;
}
.tab-item { color: var(--gray-500); font-size: 10px; }
.tab-item--active { color: var(--color-primary); }

/* Sidebar (教師端 / 管理員端 Web) */
.sidebar {
  background: var(--gray-900);            /* #1A2744 */
  color: #FFFFFF;
  width: 240px;
  padding: 24px 16px;
}
.sidebar-item {
  color: var(--gray-300);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}
.sidebar-item:hover   { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.sidebar-item--active { background: var(--color-primary); color: #FFFFFF; }

Badges / Tags

css

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.badge--primary  { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge--success  { background: var(--color-mascot-light);  color: #2E7D32; }
.badge--warning  { background: #FEF3C7; color: #B45309; }
.badge--error    { background: #FEE2E2; color: #B91C1C; }
.badge--accent   { background: var(--color-accent-light);  color: var(--color-accent-dark); }

Modals / Dialogs

css

.modal-overlay {
  background: rgba(26, 39, 68, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
}
.modal-content {
  background: var(--surface-white);
  border-radius: 20px;
  padding: 28px;
  max-width: 400px;
  box-shadow: 0 16px 48px var(--shadow-color-xl);
  animation: modal-enter 0.25s ease-out;
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

5. Layout Principles

Spacing System（基數 4px）

Token	Value	Usage
`--space-xs`	4px	圖標與文字間距
`--space-sm`	8px	列表項間距
`--space-md`	16px	卡片內 padding、組件間距
`--space-lg`	24px	區塊間距
`--space-xl`	32px	頁面 section 間距
`--space-2xl`	48px	Hero 區上下 padding
`--space-3xl`	64px	頁面級分隔

Grid System

屬性	值
學生端 App	單欄流體，左右 padding 16px
教師/管理員 Web	12 欄柵格，gutter 24px，max-width 1280px
主要內容區	max-width: 960px，水平置中

Container

css

.container--app    { padding: 0 16px; }                  /* 學生端 */
.container--web    { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 640px; margin: 0 auto; }  /* 表單頁 */

留白哲學

「呼吸感」優先 — 每個可交互元素之間至少保持 8px 安全距離。兒童用戶需要更大的觸控目標與更清晰的視覺分隔。資訊密集頁面（Dashboard、數據表格）允許較緊湊的間距（12px 區塊間距）。

6. Depth & Elevation

Shadow System

css

/* 從最低到最高 */
--shadow-none:  none;

--shadow-xs:    0 1px 2px  rgba(26, 39, 68, 0.04);
/* Usage: 內聯分隔、細微層次 */

--shadow-sm:    0 1px 3px  rgba(26, 39, 68, 0.06),
                0 1px 2px  rgba(26, 39, 68, 0.04);
/* Usage: 卡片、列表項 */

--shadow-md:    0 4px 6px  rgba(26, 39, 68, 0.06),
                0 2px 4px  rgba(26, 39, 68, 0.04);
/* Usage: 按鈕、浮動卡片 */

--shadow-lg:    0 10px 15px rgba(26, 39, 68, 0.08),
                0 4px 6px  rgba(26, 39, 68, 0.04);
/* Usage: 下拉選單、彈出層 */

--shadow-xl:    0 20px 25px rgba(26, 39, 68, 0.10),
                0 8px 10px rgba(26, 39, 68, 0.06);
/* Usage: 模態框 */

--shadow-2xl:   0 25px 50px rgba(26, 39, 68, 0.16);
/* Usage: Toast 通知、最高層級浮層 */

Z-index Scale

Layer	z-index	Usage
Base	0	頁面內容
Dropdown	100	下拉選單、Popover
Sticky	200	固定導航欄
Overlay	300	模態框背景
Modal	400	模態框內容
Toast	500	通知提示
Tooltip	600	工具提示

Surface Layers

overlay (模態框)         ← z-400, shadow-xl
  ↑
elevated (浮動卡片)      ← z-100, shadow-lg
  ↑
surface (卡片/區塊)      ← z-0,   shadow-sm/md
  ↑
background (頁面底色)    ← z-0,   shadow-none

7. Do's and Don'ts

Do's ✅

使用圓角 — 所有互動元素（按鈕、輸入框、卡片）使用 ≥ 8px 圓角
保持顏色對比 — 文字與背景對比度 ≥ 4.5:1（WCAG AA）
觸控目標 ≥ 44px — 手機端所有可點擊元素最小 44x44px
使用微互動 — hover/active 狀態有視覺反饋（顏色變化、輕微位移）
優先使用主色藍 — 主要行動按鈕統一使用 --color-primary
卡片分組 — 資訊密集區域使用卡片分割視覺層次
吉祥物引導 — 空狀態、加載中、錯誤頁面使用 Zuzu 增加情感連結
留白呼吸 — 區塊之間保持足夠間距，避免擁擠

Don'ts ❌

禁止純黑文字 — 使用 --gray-900 (#1A2744) 替代 #000000
禁止過多色彩 — 單頁面主色不超過 3 種（藍 + 珊瑚 + 綠）
禁止小於 12px 字體 — 兒童用戶文字必須清晰可讀
禁止無邊界文字按鈕 — 所有按鈕需有明確可點擊區域
禁止過度動畫 — transition 控制在 0.2-0.3s，避免分散注意力
禁止銳角 — 不使用 border-radius: 0 的元素
禁止紅色用於非錯誤場景 — Error 色僅用於錯誤/危險操作
禁止忽略安全區域 — 學生端 App 必須適配 iPhone notch/home indicator

8. Responsive Behavior

Breakpoints

Name	Min Width	Target Device
Mobile	320px	iPhone SE / 13 mini
Tablet	768px	iPad
Desktop	1024px	教師/管理員 Web
Wide	1440px	大螢幕 Dashboard

Touch Targets

最小觸控尺寸: 44×44px（iOS HIG 標準）
按鈕最小高度: 44px（手機端）/ 36px（桌面端）
列表項最小高度: 56px（確保單指操作）

折疊策略

Breakpoint	學生端 App	教師/管理員 Web
Mobile (<768px)	單欄全屏	側邊欄收合為漢堡選單
Tablet (768-1023px)	—	側邊欄顯示（200px）
Desktop (≥1024px)	—	側邊欄完整顯示（240px）

Font Scaling

學生端 App：字體大小固定（不隨螢幕縮放），確保兒童閱讀體驗一致
教師/管理員 Web：使用 rem 單位，支援瀏覽器預設字體縮放

9. Agent Prompt Guide

Quick Reference

yaml

Nihao Academy Design System:
  Primary:     #4A90D9 (Blue)    → --color-primary
  Accent:      #FF6B81 (Coral)   → --color-accent
  Success:     #22C55E (Green)   → --color-success
  Error:       #EF4444 (Red)     → --color-error
  Text:        #1A2744 (Navy)    → --gray-900
  Background:  #F8FAFC (Light)   → --gray-50
  Font:        Nunito (headings) / Inter (body)
  Radius:      12px (buttons), 16px (cards), 20px (modals)
  Spacing:     4px base → 4/8/16/24/32/48/64
  App Target:  iPhone 13 mini (375×812) — mobile-first

Component Prompts

Prompt 1 — 登入頁面

Generate a login page for Nihao Academy student app following DESIGN.md:
- Sky blue gradient background (#4A90D9 → #7BB3E8)
- Nihao logo with pink/blue gradient
- Zuzu mascot illustration
- "Get Start!" accent button (coral #FF6B81, rounded 16px)
- White input fields with 1.5px border, 10px radius
- "Already Have Account" ghost text link below
- Nunito font for headings, Inter for body
- Mobile viewport: 375×812px

Prompt 2 — Dashboard 卡片

Generate a dashboard info card component:
- White surface, 16px border-radius
- Shadow: 0 1px 3px rgba(26,39,68,0.06), 0 4px 12px rgba(26,39,68,0.08)
- Top-left: icon (24px, outline style, primary blue)
- Top-right: trend badge (up/down arrow + percentage)
- Center: large number (32px, 800 weight, gray-900)
- Bottom: label text (14px, gray-500)
- Hover: shadow deepens, slight scale(1.02)
- Width: flexible (min 200px)

Prompt 3 — 底部導航欄

Generate a bottom tab bar for the student app:
- 4 tabs: Home, Speak, Trophy, Me
- White background, top border 1px #E2E8F0
- Active tab: primary blue (#4A90D9) icon + label
- Inactive tab: gray-500 icon + label
- Icon: 24px outline style
- Label: 10px, 600 weight, below icon
- Height: 56px + safe-area-inset-bottom
- iOS-style: no text under icons when inactive (icon-only)

Prompt 4 — 側邊欄導航

Generate a sidebar navigation for teacher/admin web:
- Background: #1A2744 (dark navy)
- Width: 240px
- Logo area at top (32px height, pink/blue gradient logo)
- Menu items with icon + label, 14px, rounded 10px
- Active item: primary blue background, white text
- Inactive items: gray-300 text, hover: lighten
- Bottom section: user avatar + name + role badge
- Divider lines between menu sections

Prompt 5 — 模態框

Generate a modal dialog:
- Dark overlay: rgba(26,39,68,0.5) + backdrop-filter blur(4px)
- White content box: 20px border-radius, 28px padding, max-width 400px
- Title: 18px, 600 weight, gray-900
- Body text: 14px, gray-700
- Two buttons at bottom: ghost (cancel) + primary (confirm)
- Enter animation: scale(0.95→1) + fade in, 0.25s ease-out
- Close button (×) top-right corner, ghost style

Iteration Guide

先建立色票變數 — 所有顏色使用 CSS 變數，避免硬編碼 HEX
從最小螢幕開始 — Mobile-first，逐步擴展到桌面
組件先於頁面 — 確保 Button/Card/Input 等基礎組件正確再組合頁面
用陰影而非邊框 — 優先使用 shadow 區分層級，減少視覺噪音
對比度檢查 — 每個頁面完成後驗證文字對比度 ≥ 4.5:1
觸控區域驗證 — 手機端確認所有點擊目標 ≥ 44×44px
動畫克制 — 過渡動畫 0.2-0.3s，不加載過多動效
狀態完整性 — 每個組件需覆蓋：default / hover / active / disabled / loading / error
吉祥物一致性 — Zuzu 表情需與頁面情緒（成功/鼓勵/等待/錯誤）匹配
測試實際裝置 — 在 iPhone 13 mini 實機上驗證觸控與可讀性

完整設計規範 ​

1. Visual Theme & Atmosphere ​

2. Color Palette & Roles ​

Primary Colors ​

Accent / Interactive ​

Neutral / Gray Scale ​

Surface & Borders ​

Semantic Colors ​

Shadow Colors ​

3. Typography Rules ​

Font Family ​

Type Scale ​

4. Component Stylings ​

Buttons ​

Cards ​

Inputs ​

Navigation ​

Badges / Tags ​

Modals / Dialogs ​

5. Layout Principles ​

Spacing System（基數 4px） ​

Grid System ​

Container ​

留白哲學 ​

6. Depth & Elevation ​

Shadow System ​

Z-index Scale ​

Surface Layers ​

7. Do's and Don'ts ​

Do's ✅ ​

Don'ts ❌ ​

8. Responsive Behavior ​

Breakpoints ​

Touch Targets ​

折疊策略 ​

Font Scaling ​

9. Agent Prompt Guide ​

Quick Reference ​

Component Prompts ​

Iteration Guide ​