68%
21
20
19
18
17
16
⌘K search & commands
UX Study · Wireframes · 2026
The shape of a
quiet journal.
A design study of a local-first journaling workspace — its anatomy, its token system, six wireframed screens, and the decisions and fixes that shape it. One mint accent on a near-black canvas; a serif for things you look at, a sans for things you read.
Dark by default
6 borderless surfaces
Serif / sans hierarchy
Scroll
01 — ANATOMY
A page laid on a desk
The frame is four planes. The writing surface is inset against a darker canvas behind a single rounded top-left corner, so the page reads as paper on a desk. Separation is done by surface value — almost never by lines.
canvas · #0a0a0c
chrome · sidebar 248 · nav 52
writing surface · r 14 top-left
timeline rail · 150
overlays
search · focus · pomodoro
z0
Canvas — the desk
#0a0a0c grounds everything. The sidebar sits directly on it; overlays like Focus return to it.
z1
Chrome — sidebar 248 · nav 52
A flat journal list, three nav rows, a streak chip. The nav keeps the same right-hand cluster on every screen.
z2
Writing surface — one rounded corner
The content column is inset with a single 14px top-left radius against the canvas, so the page reads as paper laid on a desk.
z3
Timeline rail — a scrollbar for time
150px, one row per day, dots for volume, a draggable scrubber. Narrow screens lose it before they lose the writing.
z4
Overlays, not routes
Search, Focus and Pomodoro open over the screen you are on. None of them costs a scroll position or a draft.
02 — THE SYSTEM
One place where colour is decided
Six neutral surface steps, a five-step text ramp, and a single saturated accent used as a tint for state — a solid fill is reserved for commit actions only.
Surfaces — borderless steps
s1
s2
s3
s4
s5
s6
Hover is one step up, pressed two. Most separation in the app is value, not line — the 1px border appears only on dialogs, cards and the composer’s top edge.
Accent — tint for state, fill for commit
Mint
#5cefb6
Apricot
#f5b27a
Iris
#a8a6f7
selected row
active tool
Post
Two faces, two jobs
Aa Porpora 400 — titles & figures
Aa Inter — everything you read or click
32 / 30 screen titles · serif
14.4 entry body · 1.45
13 the app’s true body size
10.5 uppercase labels · +0.06em
Radius — rectangles use tokens, circles use 90px
card 14
lg 11
md 9
sm 8
xs 6
pill 20
90 · dots
Anything conceptually a dot — entry balls, mood swatches, the goal ring, pomodoro dots — takes the literal 90px.
03 — SCREENS
Six wireframes
Low-fidelity structure only — bars for text, dots for accents. Hover a frame to inspect it in space.
/journal/[name]
The bead-and-thread stream. Each entry hangs off a coloured ball; the highlight colour flows into the thread line. The composer is always present and already focused on arrival — zero clicks to write.
Your journals
›
›
›
New journal
Open a folder…
/journals
A 400px column. Solid accent for the commit; dashed for the secondary. “Recently deleted” lives here too — recovery where it still works.
Insights
176
entries
12
day streak
41k
words
68%
goal today
14 weeks
/insights
Derived, never stored — every figure is a memo over the entries, so it can’t drift from the writing it came from.
Planner
In progress
4
Due
2
Inbox
9
Done
31
thread ↗
thread ↗
Add a task…
/planner
Tasks and entries are one system: a task’s thread chip arms the composer, and the entry it produces counts toward it.
⌘K palette
A 60px field defined by its own space — no border, no rule. Marked terms in accent; selecting scrolls the stream to the entry.
Focus · Morning pages
esc
318 / 500
Post
focus overlay
The extreme of the density scale: a bare 620px textarea at 20/1.6 on an empty canvas. An overlay, not a route — it never costs a draft.
pomodoro overlay
A conic dial with a breathing halo, the clock in the serif, phase dots, and a picture-in-picture portal so it survives leaving the tab.
→
proposed · ≤909px
The C-1 fix: below 909px the sidebar becomes an off-canvas drawer over a scrim instead of display:none — journal switching survives on a phone.
04 — FLOWS
From landing to first entry
The first-run funnel, and what every common task costs in clicks once you are inside.
01 · /
Landing
Light page; “Start writing” is the only ask.
›
02 · /journals
Picker
Empty state becomes a numbered three-step onboarding.
›
03 · /new-journal
Create
A live preview of the row this journal will become.
›
04 · /journal/[name]
Workspace
Composer already focused; illustration above it.
›
05 · Enter
First entry
Posts to the top of the stream; the timeline gains a dot.
0
Write an entry
composer is already focused
1
Switch journal
sidebar row
1
Reply to a thread
hover · add another entry
1
Open Focus / Planner
nav or sidebar
2
Highlight an entry
ball → colour
2
Export a journal
⌘K → command
3
Create a journal
+ → name → create
3
Delete a journal
⋯ → delete → confirm
05 — MOTION & STATES
One curve, everywhere
The house transition is ease-in-out 120ms — about 90 occurrences. These tiles are live; try them.
Hover — one surface step up
hover me · press me
Rest s2 → hover s3 → pressed s5. Never a border, never a shadow.
Selection — tint, never fill
Morning pages
Work log
Reading notes
A solid accent fill would need a matching foreground in both themes; a tint never does.
Destructive — armed, not hovered
Delete entry
Held open by state rather than hover — a question waiting for an answer, not a slip of the mouse.
Micro — ticks & swatches
14
15
Timeline ticks grow 20→25px; mood swatches scale 1.12. Small, constant, everywhere.
06 — DECISIONS
What each choice solves
01
The composer is always focused
Arriving in a journal, the cursor is already in the box. The first action is writing, not finding a New button.
solves — the blank-page tax
02
The thread is a real object
Ball, coloured line, connector — the highlight colour flows from the ball into the line, rendering “one continuing thought” without a label.
solves — the flatness of a chronological log
03
Tasks and entries are one system
A planner task arms the composer; the entry that answers it counts toward it. The plan and the writing stay honest with each other.
solves — the planned / written split
04
Insights are derived, never stored
Every figure is computed over the entries on the fly. A stored number can only ever drift from the writing it came from.
solves — stats that lie
05
Tint for state, fill for commit
Selection, the active tool and the current filter all use the accent as a tint. A solid accent fill appears only on Post, Create and Save.
solves — accent inflation
06
Recovery lives where it still works
“Recently deleted” appears in Settings and on the picker — the one screen that remains after everything else is gone.
solves — undo trapped inside the thing you destroyed
07 — PRIORITIES
Five fixes before anything new
CRITICAL
No way to switch journals on a phone
Below 909px the sidebar is display:none and the reveal button never renders. Make it an off-canvas drawer over a scrim, and add a “Switch journal” command to the palette as a stopgap.
HIGH
Finish the command palette
It advertises five shortcuts that don’t exist and has no arrow-key navigation. Implement the handlers or drop the hints; add ArrowUp / ArrowDown / Enter.
HIGH
Bring three leaked colour systems onto tokens
Undefined Radix variables, off-system default highlight hexes, and hardcoded editor colours that visibly break the light theme.
HIGH
Respect reduced motion, fix the tab order
Add the global prefers-reduced-motion override and MotionConfig, and replace the positive tabIndex on every entry ball with 0.
MEDIUM
Make editing visible, give toasts a home
A pencil in the entry’s hover cluster instead of a secret timestamp button; a fixed aria-live toast region with an undo slot instead of text inside the nav bar.
back to writing →
UX study · wireframes are structural, values are from the live token system · 2026