TARO / Brand guidelines / V2.0

同一個根。
不同的故事。

Rooted in Taiwan. Woven together.

以 21「台結・圓菱」的交織造型,延伸 23「台折・雙環」的紫粉配色。台字紋的上下結構,連結台灣的文化根源與跨世代的相聚。

下載品牌素材 ZIP ↓
紫粉色台結圓菱標誌21 台結・圓菱 × 23 紫粉配色

02 / Color

沉穩的紫。溫暖的粉。

主識別只有紫、粉兩色。介面以淺底與深色文字維持閱讀性。粉色用於圖形、色塊與細節,正文與操作優先使用紫色。

Root Purple

#5C477A

主色/連結/按鈕

Connection Rose

#D294AB

標誌/裝飾/深色底點綴

Deep Purple

#46335F

頁尾/按鈕 hover

Paper

#FAF8FC

主要背景

Ink

#282132

標題/正文

Mist

#F0EBF5

卡片/分區底色

可讀性配對

白字/Root Purple、Ink/Paper、Muted Ink(#655B70)/Mist 均達 WCAG AA 一般文字 4.5:1。Connection Rose/Paper 僅供裝飾;需要粉調文字時,改用 Rose Ink(#805065)。實際比值請見 對比檢查結果。

03 / Typography

清晰、友善,有呼吸感。

Poppins / 500

Roots carried
across generations.

英文標題 · 幾何輪廓呼應標誌

Source Sans 3 / 400–600

We connect people to Taiwan through what we learn together, and through what we do together.

中文使用 Noto Sans TC,系統備援為 PingFang TC。大員,連結不同世代的共同故事。

層級 大小 行高 用途
Display 40–64 px 1.13 首頁主標題
Heading 28–40 px 1.2 段落標題
Lead 20 px 1.65 導讀
Body 16–18 px 1.65 正文
Label 12–14 px 1.5 標籤/輔助文字

中文正文不加負字距;英文大標題字距 −0.035em。頁面以一個 h1 建立清楚的標題層級。

04 / Layout & rhythm

留白讓故事被看見。

4 px 間距基準

元件內距 12/16/24 px,卡片內距 32 px;區塊間距桌面 80 px、手機 48 px。使用 6 px 輸入框、12 px 中型容器、24 px 大卡片、全圓角按鈕。

彈性網格

內容最大寬度 1200 px,桌面左右 40 px、手機 24 px。720 px 以下切為單欄,1024 px 以上採寬版配置。卡片與表單依可用空間堆疊,避免固定高度截斷內容。

05 / Components

同一套元件,同一種體驗。

以下元件與正式網站共用 tokens.css 與 components.css。所有互動保留清楚的鍵盤焦點,按鈕點擊範圍至少 44 px。

按鈕與連結

主操作使用實色紫;次要操作用描邊。Hover 加深,focus 顯示外框,disabled 不可操作。

輸入框

展示用輸入框,不送出或儲存資料。

Please enter a complete email address.

01 / Culture

Learn our stories.

Educational and cultural programs that connect us to Taiwan and the roots we share.

表單錯誤以文字與邊框共同提示;狀態更新使用 aria-live。動畫僅用 150ms 色彩變化,尊重 prefers-reduced-motion。

06 / Voice

親近、具體,一起參與。

品牌語氣

以「我們」與「一起」邀請參與。用學習、運動、音樂、藝術等具體經驗說明連結。讓不同背景與世代的人都能感到被歡迎。

內容原則

組織名稱固定為 Taiwanese American Roots Organization,簡稱 TARO。中文識別為「大員」。活動資訊與成果以已確認的事實為準,避免抽象口號或未實現的承諾。

07 / Downloads

從這裡開始使用。

SVG 適合網頁、印刷與設計軟體;透明 PNG 為 1254 px,可用於簡報與社群。螢幕色彩採 sRGB,實體印刷請依材質打樣確認。

版本 2.0 · 2026-10-01 · 圖形、字標、色彩與 UI 元件的單一維護來源。