design system
Books is a personal book server. The design language is called Reading Room — a serif-only interface that reads like the interior of a well-printed book. One typeface throughout (Newsreader), ink on aged paper, no rectangular chrome. See specs/2026-04-10-reading-room.md for the rationale.
Newsreader by Production Type, used at every size and weight. Display optical size for h1–h2 and folio; text optical size for everything else. Italic and small-caps carry semantic load — italic for editorial annotations, small-caps for field labels.
Body paragraph at 1.0625rem, leading 1.55. The type is
Newsreader Text, with italic for emphasis, the
odd inline link, and the occasional
code span set in JetBrains Mono — the only place
monospace is allowed, and only for literal strings the user must
copy verbatim.
Marginalia text — captions, page numbers, file sizes. Set in italic, smaller, in a faded ink colour.
The accent (stamp) is used only on hover, focus, and "active" markers. Everything else is ink on paper.
An inline link in a paragraph. Hover to see the underline thicken and the colour switch to the stamp red.
"I may not have gone where I intended to go, but I think I have ended up where I needed to be." A short pulled quote, set in italic with a faint left rule.
The address you paste into your Kobo is a literal URL like
https://books.fismen.no/api/kobo/abc123… — that's
why monospace is allowed in this one specific place.
[OneStoreServices]
storeURL=https://books.fismen.no/api/kobo/abc123def456/v1/| title | author | added |
|---|---|---|
| The Long Dark Tea-Time of the Soul | Douglas Adams | 3 days ago |
| Cloud Atlas | David Mitchell | last week |
| The Goldfinch | Donna Tartt | last month |
Inputs are bottom-bordered only — no boxes, no rounded corners, no fill. The cursor enters the page as if it were body text. The bottom rule turns stamp when focused.
A thin strip at the top of every site page. Three italic nav links on the left — shelf, library, errata — and an + upload action on the right. No background, no wordmark, no hamburger. Just the words, a paper-soft rule underneath, and breathing room before the page content starts.
The active nav link is inked (not soft) and carries a thin
stamp rule directly under the word; hover is stamp colour
without the rule. The upload action matches the nav-link
voice — italic, ink-soft, hover stamp — but never carries
the is-current state because it's an action,
not a destination. Clicking it opens a native file picker
(no dialog, no dropzone) and the chosen .epub
runs through the same importer pipeline that watches the
inbox directory.
Supersedes the earlier "there is no header, just a
dropdown in the corner" decision. The design system's
.page-nav is now only used by the prototype
pages for their own chrome.
Markup:
<header class="site-header">
<nav>
<a href="/shelf">shelf</a>
<a href="/" class="is-current">library</a>
<a href="/errata">errata</a>
</nav>
<button type="button" class="site-header-action">+ upload</button>
</header>
Destructive actions are two-click, not modal. The button
starts as an ink-soft "delete book" link. One click arms it:
the word turns stamp-coloured and gains a "really?" prefix
for 5 seconds. A second click confirms. Otherwise it quietly
reverts. The book row stays in the database (so Kobo-side
removals still find the entitlement ID), but the epub and
cover files are moved out of the library tree to an
archived-books/ directory, making the deletion
reversible by moving the file back.
Resting: · Armed:
A holistic detective novel in which Dirk Gently must contend with the consequences of a refrigerator left to its own devices, a god of thunder who has run out of options, and a check-in desk at Heathrow Terminal Two. Set in a London where the trains do not entirely run on time, and the gods do not entirely keep their promises. Edit →
This is what a real page top looks like below the site header — content first, a single paper-soft rule between chrome and content, and no other boxes.
unsaved changes