v0.1 — interactive companion to docs/visual-spec.md
§1 — Accent comparison
spec §1.1
Four candidates side-by-side. Each card renders a primary button, a focus-ringed
input, and a selected row tint in its own accent — so you can compare them in
isolation. The global Accent control above switches the whole page to one of
these four for the §4 / §5 previews.
Petrol / Steel blue
#0F7AB8 · OKLCH 0.55 0.16 235
focused input
Selected row
Spec default — cool, recedes as row tint, distinct from error-red
Linear indigo
#5E6AD2 · OKLCH 0.55 0.17 280
focused input
Selected row
Familiar productivity look — risks reading as a Linear clone
Things sky
#2D8DD8 · OKLCH 0.62 0.15 240
focused input
Selected row
Lighter, friendlier — may read too consumer for editor workloads
Warm copper
#B66B2F · OKLCH 0.62 0.13 60
focused input
Selected row
Distinctive — risk of feeling "branded" rather than utility
What to compare: Switch the page Accent above and scroll to §5 (idioms) —
Spotlight focus ring, Dashboard KPI delta arrow, Wizard step dots, Photoshop
active-tool border. The accent appears in those places at the same time;
whichever combination still feels coherent across all of them wins.
Constraints to respect: single accent slot, must be ≥3:1 against
bg.canvas for non-text use, must be visually separable from
state.error.fg (which is in the 25° red range) for users with
red-green colour deficiencies.
§2 — Typography
spec §1.3
Same content rendered with Inter + JetBrains Mono (spec default, left) vs.
system / SF Pro + SF Mono on macOS (right). Watch the data-table column,
the digit shapes, and the proportional spacing in the headline.
Inter + JetBrains Mono
Three people are under budget — Anna, Bernd, Cara
Tier 2 resolved the highlight against canvas state. The previous
expansion of Anna's row survived the column-add patch.
Highlighted rows
Owner
Open
Budget left
Anna Schmidt
12
5.0 h
Bernd Lutz
8
7.5 h
Cara König
15
22.0 h
0 O · 1 l I · >= -> !=
System (SF Pro / Segoe) + SF Mono / Menlo
Three people are under budget — Anna, Bernd, Cara
Tier 2 resolved the highlight against canvas state. The previous
expansion of Anna's row survived the column-add patch.
Highlighted rows
Owner
Open
Budget left
Anna Schmidt
12
5.0 h
Bernd Lutz
8
7.5 h
Cara König
15
22.0 h
0 O · 1 l I · >= -> !=
Decision criterion: the data row should read as data, not as
decorative copy. The mono columns should pop against the surrounding sans copy
without shouting. Digit alignment via font-feature-settings: 'tnum'
is applied to both — but the glyph proportions still differ.
Inter+JBM gives you predictable cross-platform rendering (Electron paints
identically on macOS/Windows/Linux). System fonts give you native macOS feel
but require macOS to look the way you expect.
§3 — Spacing grid: 4pt vs 8pt
spec §1.4
Same table, same content, different grid. 4pt is the spec default — chosen for
editor-workload density (inspector field rows, toolbar buttons). 8pt would be
cleaner for non-editor workloads but forces fractional values in the editor.
4pt gridspec default
Owner
Open
Budget left
Status
Anna Schmidt
12
5.0 h
out of budget
Bernd Lutz
8
7.5 h
under budget
Cara König
15
22.0 h
ok
Daniel Roth
22
31.5 h
ok
Eva Weiß
6
2.0 h
out of budget
5 rows · 36px rows
8pt gridalternative
Owner
Open
Budget left
Status
Anna Schmidt
12
5.0 h
out of budget
Bernd Lutz
8
7.5 h
under budget
Cara König
15
22.0 h
ok
Daniel Roth
22
31.5 h
ok
Eva Weiß
6
2.0 h
out of budget
5 rows · 52px rows
§4 — Primitive gallery
spec §2 (all 24)
Each primitive in its default visual state. Editor-class primitives
(canvas-region,
timeline,
media,
vector-path)
are shown as theme-only chrome; full pixel mockups follow in spike phase.
text · heading
block copy + section title
Eyebrow label
Heading level 1
Heading level 2
Heading level 3
Body copy at type.body.
Caption-secondary follows.
Caption at type.caption
button
primary · secondary · ghost · danger; sizes; states
input
default · focus · error · multiline
Email looks incomplete.
choice
radio (inline) and dropdown (trigger only shown)
Option A
Option B
Option C
toggle
checkbox + switch variants
Off
On
list
single-select; hover, selected, focus
First item
Second item
Selected item
Keyboard-focused
Last item
table
numeric mono columns · highlight row
Owner
Open
Budget left
Status
Anna Schmidt
12
5.0 h
out of budget
Bernd Lutz
8
7.5 h
under budget
Cara König
15
22.0 h
ok
tree
hierarchy with carets; doubles as layer stack
▾ Adjustments
▸ Curves
▸ Levels
▸ Background
▸ Shadows
toolbar
action strip with separators + right-aligned primary
tabs
section selector with accent underline
Customer
Use case
Pricing
Document
status · progress
liveness + completion
3 sub-agents working
Last synced 14:23
Generating PDF64%
chart
bar chart — single accent series, restrained chrome
All five idioms rendered as actual layouts in the current theme. Note: none of
them visually mimic the era they reference. The Norton Commander idiom is
not blue with white text on black box-drawing characters — it is the
Omadia theme rendering the layout the agent inferred from a "norton
commander style" request.
Left: the skeleton-pulse animation (1400ms linear loop). Right: the patch-apply
accent-subtle highlight that fades out over 800ms. Click Replay patch to
retrigger.
Skeleton — loading state
Owner
Open
Budget left
Status
Patch-highlight — agent just updated this value
Open tickets
127
Budget left
342 h
800ms accent-subtle fade. Quiet enough for typing-speed patch streams,
loud enough to signal "this is new".
§7 — Open questions to lock
spec §9
The 8 questions flagged in visual-spec.md §9.
Now decidable with the previews above. Tell me which way each goes,
I update the spec, v0.2 ships.
1
Accent — Petrol / Indigo / Sky / Copper?
Switch the page Accent control above and watch §5 idioms simultaneously. The cards in §1 also show all four side-by-side.
2
Type families — Inter+JBM everywhere, or system fonts on macOS?
§2 side-by-side. Inter wins on cross-platform consistency, system wins on native macOS feel.
3
JetBrains Mono vs SF Mono / Plex Mono?
JBM is shown in §2 left and §1 metadata text. Watch the glyph-test line for digit / letter disambiguation.
4
4pt vs 8pt grid?
§3 — same table, both grids. 4pt is denser (Editor-friendly), 8pt is more spacious.
5
Button-in-flight: marquee dots, silent disabled, or accept a tiny spinner?
Not yet animated here. The spec's current call is marquee dots ("Sending."). Worth a follow-up preview if this matters.
6
Toasts forbidden — really?
Current answer: yes, background updates land as status primitives in a designated activity pane. Walkthrough 4 stress-tests this.
7
Patch-highlight duration: 800ms or shorter on rapid streams?
§6 right shows the 800ms version. Replay to retrigger. Imagine 5 cells changing per second — too loud?
8
Empty canvas — "Canvas ready. ⌘K to start." or nothing at all?
Not previewed visually (the screen would just be empty). Decision is purely whether the one-line caption helps first-time users.