Design system

The desktop app and the cloud dashboard share a single design system: a tokens package (packages/tokens/tokens.css, the source of truth) plus shared React components (packages/ui), with dark and light resolved at the CSS-variable level. Nothing is hardcoded per mode — same token names in both themes.

Principles

Calm and low chroma — lots of space, little decoration.
Three fixed panes — sessions · conversation · files/changes/checks.
First-class dark and light — same tokens; nothing hardcoded per mode.
Monospace for the technical — branches, paths, diffs, terminal.
State visible at a glance — agent and session state always legible.

Brand palette

A warm, low-chroma accent as the brand color; in light mode it darkens to keep contrast. Two modes, same token names.

Token	Dark	Light	Use
`--bg-base`	`#0E0E11`	`#FAFAF8`	App background
`--bg-surface`	`#16161A`	`#FFFFFF`	Panels, cards
`--bg-elevated`	`#1F1F24`	`#FFFFFF` + shadow	Menus, popovers
`--border`	`#2A2A30`	`#E7E4DE`	Borders and separators
`--text-primary`	`#ECECEF`	`#1A1A1D`	Primary text
`--text-secondary`	`#9B9BA2`	`#6B6B72`	Muted text
`--text-muted`	`#6A6A70`	`#9A9AA0`	Tertiary text / placeholders
`--brand`	`#7BA9C0`	`#5B8DA6`	Brand color / primary accent
`--brand-hover`	`#93BBCE`	`#4A7589`	Accent hover/active
`--accent-cool`	`#6FB1FF`	`#0B6BCB`	Links and cool info

Semantic colors

Token	Dark	Light	Meaning
`--success`	`#4ADE80`	`#15803D`	OK, verification passed
`--warning`	`#FBBF24`	`#B45309`	Attention, needs review
`--danger`	`#F87171`	`#DC2626`	Error, destructive operation
`--info`	`#60A5FA`	`#2563EB`	Informational, in progress

Diff colors

Key for the diff viewer — lines with +/− on green/red backgrounds:

Token	Dark	Light
`--diff-add-bg`	`rgba(74,222,128,.12)`	`rgba(21,128,61,.10)`
`--diff-add-fg`	`#4ADE80`	`#15803D`
`--diff-del-bg`	`rgba(248,113,113,.12)`	`rgba(220,38,38,.10)`
`--diff-del-fg`	`#F87171`	`#DC2626`

Light-mode values live on :root; dark mode overrides them under [data-theme="dark"].

Typography

UI: Inter (fallback system-ui). Weights 400 / 500 / 600. Token: --font-ui.
Mono (branches, paths, diffs, terminal): JetBrains Mono (fallback ui-monospace). Token: --font-mono.
Scale (px): h1 24/600 · h2 18/600 · h3 15/600 · body 14/400 · small 12.5/400 · mono 13.

Spacing, radii and surfaces

Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 (tokens --sp-1 through --sp-8).
Radii: sm 8 · md 10 · lg 14 · pill 999 (--r-sm, --r-md, --r-lg, --r-pill).
Separation: in dark mode, by border and --bg-elevated; in light mode, subtle shadow.
Iconography: Lucide, stroke 1.5.
Density: comfortable, with a dense sidebar showing diff counters (+N/−N).

Three-pane layout

The primary surface (Tauri desktop app) uses three fixed panes:

┌──────────────┬───────────────────────────────┬──────────────────────────┐
│ Sidebar      │ Conversation (center)         │ [All files][Changes][Checks]
│ Projects +   │ breadcrumb: repo > session    │ tree / diff / checks     │
│ sessions     │ session card + agent stream   │                          │
│ (with +N/−N) │ (markdown + tools)            │ ──────────────────────── │
│              │                               │ [Setup][Run][Terminal]   │
│ History      │ input: prompt / @mention /    │ bottom sub-panel         │
│              │ /commands · model picker      │                          │
└──────────────┴───────────────────────────────┴──────────────────────────┘
top-right: Create PR ▾  (Create draft PR · Create PR manually)

Sidebar — projects with their sessions, each showing branch and diff counters; a history section; a + button for a new session.
Center — repo > session breadcrumb, session card, agent stream, and an input with @mention, /commands and a model/effort picker in the footer.
Right — All files / Changes / Checks tabs on top; Setup / Run / Terminal sub-panel at the bottom; Create PR ▾ at the top right.

The cloud dashboard reuses the same tokens and base components, with a more admin-oriented layout: side navigation by sections and dense tables.

Session state colors

Each state of the session FSM maps to a visual signal built on the semantic tokens:

State	Visual signal	Notes
`running`	pulsing `brand` dot + “Running”
`awaiting_input`	`info` badge “Needs input”
`awaiting_approval`	`warning` badge “Needs approval”	destructive gate
`verifying`	neutral spinner “Verifying”	tests / QA / pentest
`ready_for_review`	`success` badge “Ready”
`merged`	dimmed `success` check
`discarded`	dimmed / struck-through, no color
`error`	`danger` badge “Error”

Motion, accessibility and performance

Subtle animation, ≤150 ms; always respect prefers-reduced-motion.
Target WCAG AA contrast in both modes; visible focus and keyboard navigation.
Virtualize long lists (sessions, file tree, agent streams); render large diffs incrementally and chunked, collapsing very large files by default. UI performance budgets live with the rest in the architecture overview.