Brand Identity System · CIS 1.0 · 2026-09-01

TaiwanDigitalFest

Where digital nomads meet nature & innovation.數位遊牧者，相遇於山海與創新。

Get the tokensRead the spec
TDF 品牌圖記Official mark
2027Apr 19 — May 31
Hosted byTDNATaiwan Digital Nomad Association
Hualien花蓮 · Apr 19 – 30
Taitung台東 · May 1 – 28
Green Island綠島 · May 29 – 31

Brand Core

品牌核心
Positioning

TDF 不是一場單點活動，而是亞太數位遊牧社群在東台灣展開的 43 天共同生活。

One festival. Three places. A community-led migration across East Taiwan.

01Community-led

真實社群先於流量與推銷。

02Work × Nature

工作節奏與山海生活並存。

03Locally rooted

面向國際，也尊重地方脈絡。

04Open & direct

清楚、誠實、有文化感。

TDNA

Endorser

主辦與背書品牌，承載組織信用。背書句固定：HOSTED BY TAIWAN DIGITAL NOMAD ASSOCIATION · TDNA，高度 ≤ 標題 25%。

TDF

Event Brand

Taiwan Digital Fest 2027 是所有參與者接觸的主要對外身份。

3×

Equal Places

花蓮、台東、綠島平等並列。不用 Act I／II／III、第一站／壓軸；顏色不永久綁定某一地。

Tagline

Where digital nomads meet nature & innovation.
數位遊牧者，相遇於山海與創新。

固定句，不改寫。

Dates

Apr 19 — May 31, 2027
2027 年 4 月 19 日至 5 月 31 日（43 天）

Places

HUALIEN · TAITUNG · GREEN ISLAND
花蓮 · 台東 · 綠島

同尺寸、同字重、同位階。

Color System

12 official swatches · 一畫面一主色
YellowPrimary · 亮黃
#FFD028 · --tdf-yellow / --accent
CyanPrimary · 青藍
#10B8D9 · --tdf-cyan
OrangePrimary · 橘紅
#E74310 · --tdf-orange / --warn
PinkAccent · 淺粉
#F9D2E5 · --tdf-pink / --surface-warm
GreenAccent · 綠
#00993E · --tdf-green / --success
MagentaAccent · 桃紅
#E4003D · --tdf-magenta / --danger
PurpleAccent · 紫紅
#C54090 · --tdf-purple
BlueSupport · 深藍
#004E9D · --tdf-blue
Gray 50Base · 淺灰
#F6F6F6 · --tdf-gray-50 / --surface
InkBase · 深灰黑
#1E1F1C · --tdf-ink / --fg
WhiteBase
#FFFFFF · --tdf-white / --bg
BlackStructure
#000000 · --tdf-black / --border

Roles

  • 白與淺灰是閱讀底；黑畫格線；Ink 排長文。
  • 黃、青、橘承載主視覺與動作。一畫面只有一個主色：--accent 預設黃，可整頁換成青或橘，不三色並用。
  • 粉、綠、桃紅、紫紅做節奏與分區，不能暗示三地高低。
  • 深藍給冷靜資訊、深底標題或暗色區塊。
  • 一個資訊元件最多一種實色填滿、一種文字色。

AA pairing

Text onSwatchRatio
BlackYellow14.3
BlackPink15.4
BlackCyan8.9
BlackGreen5.6
BlackOrange5.2
WhiteInk16.6
WhiteBlue8.2
WhiteMagenta4.8
WhitePurple4.7
White · display onlyOrange4.0
White · display onlyGreen3.7

Ink 不得當小字放在橘、綠、桃紅、紫紅、深藍上。

Derived exceptions

  • --muted：Ink 混 28% 白，≈7:1 on white，只給說明文字。
  • --border-soft：黑 15%，只給表格內列分隔。
  • 兩者都不能當填色；除此之外不新增色相、淡色或漸層。
  • 印刷 CMYK、螢幕 HEX，值見 design-tokens.json。

Typography

字體與階層
English headings · Jersey 10 · --font-display
TDF
2027

All English headings, the year and short numbers use the pixel face, uppercase, leading .9, tracking .02em.

繁中標題 · Cubic 11 Bold · --tdf-font-display-zh
數位遊牧
相遇山海

所有繁中標題使用 700 粗體像素字；行高 1.45、字距 .08em，兩行不得重疊。繁中內文仍用 Noto Sans TC。

Display · --text-4xl12064–164 px · leading .82–.9
H1 · --text-3xl64Section --text-2xl 44
H2–H6 · --text-xl28 pxEyebrow 14–16 · .2em uppercase
Body · --text-base16–18 px · 1.55–1.7Nothing visible below 14 px

Faces

  • Jersey 10 400：英文標題、年份、短數字。
  • Space Grotesk 400/500/700：英文 UI 與內文。
  • Cubic 11 700：繁中標題。
  • Noto Sans TC 400/500/700：繁中 UI 與內文。
  • System monospace：code、kbd、對齊數字。

Bilingual

  • English-first 素材：中文第二行，≥ 英文內文 75%。
  • 中文優先素材：層級對調。
  • 兩種語言不搶同一個標題位。

Never

  • 內文、表格、QR、導引文字用像素字。
  • 低解析「8-bit」濾鏡。像素感來自展示字體與整數格線。
  • 任何可見文字小於 14 px。

Layout Language

蒙德里安格線＋像素模組
Grid rules

8 px module.
5 px structure.
3 px on mobile.

非對稱但有清楚閱讀順序：一個主導色塊、一個輔助欄、幾個小點綴格。留白也是合法色塊，不為填滿而裝飾。用黑線與實色分隔；不用圓角、陰影、玻璃、漸層。

1440--container-max
Gutters 32 / 24 / 20 px
96 / 64 / 48Section rhythm desktop / tablet / phone
--section-y-*
0 pxRadius everywhere. Pills, avatars, badges are squares with a black rule.
--radius-*
RingsNo blur shadows. --elev-ring 1 px black, --elev-raised 3 px black.

Components

元件範本 · live from tokens.css
Buttons
Buy ticketsExplore programApply as speaker
Hover
Fill and text invert together
Focus
--focus-ring 3 px gap + 3 px black
Active
Shifts 2 px down-right

Primary：黃底黑字 3 px 黑框，min-height 48，Space Grotesk 700 16 px。一個視窗只有一顆 primary。Secondary：白底，hover 變淺灰。文字連結 2 px 底線，hover 換黃底線。

Tags & status
CommunityWorkshopFreePaid
25 seats leftAlmost fullSold out
Event card
04May
WorkshopFree

AI tools for solo founders

14:00 – 16:30Taitung co-working hub
25 seats left
Join
Form field
Enter a full email address, e.g. mei@example.com

14 px 粗體標籤、46 px 輸入框 3 px 黑框；focus 顯示 --focus-ring 與黃色底線；錯誤用 --danger 文字＋邊框，不只靠顏色。

Table
PassCoversNT$
Hualien weekApr 19 – 303,200
Taitung monthMay 1 – 286,800
Full festival43 days12,000

15–16 px；表頭黑字淺灰底；列以 --border-soft 分隔；對齊數字用 --font-mono。數字為範例。

Nav bar

  • 白底、底線 5 px
  • 左：短標；右：14 px 大寫連結
  • Active 連結黃底黑字

Place card

  • 三格等大、等字級、等位階
  • Jersey 10 28–34 px 地名
  • 一格一色，色彩可在素材間輪替

Badge / tag

  • 直角、14 px 大寫
  • 一色填滿＋正確文字色
  • 不用膠囊形

Footer

  • Ink 底白字、Jersey 10 標題
  • 背書句固定
  • 夥伴 logo 以黑線或留白分隔

Motion & States

動態與互動狀態
180 ms--motion-fast hover 與微狀態
220 ms--motion-base 狀態切換；大色塊最多 400 ms
Ease-out--ease-standard cubic-bezier(0,0,.2,1)。整格滑動、色塊翻轉、硬切。
NeverBounce、漂浮、粒子、視差、長迴圈。

Color-block flip

Hover 只移動底色或邊框，文字不變淡。移到下方色塊試試。

Hover me
Whole block

Feedback

  • Hover 不是唯一回饋；每個可聚焦元素都顯示 --focus-ring。
  • 文字 hover 不變灰。
  • Active 平移 2 px，不縮放。

Reduced motion

  • 尊重 prefers-reduced-motion。
  • 移除移動、視差、自動播放。
  • 本頁已依此設定關閉過場。

Imagery

紀實攝影與像素角色
花蓮工作旅遊參與者自然互動
Real people · 真實社群
台東夜間社群聚會
Real context · 地方脈絡
四隻像素羊一起共同工作
Supporting character · 像素羊不是主標誌

Photography · do

  • 真實參與者、共同工作、地方文化、自然、夜間社群紀實。
  • 自然光、真實膚色、看得見的環境、人與人互動。
  • 裁切保留手、臉與地方元素；人像需授權。
  • 照片、QR、文字維持高解析。

Photography · don't

  • 擺拍「海邊筆電」、商務庫存照、HDR、假人潮。
  • 像素羊當標誌、放進正式文件或密集表格。
  • 像素羊以外的內容套像素濾鏡。
  • Icon 要單色線性、方形端點、放在色格裡並附文字標籤。

Voice

語氣與文案

Say it plainly

  • English-first，中文其次（≥ 75% 英文內文字級）
  • 清楚說明日期、地點、費用、限制
  • Community、live together、workation、local connection
  • CTA 用動詞：Explore、Join、Apply、Buy tickets

Avoid the hype

  • 「全球頂尖」「史上最大」「world's biggest」
  • Networking opportunity、exclusive lifestyle
  • 假造人潮與社群證明、廉價倒數、連續驚嘆號
  • Act I／II／III、第一站／壓軸的三地階層

Applications

輸出規格與出稿檢查
TDF 2027 OG 主視覺
OG image1200 × 630 px
≥ 40 px safe area
IG portrait1080 × 1350 px
headline in central safe area
Story / Reels1080 × 1920 px
250 px UI safe zones top and bottom
Deck16:9 · one message per slide
titles ≥ 36 px, body ≥ 24 px @1920
PrintCMYK · 300 dpi · 3 mm bleed · outlined text
QR keeps 4 modules quiet zone
Co-brandingTDF 與夥伴標誌以黑線或留白分隔
TDF 主辦時面積 ≥ 最大夥伴標誌
品牌名稱、日期、標語與三地拼寫正確
三地平等，沒有 Act 階層或永久綁色
一畫面一主色；沒有新色、漸層、圓角、陰影
使用正式向量標誌、色票與字體
所有文字 ≥ 14 px，fg/bg 組合在 AA 表內
照片、字體與夥伴標誌授權齊全
導引、表格、QR 不用像素字
輸出檔與可編輯來源一併歸檔

Tokens & Package

OpenDesign · for designers and agents
Use it

One stylesheet. Every color, size and rule on this page comes from it.

<link rel="stylesheet" href="https://cis.taiwandigitalfest.com/design-system/fonts/fonts.css">
<link rel="stylesheet" href="https://cis.taiwandigitalfest.com/design-system/tokens.css">

.btn-primary { background: var(--accent); color: var(--accent-on); border: 3px solid var(--border); }
.grid        { gap: var(--tdf-line); background: var(--border); }

Agents：先讀 USAGE.md，再讀 DESIGN.md，把 tokens.css 的 :root 貼進第一個 <style>，沿用 components.html 的範本，最後對照 preview 頁檢查。Schema token 名稱不改，品牌值只透過 --tdf-* 擴充。

ColorsTypographySpacingLogoButtonsInputsAppComponents
tokens.cssOpenDesign contract + --tdf-* extensions design-tokens.jsonW3C design tokens · HEX / CMYK tailwind-v4.css@theme mapping for Tailwind 4 DESIGN.mdRules, prohibitions, AA table, component specs fontsJersey 10 · Cubic 11 (OFL) woff2 manifest.jsonod-design-system-project/v1 favicon.svgOfficial mark · vector only og-image.png1200 × 630 master