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.