跳至主要内容

Web 設計介紹

Web 設計系統同時服務品牌首頁、公開入口與 Portal 產品介面。三者共享品牌與無障礙基線，但在字級、密度、媒體及功能色的角色上保持清楚界線。

HOMEPAGE / PUBLIC · PORTAL / PRODUCT

GuppyCubed Web

同一品牌下的兩種密度：首頁與公開入口用媒體、留白和大字敘事；Portal 用中性 surface、清楚邊框和較緊湊的產品層級支援工作。

適用範圍
品牌首頁、捐款／活動／媒合公開入口，以及登入後 Portal。
注意事項
公開入口功能色不升級為全域品牌色；首頁 display 規則不直接套用到 Portal。
品牌首頁 · Desktop
01

Token snapshot

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

#C3102Eweb.color.brand品牌與產品主要操作
#E11919home.color.conversion首頁 conversion
16pxweb.type.body主要閱讀
44pxweb.control.default預設控制項高度
8 / 16 / 24web.radius.scale控制項、卡片、Hero
160 / 250 / 420msweb.motion.scaleFast、base、slow
02

色彩角色

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

首頁與公開入口

黑白為主、紅色負責 conversion；功能色只留在對應入口。

Canvas#FFFFFF首頁與品牌內容背景
Ink#000000標題與主要文字
Conversion red#E11919首頁主要 CTA
Donation#F3D57A捐款 CTA，搭配深色字
Activity#F8DFC9活動入口 surface
Matching#F9EDC2媒合入口 surface

Portal 產品介面

產品內頁以中性色與品牌紅建立可掃讀的工作層級。

Brand#C3102E主要操作、選取、focus
Brand hover#A20D27Hover、active
Backgroundhsl(0 0% 98%)產品背景
Surface#FFFFFF卡片、表單與側欄
Mutedhsl(0 0% 96%)次要區塊
Borderhsl(0 0% 90%)分隔與元件邊界
Inkhsl(0 0% 10%)主要文字
03

字體與層級

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

Ag
Display48–72 / 56–80

首頁 hero、大型數字；每頁最多一次

Ag
Page title32–40 / 40–48

產品頁與文件頁主標題

Ag
Section title28–32 / 36–40

主要段落

Ag
Card title18–20 / 28 · 600

卡片、Dialog 與區塊

Ag
Body16 / 26 · 400

說明與連續閱讀

Ag
UI label14 / 20 · 500–600

按鈕、輸入與表格

Ag
Metadata12 / 18 · 400–500

來源、時間與輔助資訊

04

版面、形狀與動態

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

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

所有 padding、gap 與區塊距離。

Accessibility4.5:1 · 44 × 44

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

Focus3px visible ring

鍵盤焦點不可只靠顏色。

Content width680–720 / ≤ 1200px

閱讀欄寬與文件 canvas。

Radius8 / 16 / 24px

控制項、卡片、Hero／大型容器。

Motion160 / 250 / 420ms

Fast、base、slow；reduced motion 移除位移。

05

代表組件

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

  1. 01

    Homepage hero：每頁一次的大型敘事區，媒體必須支援文案。

  2. 02

    Public-entry card：功能色只存在自己的入口與 CTA。

  3. 03

    Portal control：44px default、40px compact，8px radius。

  4. 04

    Portal card：16px radius、1px border，避免裝飾性 shadow。

  5. 05

    Floating layer：Popover、Dialog、Sheet 才使用 shadow。

06

產品畫面預覽

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

品牌首頁 · Desktop品牌首頁 · Desktop品牌首頁 · Mobile品牌首頁 · MobilePortal · 知識庫Portal · 知識庫Portal · 專案Portal · 專案公開入口 · 活動公開入口 · 活動公開入口 · 媒合公開入口 · 媒合
07

複製前先看完整設計檔

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

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

# GuppyCubed Web — Design Style Reference

## Summary

同一品牌下的兩種密度：首頁與公開入口用媒體、留白和大字敘事；Portal 用中性 surface、清楚邊框和較緊湊的產品層級支援工作。

## Color tokens

### 首頁與公開入口

| Token | Value | Role |
| --- | --- | --- |
| Canvas | `#FFFFFF` | 首頁與品牌內容背景 |
| Ink | `#000000` | 標題與主要文字 |
| Conversion red | `#E11919` | 首頁主要 CTA |
| Donation | `#F3D57A` | 捐款 CTA，搭配深色字 |
| Activity | `#F8DFC9` | 活動入口 surface |
| Matching | `#F9EDC2` | 媒合入口 surface |

### Portal 產品介面

| Token | Value | Role |
| --- | --- | --- |
| Brand | `#C3102E` | 主要操作、選取、focus |
| Brand hover | `#A20D27` | Hover、active |
| Background | `hsl(0 0% 98%)` | 產品背景 |
| Surface | `#FFFFFF` | 卡片、表單與側欄 |
| Muted | `hsl(0 0% 96%)` | 次要區塊 |
| Border | `hsl(0 0% 90%)` | 分隔與元件邊界 |
| Ink | `hsl(0 0% 10%)` | 主要文字 |

## Typography

| Role | Size / line / weight | Use |
| --- | --- | --- |
| Display | `48–72 / 56–80` | 首頁 hero、大型數字；每頁最多一次 |
| Page title | `32–40 / 40–48` | 產品頁與文件頁主標題 |
| Section title | `28–32 / 36–40` | 主要段落 |
| Card title | `18–20 / 28 · 600` | 卡片、Dialog 與區塊 |
| Body | `16 / 26 · 400` | 說明與連續閱讀 |
| UI label | `14 / 20 · 500–600` | 按鈕、輸入與表格 |
| Metadata | `12 / 18 · 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` | 鍵盤焦點不可只靠顏色。 |
| Content width | `680–720 / ≤ 1200px` | 閱讀欄寬與文件 canvas。 |
| Radius | `8 / 16 / 24px` | 控制項、卡片、Hero／大型容器。 |
| Motion | `160 / 250 / 420ms` | Fast、base、slow；reduced motion 移除位移。 |

## Component rules

- Homepage hero：每頁一次的大型敘事區，媒體必須支援文案。
- Public-entry card：功能色只存在自己的入口與 CTA。
- Portal control：44px default、40px compact，8px radius。
- Portal card：16px radius、1px border，避免裝飾性 shadow。
- Floating layer：Popover、Dialog、Sheet 才使用 shadow。

## Product previews

### 品牌首頁 · Desktop

[![品牌首頁 · Desktop](https://docs.guppycubed.com/zh-TW/img/guides/web/homepage-local-1440-zh.webp)](https://docs.guppycubed.com/zh-TW/img/guides/web/homepage-local-1440-zh.webp)

### 品牌首頁 · Mobile

[![品牌首頁 · Mobile](https://docs.guppycubed.com/zh-TW/img/guides/web/homepage-local-375-zh.webp)](https://docs.guppycubed.com/zh-TW/img/guides/web/homepage-local-375-zh.webp)

### Portal · 知識庫

[![Portal · 知識庫](https://docs.guppycubed.com/zh-TW/img/guides/web/portal-knowledge-empty.webp)](https://docs.guppycubed.com/zh-TW/img/guides/web/portal-knowledge-empty.webp)

### Portal · 專案

[![Portal · 專案](https://docs.guppycubed.com/zh-TW/img/guides/web/project-list.webp)](https://docs.guppycubed.com/zh-TW/img/guides/web/project-list.webp)

### 公開入口 · 活動

[![公開入口 · 活動](https://docs.guppycubed.com/zh-TW/img/design-language/captures/web-public-activity.webp)](https://docs.guppycubed.com/zh-TW/img/design-language/captures/web-public-activity.webp)

### 公開入口 · 媒合

[![公開入口 · 媒合](https://docs.guppycubed.com/zh-TW/img/design-language/captures/web-public-match.webp)](https://docs.guppycubed.com/zh-TW/img/design-language/captures/web-public-match.webp)


## Do's

- 先辨識 Homepage／Public 或 Portal context，再選 token。
- 所有成效數字附上來源與更新時間。
- 用實際產品畫面支援產品敘事。

## Don'ts

- 不要把捐款、活動或媒合色當作 Portal 全域 accent。
- 不要在產品頁重複首頁的大型 display 密度。
- 不要用無法驗證的裝飾性成效數字。

---

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

首頁與公開入口​

首頁使用大字、全幅媒體、黑白基底與品牌紅建立敘事及轉換節奏。捐款、活動與媒合的功能色只在各自入口使用，不取代品牌紅，也不延伸為 Portal 的全域介面色。

Portal 產品介面​

Portal 使用較緊湊的資訊密度、中性 surface、清楚邊框和一致的操作尺寸。表單、表格、側欄與工作區優先保持掃讀效率；陰影只留給 Popover、Dialog 和 Sheet 等浮動層。

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

最後於 更新