RobinSinghAI Engineer · Interface
← Labs
The system, annotated
Bookmarkly
Design case study · The Press system
AUG 2026 · NO. 001
Case study · Bookmark manager for the desk, not the cloud

A bookmark manager set like a newspaper.

Cream paper, near-black ink, one red-orange accent, and no rounded corners anywhere. Elevation is a printed offset block, not a blur. Rules do the work that boxes do in other apps.

0
Rounded corners
1
Accent color
3
Typefaces, three jobs
8
Domain hues, one lightness
120ms
One duration, one curve
01 · Principles
Zero radii, everywhere

Every radius token exists and resolves to 0. The only round things are swatches, knobs and dots — deliberate exceptions.

Elevation is printed

A hard offset block, never a blur. Dialogs arrive by sliding off their own shadow.

Ink frames the paper

Sidebar and detail panel stay black in both themes — a masthead is black on every page of a newspaper.

One accent, one meaning

Red means the action or the live thing. Hover goes to ink, not lighter red — "more" has to mean darker.

02 · The workspace
238px · 1fr · 348px
Collection · Inside Reading list
Reading list
34
+ Save a link
EDITORIAL
LIST
INDEX
articles
videos
#typography
1 filter · clear
THIS WEEK
04
001
The lost art of the newspaper masthead
Before the grid, there was the rule — a history of…
fontsinuse.com · 2d
002
Local-first software, four years on
Your data on your device, sync as a convenience…
inkandswitch.com · 3d
003
Why perceptual color spaces matter
oklch, and the end of muddy olives next to neon…
evilmartians.com · 5d
128 LINKS·48.2 MB LOCAL·PREVIEWS: ON
NOT SIGNED INEXPORT NOW
← sidebar: --ink #141310, never flips with themetitle: 46px / 800 / −0.045emcards: no border at rest, gutter separatesstatus bar: 30px, permanently honest ↘
03 · One card, three temperaments
EDITORIAL — FOR BROWSING
014
Diamonds, not stars: marks in a square vocabulary
The favourite mark is a rotated square — it belongs to the same vocabulary as everything else, just turned.
shapejournal.net · 1w
LIST — FOR SCANNING
015
The reader owes you nothing
On earning attention one paragraph at a time…
016
Tabular numerals, a love letter
Numbers that change in place should never jitter…
INDEX — WHEN YOU KNOW WHAT YOU'RE AFTER
The lost art of the newspaper masthead2d
A dead link, struck through honestly404
Local-first software, four years on3d
a table without a table — no covers, no excerpts, strike-through for dead links
04 · Detail & command
MOVE · PUBLISH · REFRESH
001
The lost art of the newspaper masthead
fontsinuse.com/masthead-history
READ HERE
NOTE
Compare with the 1912 Times nameplate — the rule weights match.
typographyhistory
the panel rebinds paper token names to ink values —
a 25-line block re-themes the whole subtree, children included
/masthead
ALL
The lost art of the newspaper masthead↵ OPEN
Mastheads of the Weimar press
↑↓ MOVE↵ OPEN> COMMANDS#TAG · SITE: · IS:FAVORITE
THE ESCAPE STACK — ONE KEY ALWAYS UNDOES THE MOST RECENT LAYER
dialogreaderselectiondetailfiltersquery
05 · Color & type
PAPER · INK · ONE ACCENT
#f2efe6
#141310
#e6452b
EIGHT DOMAIN HUES · OKLCH(0.72 0.16 H) · HASHED FROM THE DOMAIN
≈accent!

One lightness, one chroma, eight hues — so no site lands on a muddy olive while another gets neon. Fetched covers sit over the block, never replace it: a missing image never changes what a card is.

THREE FACES, THREE JOBS
Headlines shout.BRICOLAGE GROTESQUE
800 · −0.045em
Anything read at length is set in serif, including this line.INSTRUMENT SERIF
400 · 19px/1.72 IN READER
https://urls-keycaps-and-ids.devJETBRAINS MONO
Interface furniture is the system sans — invisible at 11–13px, and it costs no font request.HELVETICA NEUE
SYSTEM · NO WEBFONT
4634262319161310 KICKER

Negative tracking scales with size: −0.025em at 15px, −0.045em at 46px. Positive tracking exists only on uppercase labels. Tabular numerals wherever a number can change in place — fourteen separate declarations.

06 · Decisions worth keeping
01
The status bar tells the truth without being asked

Storage size, network behaviour, days since export, sync state — permanently visible. The app's promise is "your data is only here," which is also its risk.

02
First run states the trade-off before you have anything to lose

"This device holds the only copy, so keep an export somewhere safe" — and names sync in the same breath.

03
"Still reading" is the only thing the app volunteers

Appears only with two or more half-read articles, disappears when you finish. It solves the read-later failure mode: things go in and never come out.

04
Publish state lives where the collection lives

A published row grows an accent link glyph in the sidebar — otherwise the one visible-to-others thing would be the one thing you can't see.

05
Orphaned highlights are kept, flagged, struck through

When edits remove the text underneath, the note stays at reduced opacity with an ORPHANED flag — the note is the user's writing.

06
The detail panel re-skins by rebinding token names

Paper tokens are rebound to ink values for one subtree — children that know nothing about the panel re-theme for free. The cheapest correct dark island.

07 · The five fixes that matter
CRITICAL
No navigation below 860px — and no way to get it back

The only sidebar toggle is the bare B key, and the collapsed state persists. Fix: a visible toggle in the header, an off-canvas drawer on small screens.

CRITICAL
Every secondary action hides behind hover

Touch has no hover — card menus, selection, the reader entry point all vanish. Fix: gate reveals on @media (hover: hover), show them otherwise.

HIGH
Permanent deletion is one click, silent, and the trash can't be emptied

Every other destructive path is protected. Fix: reuse the existing undo toast and confirm dialog, and wire the already-written empty-trash action to a button.

HIGH
Bookmarks are unreachable by keyboard

Cards take clicks but no focus. Fix: focusable cards with Enter/Space, and a focus-within reveal so keyboard users get what hover users already have.

MEDIUM
One domain hue impersonates the accent

Hue 24 renders a salmon block nearly identical to the Save button. Red is supposed to mean "action" — one domain in eight quietly borrows it. Fix: rotate the hue to ~350 or ~45.

TOKEN SHEET · EXCERPT
--bg-canvas: #f2efe6    --ink: #141310
      --accent: #e6452b       --accent-strong: #141310
      --shadow-modal: 8px 8px 0 var(--accent)
      --r-card … --r-pill: 0
      --dur: 120ms  --ease: cubic-bezier(0.16, 1, 0.3, 1)
"The frame is a constant, so switching themes changes the reading surface and nothing else."
BOOKMARKLY · PRESS SYSTEM · SET IN BRICOLAGE, INSTRUMENT & JETBRAINS