01 · COLOR

## The palette is warm-sided.

Whites lean into sand, blacks lean into deep aquarium green. Pure neutrals are forbidden. Kelp signals "App Store / running / OK"; coral signals the developer tier; amber is the only color that pulses, and only when the agent is waiting on you.

Tide — sand / paper
tide-50
#f5f3ec
App background, light surfaces.
tide-100
#ebe6d6
Muted card, hairline section.
tide-200
#d8cfb6
Disabled / placeholder fill.
tide-300
#a8b09a
Tide on dark inversions.
Ink — deep aquarium
ink-900
#0e1f1f
Primary text, dark hero, primary button.
ink-800
#15302f
Dark surface variant.
ink-700
#1f4544
Body copy on light, secondary text.
ink-500
#426664
Tertiary text, captions.
Kelp · Coral · Amber — signals
kelp-700
#1f6157
Kicker label, link hover.
kelp-500
#2f8a7c
Processing status, App Store badge.
coral-500
#c0573a
Developer tier badge, dev card border.
amber-500
#c8923a
Awaiting / needs-attention only.

### Two surfaces, two palettes

The tokens above are for marketing / editorial surfaces. Inside the product itself — menubar, e-ink, terminal, hardware — we run a brighter signal palette so status reads at 16px on glossy OS chrome. Marketing must never use product brights.

ui-ok
#52D988
Running / connected dot. Saturated for 6px legibility.
ui-attn
#FFA93D
Awaiting pulse on dark popup chrome.
ui-error
#FF6B6B
Failed / disconnected on near-black.
ui-cyan
#3ED6E8
Hub, link, focused chrome — product only.
ui-popup-bg-dark
#0a1a2a
Dark popup base.
ui-tty-bg
#0c0d10
Terminal / CLI surface.
02 · TYPE

## Two faces, one rhythm.

IBM Plex Sans for everything human — including Korean and Japanese, via the Plex multi-script family. JetBrains Mono for everything the machine emits, plus all kickers, tier badges, timestamps and commands. No third face.

Hero display96px · 600 · -0.035em
Plex Sans
Run agents, calmly.
H2 / Section44px · 600 · -0.02em
Plex Sans
Two tiers, one surface.
H3 / Card26px · 600 · -0.015em
Plex Sans
Glanceable status without a tab switch.
Body17px · 400 · 1.6
Plex Sans
AgentDeck routes Claude Code, Codex CLI, OpenClaw and OpenCode through a single deck. The agents do the work; you keep your attention.
Small / list14.5px · 400 · 1.55
Plex Sans
Each row in the comparison checklist runs at this size with a hairline rule between. Tight but never cramped.
Kicker12px · 600 · 0.18em UPPER
JetBrains Mono
Open Source · Independent
Mono badge11.5px · 700 · 0.16em
JetBrains Mono
App Store Developer CLI
Code line15px · mono
$ on kelp-300
npx @agentdeck/setup
03 · MULTILINGUAL

## Asia-first stack.

KO, EN and JA share one type system via the IBM Plex Sans family + KR + JP scripts. Korean copy uses ~해요 체 (relaxed but precise). Japanese uses です/ます. Mono kickers translate, tier badges do not.

KO
에이전트를 차분하게 실행하세요. — hero subtitle
EN
Run agents, calmly. — hero subtitle
JA
エージェントを、静かに動かす。 — hero subtitle
04 · SPACING

## 4px base, 14 stops.

Section vertical padding is 96px desktop, 64px mobile. Container max-width is 1240px with 32px gutters.

4
8
12
16
20
24
32
40
48
56
64
80
96
120
05 · RADII

## Soft, never cute.

Mono badges hold a 4px radius for crispness; cards open up to 16–18px. The hero pill and lang switch use full pills.

sm · 4
md · 8
lg · 10
xl · 12
2xl · 14
3xl · 16
pill
06 · SHADOWS

## Warm, soft, subtle.

All shadows tilt warm — they're built on the ink-900 hue, not pure neutral grey, so they sit naturally against the sand backgrounds.

sh-card
sh-card-hover
sh-frame
sh-canvas
07 · STATUS SEMANTICS

## One thing pulses, and only one.

Idle is silent. Processing is steady. Awaiting pulses amber. Error is solid coral. Anything outside this matrix is decoration and should be reconsidered.

State | Dot | Color | Animation | Meaning
--- | --- | --- | --- | ---
idle |  | `--ink-300` | none | Session exists, nothing happening.
processing |  | `--kelp-500` | none — steady | Agent is actively working.
awaiting |  | `--amber-500` | pulse 1.1s | Agent needs YES/NO from you.
error |  | `--coral-500` | none | Failed run, attention required.

08 · COMPONENTS

## The working set.

Everything below is a class in `design/components.css`. Variants extend a base via BEM-ish modifiers (`--primary`, `--ghost`).

.ad-btn
.ad-tier
App Store Developer CLI
.ad-tier on ink
App Store Developer
.ad-chip Open · independent · 2026
.ad-dot
idle processing awaiting error
.ad-lang
.ad-notice
codex · gpt-5.4 is editing `main.zig`.
claude-code is asking permission to delete 3 files.
opencode failed: rate limit until 12:42.
.ad-code npx @agentdeck/setup agentdeck route claude-code → tablet
.ad-placeholder
09 · ICONS

## Drawn for the system.

All 24px viewbox, 1.6px stroke, currentColor. Live in `design/icons.jsx`. Build new icons in this system; never grab from a generic icon font.

10 · BRAND MARKS

## One product, four agents.

The product mark is the AgentDeck aquarium icon — a full-color illustration that ships with the App Store build and lives in the Dock. The agent marks are the real brand SVGs of each upstream tool (Claude Code, Codex, OpenClaw, OpenCode), used wherever a session is identified. We do not redraw or stylize them; they keep their own brand color from `data.js → AGENTS`.

Product mark · App Store icon

### AgentDeck — the aquarium.

Full-color illustration. Used at 1024² for the App Store, 512² / 256² / 128² in the Dock and bundle, and as the splash on every hardware surface during pairing. Ships in the bundle as `AppIcon.icns`; PNG export lives at `design/brand/agentdeck-icon.png`.

96 · 64 · 40 · 24
Agent marks — used at session level, in menubar V3/V4, on hardware tiles

Source SVGs in `design/brand/*.svg`; tinted at runtime via `currentColor` in `creatures.jsx`. Brand colors come from `data.js` and are the only saturated reds/blues allowed in the system.

11 · HARDWARE SURFACES

## Build for the panel.

AgentDeck runs on real surfaces with real pixel grids. Treat each as a constraint to celebrate, not work around.

12 · DON'TS

## Keep it honest.

A short list of things that look like good ideas but break the system.

No pure neutralsDon't use `#fff` or `#000`. Use `--tide-50` and `--ink-900`.
No third typefacePlex Sans + JetBrains Mono. Display fonts for headers are forbidden.
No animated kelp/coralOnly amber pulses. If you're tempted to animate kelp, stop.
No drawn hardwareReal photography or the placeholder pattern. Never a hand-drawn SVG of a device.
No emoji in product UIUse the icon set or creature marks. Emoji is for chat, not chrome.
No background gradientsOne exception: the radial glow under the hero visual.
No centered long copyThe lede stays left-aligned, max 60ch.
No drop shadows on textType carries its own weight. Shadows are for cards.