Pocket DesignL1 → L2 → L3
設計 Tokens
Pocket 品牌層 · Studio Design System v0.3 · 規範 v1.0
L1 · 五色常數 / Light & dark
| L1 token | light | dark(300 提亮階) | 出處 |
|---|---|---|---|
| pocket-red | CIS / console --pocket-red(-300) / iOS accent | ||
| ├ hover | iOS accentHover | ||
| ├ active | iOS accentActive | ||
| └ deep(漸層深端) | iOS accentDeep | ||
| overall-blue | console --overall-blue(-300) / iOS info | ||
| star-yellow | console --star-yellow(-300) / iOS amber | ||
| white | —(dark 無白面) | 卡片 / agent 泡 / onAccent | |
| ink | 前景轉 | 文字 / 邊框基底 |
L1 · 奶油底完整階
| 層 | light | dark | 出處 |
|---|---|---|---|
| canvas(頁底) | 雙端一致 | ||
| surface(卡片) | 雙端一致 | ||
| surface-sunken(側欄/代碼框,比底深一階) | (web) | (web) | console;iOS 托盤見 §9 衝突 #7 |
| tray / backgroundTertiary | (iOS) | (iOS) | iOS;角色對位待裁(§9 #7) |
| accentSurface(user 泡/選取底) | console(ink 字 14.16:1 實測) | ||
| 漸層 soft(空狀態/onboarding) | → | → | iOS gradientSoftStops |
| 漸層 brand(icon/hero) | → → | → → | iOS gradientStops |
L1 · White 主題與輔助色
| White 主題 | web | iOS |
|---|---|---|
| canvas | ||
| surface | ||
| sunken | — | |
| muted | ||
| faint | ||
| accentSurface | accentTint α |
輔助色：espresso、kraft、silver、Luigi green；Persona 四色；工具品牌 CC ≈、Codex ≈、OpenClaw、Gemini（依上列順序）。非主識別。
L2 · PocketThemeSpec 53-role 語意對位
附件只提供核心子集，並未附完整 53-role 枚舉。其餘 toolbar、search、terminal、secondary / muted 族由生成器導出；本頁不補造名稱、對位或數值。
| PocketThemeSpec role | SDS token 對位 | console var | iOS PocketColor | pocket light | dark |
|---|---|---|---|---|---|
| canvas | surface/canvas | --color-canvas | backgroundPrimary | ||
| surface | surface-raised | --color-surface | backgroundSecondary | ||
| (sunken,53-role 外) | surface-sunken | --color-surface-sunken | backgroundTertiary* | * | * |
| text | text | --color-text | foregroundPrimary | ||
| textMuted | text-muted | --color-text-muted | foregroundMuted | * | |
| placeholder / iconMuted | text-faint | --color-text-faint | foregroundFaint | * | * |
| (disabled,v0.3 新) | text-disabled | --color-text-disabled | — | — | |
| border | border | --color-border | border(Strong) | ink @ .14* | white @ .12 |
| accent | theme-600/300 | --color-accent | accent | ||
| accentForeground | on-theme | --color-accent-foreground | onAccent | ||
| accentSurface | theme-surface | --color-accent-surface | accentTint≈ | ||
| focus | focus | :focus-visible outline | accent | = accent | = accent |
| (link) | action-link | --color-link / --color-action-link | info | / 內文 | |
| error 族 | danger | --color-danger | danger | * | * |
| warning 族 | warning | --color-warning | warning | * | * |
| update 族 | info | --color-info | info | * | * |
| (success,SDS 有 / 53-role 無) | success | --color-success | success | * | * |
| messageSurface | — 品牌層 | .card.user 底 | user 泡底 | §9 衝突 #3 | — |
| codeBackground | surface-sunken | .md-code 底 | Terminal.bg | (web 固定深) | 同 |
種子：canvas #FFF2D6 + accent #EE2D2A。* 表示原跨端差異；附件末尾裁決 #1–10 / #12–14 已對齊，僅 #11 平台陰影逐值對齊待裁。sunken 與 tray 保留原表的兩種角色，不擅自合併。
對比度 · WCAG 實測
| 配對 | 比值 | 判定 |
|---|---|---|
| ink / cream | 16.12:1 | AAA |
| ink / accentSurface | 14.16:1 | AAA |
| muted / cream | 5.07:1 | ≥4.5 ✓ |
| faint / cream | 3.34:1 | ≥3 ✓(非正文) |
| white / Pocket Red | 4.16:1 | **大字 AA(≥3)**:accent 上白字僅限 semibold 短標籤(按鈕/徽章),不作長文 |
| action-link / cream | 5.24:1 | 內文連結用這個,不用裸 accent(3.75:1) |
| dark text / | 16.59:1 | AAA |
| dark accent / | 5.66:1 | ✓(300 提亮的理由) |
字體 · 三端字族與四檔字階
| 軌 | iOS/macOS | Android | web(SDS) |
|---|---|---|---|
| display(標題/chrome,品牌 voice) | jf open 粉圓 jf-openhuninn-2.1(OFL 1.1,bundled) | 同字檔(OFL 可隨附) | Inter + Noto Sans TC;console 現行用系統堆疊 -apple-system … "PingFang TC","Microsoft JhengHei"(粉圓 web 載入待品牌層補 woff2) |
| body(正文/閱讀) | 系統字(SF / PingFang) | Roboto / Noto Sans TC | 同上系統堆疊 |
| terminal(CC/CX 對話) | 粉圓(= display;nil 時退 body) | 同 | 同 body |
| mono(代碼/ID/路徑) | 系統 mono(SF Mono) | 系統 mono | ui-monospace,SFMono-Regular,Menlo,monospace |
| wordmark(品牌時刻限定) | Luckiest Guy(無 CJK,只給英文標) | 同 | 同(需自帶字檔) |
web 使用附件所列系統堆疊；粉圓 woff2 與 Luckiest Guy 字檔未附，不以別的品牌字體代替。粉圓服務 zh-Hant / 拉丁語系；zh-Hans / ja 整軌落系統字。
| SDS 檔 | web(px/行高) | iOS 對位(PocketFont) | 用途 |
|---|---|---|---|
| caption | 13 / 1.6 | footnote 13(次階 caption 12、caption2 10) | 時間戳、meta、狀態膠囊 |
| body | 16 / **1.75** | subhead 16(UI 慣用 body 14,見 §9 #10) | 正文、聊天、輸入框 |
| subtitle | 18 / 1.35 | headline 17 ≈ | 區段標題 |
| title | 20 / 1.3 | title3 20 | 頁標題 |
caption · 13 / 1.6
body · 16 / 1.75 · CJK 正文行高 ≥ 1.7
subtitle · 18 / 1.35
title · 20 / 1.3
形狀 · 三檔 + Pocket 泡泡
| 檔 | 值 | 用在 | token |
|---|---|---|---|
| btn(SDS 簽名) | 9999 膠囊 | 送出/繼續/中斷/mode 鈕/徽章/狀態膠囊 | --btn-radius / PocketRadius.pill |
| field | 10 | 輸入框、列表列、chip、代碼框、圖片 | --field-radius |
| dialog | 20 | 彈窗、⌘K 面板、toast、抽屜 | --dialog-radius |
| **泡泡(Pocket 自有語彙)** | 14 | 聊天泡、審批卡、卡片家族 | web .card/.approval;iOS 現值 20,見 §9 #2 |
| 文字級小裝飾 | 3–6 | inline code、mark、小標籤 | 不入檔 |
user 缺右下角 6；agent 缺左下角 6。卡片 radius 14。
陰影 · 四級
| 級 | light(暖灰 oklch(25% .04 55/α)) | dark(純黑,層級靠「表面越高越亮」) | 用在 |
|---|---|---|---|
| 1 | 0 2px 6px /.12, 0 1px 2px /.08 | 0 1px 2px /.35, 0 1px 6px /.28 | 卡片、泡泡 |
| 2 | 0 8px 24px /.17, … | 0 2px 8px /.45, 0 14px 40px /.55 | 浮層、選單 |
| 3 | 0 16px 48px /.23, … | 0 16px 48px /.55, … | toast、抽屜 |
| 4 | 0 28px 80px /.3, … | 0 28px 80px /.6, … | 對話框 + 遮罩 |
Level 1
Level 2
Level 3
Level 4
附件第 2–4 級以「…」省略部分陰影。本頁僅渲染明載的層，不猜補；深色表面僅採附件既有 surface / tray 值。iOS 陰影維持平台近似、級別對位（#11 待裁）。
動效 · 一條曲線、兩檔時長
prefers-reduced-motion 關閉 shimmer、spinner 與脈動點等循環動畫。
三端落地對照
| 語意 | iOS(PocketColor / PocketTheme) | Android(THEME_SPEC JSON role) | web(console css L2) |
|---|---|---|---|
| 頁底 | backgroundPrimary | canvas | --color-canvas |
| 卡片 | backgroundSecondary | surface | --color-surface |
| 第三面 | backgroundTertiary | surfaceRaised† | --color-surface-sunken† |
| 正文 | foregroundPrimary | text | --color-text |
| 次文 | foregroundMuted | textMuted | --color-text-muted |
| 淡文 | foregroundFaint | placeholder | --color-text-faint |
| 邊線 | border / borderStrong / cardBorder | border | --color-border |
| 強調 | accent(+Hover/Active/Tint) | accent | --color-accent |
| 強調上字 | onAccent | accentForeground | --color-accent-foreground |
| 選取底 | accentTint(α)≈ | accentSurface | --color-accent-surface |
| 成功 | success | —(spec 無 success,平台自持) | --color-success |
| 危險 | danger | error | --color-danger |
| 警告 | warning | warning | --color-warning |
| 資訊 | info | update | --color-info / --color-link |
| 圓角 | PocketRadius.*(pill 999/bubble) | —(照本文件 §5) | --btn/field/dialog-radius |
| 間距 | PocketSpace.s1–s10(4…40) | 同階 | 4/8/12/16/20/24/32/40 |
| 影 | PocketShadow.sm–xl | 同四級 | --shadow-1…4 |
| 動效 | PocketDuration + PocketAnimation | 同 | --ease-standard + --duration-* |
| 字 | PocketFont.display/text/terminalText/mono | 同三軌 | --sans / --mono |