跳至主要内容

APP 設計介紹

這套設計系統以目前 Flutter Theme 與實機畫面為依據，整理亮暗色、字體、尺寸、元件及動態規則，供產品設計、開發與 AI 協作直接引用。

FLUTTER · MATERIAL 3 · LIGHT / DARK

GuppyCubed APP

清楚、直接且適合現場工作的原生介面。品牌紅只承擔主要操作與選取，內容以中性 surface、清楚邊框和可觸控尺寸維持穩定。

適用範圍
登入、助手、知識庫、錄音、協作與個人設定。
注意事項
不把品牌紅鋪滿背景，也不以網頁 hero 字級取代原生資訊層級。
登入
01

Token snapshot

直接呈現最能辨識這套系統的設計決策。

#C3102Eapp.color.primary主要操作
#F5F6F8app.color.background頁面背景
#FFFFFFapp.color.surface卡片與控制項
14pxapp.radius.control輸入與按鈕
52pxapp.control.primary主要按鈕高度
100–280msapp.motion.range操作與浮層
02

色彩角色

每一個顏色都留在被定義的產品角色中。

亮色語意色

以灰白背景和白色 surface 建立層級，品牌紅只用於動作與選取。

Primary#C3102E主要按鈕、焦點、選取
Primary deep#A20D27文字按鈕與 active
Background#F5F6F8Scaffold 背景
Surface#FFFFFF卡片、輸入與浮層
Surface alt#EFF1F4次要區塊與選取背景
Text#202124主要文字
Muted text#626975輔助資訊
Border#E5E7EB分隔與元件邊界

深色語意色

深色模式維持相同角色，不以單純反相取代語意。

Background#101216Scaffold 背景
Surface#191C22卡片與控制項
Surface alt#242831次要區塊
Text#F3F4F6主要文字
Muted text#B0B6C1輔助資訊
Border#373E4A分隔與元件邊界
Danger#FF7A8E深色錯誤與風險
03

字體與層級

字體角色依產品密度分工，不以裝飾作為層級。

Ag
Display / headline28 / 36 · 700

頁面與重要狀態標題

Ag
Title large22 / 30 · 600

App bar、Dialog

Ag
Title medium17 / 24 · 600

卡片與清單標題

Ag
Body16 / 24–25 · 400

主要閱讀與表單內容

Ag
Metadata13 / 18–19 · 400–500

時間、來源與輔助說明

04

版面、形狀與動態

讓跨畫面實作保持一致的精簡基線。

Spacing4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

所有 padding、gap 與區塊距離。

Accessibility4.5:1 · 44 × 44

一般文字對比與最小觸控範圍。

Focus3px visible ring

鍵盤焦點不可只靠顏色。

Radius12 / 14 / 16 / 24

文字按鈕、控制項、卡片、Dialog／Sheet。

ElevationBorder first

一般 surface 不加陰影；浮動層才建立深度。

Motion100–280ms

只 transition transform、opacity 與 color。

05

代表組件

最能在實際操作中辨識這套系統的模式。

  1. 01

    Top app bar：零 elevation，捲動後仍維持安靜 surface。

  2. 02

    Filled button：52px 高、14px radius、品牌紅底白字。

  3. 03

    Input：16px 內距、14px radius，focus 使用品牌紅邊框。

  4. 04

    Card：16px radius、1px border，不以 shadow 建立一般層級。

  5. 05

    Dialog／Sheet：24px radius，關閉後焦點回到原操作。

06

產品畫面預覽

以實際擷取確認 token 在產品情境中的使用方式。

登入登入助手助手知識庫知識庫協作協作深色模式深色模式
07

複製前先看完整設計檔

將這份平台 design.md 複製到 AI 開發工具，作為樣式與元件角色的上下文。

design.md
---
system: GuppyCubed APP
owner: GuppyCubed
platform: app
verified_at: 2026-09-22
method: restated-from-current-product-theme-and-captures
---

# GuppyCubed APP — Design Style Reference

## Summary

清楚、直接且適合現場工作的原生介面。品牌紅只承擔主要操作與選取，內容以中性 surface、清楚邊框和可觸控尺寸維持穩定。

## Color tokens

### 亮色語意色

| Token | Value | Role |
| --- | --- | --- |
| Primary | `#C3102E` | 主要按鈕、焦點、選取 |
| Primary deep | `#A20D27` | 文字按鈕與 active |
| Background | `#F5F6F8` | Scaffold 背景 |
| Surface | `#FFFFFF` | 卡片、輸入與浮層 |
| Surface alt | `#EFF1F4` | 次要區塊與選取背景 |
| Text | `#202124` | 主要文字 |
| Muted text | `#626975` | 輔助資訊 |
| Border | `#E5E7EB` | 分隔與元件邊界 |

### 深色語意色

| Token | Value | Role |
| --- | --- | --- |
| Background | `#101216` | Scaffold 背景 |
| Surface | `#191C22` | 卡片與控制項 |
| Surface alt | `#242831` | 次要區塊 |
| Text | `#F3F4F6` | 主要文字 |
| Muted text | `#B0B6C1` | 輔助資訊 |
| Border | `#373E4A` | 分隔與元件邊界 |
| Danger | `#FF7A8E` | 深色錯誤與風險 |

## Typography

| Role | Size / line / weight | Use |
| --- | --- | --- |
| Display / headline | `28 / 36 · 700` | 頁面與重要狀態標題 |
| Title large | `22 / 30 · 600` | App bar、Dialog |
| Title medium | `17 / 24 · 600` | 卡片與清單標題 |
| Body | `16 / 24–25 · 400` | 主要閱讀與表單內容 |
| Metadata | `13 / 18–19 · 400–500` | 時間、來源與輔助說明 |

## Layout, shape, and motion

| Token | Value | Rule |
| --- | --- | --- |
| Spacing | `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64` | 所有 padding、gap 與區塊距離。 |
| Accessibility | `4.5:1 · 44 × 44` | 一般文字對比與最小觸控範圍。 |
| Focus | `3px visible ring` | 鍵盤焦點不可只靠顏色。 |
| Radius | `12 / 14 / 16 / 24` | 文字按鈕、控制項、卡片、Dialog／Sheet。 |
| Elevation | `Border first` | 一般 surface 不加陰影；浮動層才建立深度。 |
| Motion | `100–280ms` | 只 transition transform、opacity 與 color。 |

## Component rules

- Top app bar：零 elevation，捲動後仍維持安靜 surface。
- Filled button：52px 高、14px radius、品牌紅底白字。
- Input：16px 內距、14px radius，focus 使用品牌紅邊框。
- Card：16px radius、1px border，不以 shadow 建立一般層級。
- Dialog／Sheet：24px radius，關閉後焦點回到原操作。

## Product previews

### 登入

[![登入](https://docs.guppycubed.com/zh-TW/img/guides/mobile/login.png)](https://docs.guppycubed.com/zh-TW/img/guides/mobile/login.png)

### 助手

[![助手](https://docs.guppycubed.com/zh-TW/img/guides/mobile/assistant.png)](https://docs.guppycubed.com/zh-TW/img/guides/mobile/assistant.png)

### 知識庫

[![知識庫](https://docs.guppycubed.com/zh-TW/img/guides/mobile/knowledge.png)](https://docs.guppycubed.com/zh-TW/img/guides/mobile/knowledge.png)

### 協作

[![協作](https://docs.guppycubed.com/zh-TW/img/guides/mobile/collaboration.png)](https://docs.guppycubed.com/zh-TW/img/guides/mobile/collaboration.png)

### 深色模式

[![深色模式](https://docs.guppycubed.com/zh-TW/img/design-language/captures/mobile-native-my-dark.png)](https://docs.guppycubed.com/zh-TW/img/design-language/captures/mobile-native-my-dark.png)


## Do's

- 以語意角色選色，不以畫面位置硬編碼顏色。
- 所有主要操作維持至少 44 × 44px。
- 亮暗色使用相同資訊層級與狀態名稱。

## Don'ts

- 不要把品牌紅當作大面積頁面背景。
- 不要用陰影取代邊框與 surface 層級。
- 不要只靠顏色表達錯誤、完成或選取。

---

_依目前 GuppyCubed 公開設計語彙整理。_

目前 App 導覽​

2026-09-16 核對目前介面。組織工作區使用五個入口：

  1. 助手
  2. 知識庫
  3. 錄音
  4. 協作
  5. 我的

錄音是底部中央操作入口。聊天、任務與聯絡人整合於協作內；個人身分進入影響力中心，並非同一套分頁。

品牌名稱為 GuppyCubed，介面文字跟隨 App 語言。主色、深色模式、表單、鍵盤、大字與底部彈層皆以目前 App 介面和驗收狀態為準。

完整的 115 張 Mobile 擷取、日期、分類與尺寸收錄在實際畫面與驗收來源。

最後於 更新