Design system
Every primitive, every theme
Tokens
Same names as the Harmony IDE
Surfaces
--bg
--bg-inset
--bg-muted
--bg-overlay
--wb-canvas
--wb-island
--border
--border-strong
Text
--fg
--fg-muted
--fg-subtle
Semantic
--accent
--success
--attention
--danger
--done
--severe
Spectrum
--spectrum-1
--spectrum-2
--spectrum-3
--spectrum-4
--spectrum-5
--spectrum-6
Typography
Hubot Sans for display, Mona Sans for UI
Many voices. One room.
Display 24 — page and card titles
UI 14 — body copy and controls read in Mona Sans, 13 to 14 px.
Small 12 — meta text uses the muted foreground. Numbers are tabular: 0123456789
Eyebrow 11 — uppercase, tracked, subtle
Mono 13 — src/auth/session.ts
Buttons
Green primary, quiet default, ghost, danger
Variants
Sizes
States
Icon buttons
Badges, chips, avatars
Tinted dot and word, never a solid pill
BadgesAccentSuccessAttentionDangerDoneNeutralIn harmony
SizesSmallMediumLargeNo dot
Chipssrc/auth/session.tsbackend
Avatars
Status
Stack
Agent statusThinkingEditingWaitingPausedOfflineConflict
Dots
Controls
Segmented, stepper, kbd, tooltip
Segmented
Stepper
- InstallOne command
- ConnectEnter the code
- Share a preview
KbdCtrlKShift↵Esc↑↓
Code block
Copies, then says so
connect
npx @ovear/chorus connect 7K3M-9QX2https://example.test/i/Zk3bQ0wF1Toasts, dialog, palette
What happened, who, what next
Toasts
Overlays
Islands, skeletons, motion
Surfaces stay flat; motion stays small
An island
Live
Cards sit on the canvas with a hairline border. No heavy shadows.
Loading lanes
Springs: snappy 520/38, gentle 220/26, bouncy 420/18, layout 380/34. Durations: fast 90 ms, med 180 ms, slow 320 ms. Reduced motion keeps opacity only.