# Reading Room — design direction

**Date:** 2026-04-10
**Status:** approved direction; informs the v1 web UI implementation

## Premise

Books is a personal book server, used by one person, on a quiet weekend. It
shouldn't look like a SaaS dashboard, an admin console, or "AI slop". It
should look like the interior of a well-printed book that happens to be
navigable.

The orbit design system commits hard to monospace ("Iosevka for
everything"). Books takes the same approach with the opposite material: a
single literary serif used for every text element on every page. No
sans-serif chrome. No rectangular buttons. No boxes around inputs.

## Type

**Single typeface: Newsreader** (Production Type, OFL, free via Google
Fonts, self-hostable). Used at every size and weight. Optical sizing where
appropriate.

Why Newsreader and not the obvious choices:

- **Not Lora / Merriweather / Playfair Display** — those are the default
  "blog serif" choices and feel generic.
- **Not EB Garamond** — too historical, drifts toward "novelty period set".
- **Not Source Serif / IBM Plex Serif** — they read as corporate
  documentation, not literature.
- Newsreader was designed by Production Type *for screens*, with multiple
  optical sizes (16, 20, 36, 72) so headings and body text use different
  cuts. The italic is genuinely beautiful and has small-caps. It's
  characterful without being precious. Free, self-hostable, not yet
  overused.

Sizes follow a small classical scale (1.125 ratio): 0.875rem, 1rem,
1.125rem, 1.265rem, 1.424rem, 1.602rem, 2.027rem, 2.566rem. Used at
optical-display cut for h1/h2, optical-text cut for body and small.

Italic and small-caps carry semantic load: italic for editorial annotations
(book series, language tag, "added 3 days ago"), small-caps for field
labels in forms and metadata blocks.

## Color

Light by default; dark mode via `prefers-color-scheme`.

| token            | light            | dark             | role                                              |
|------------------|------------------|------------------|---------------------------------------------------|
| `--paper`        | `#f4efe3`        | `#1a1612`        | page background — warm aged paper / printing ink  |
| `--paper-soft`   | `#e9e1cd`        | `#221d18`        | rule lines, table stripes, secondary surfaces      |
| `--ink`          | `#1a1612`        | `#f0e8d6`        | primary text — printing ink / cream               |
| `--ink-soft`     | `#5a4e3e`        | `#b8a989`        | secondary text, marginalia, captions              |
| `--margin`       | `#a89880`        | `#6d5e48`        | rule lines, dividers, very quiet structure        |
| `--stamp`        | `#7a1e1e`        | `#b04545`        | the only accent — link hover, active state, edits |

The accent is a deep oxblood red, used **only** on hover/active and on
"active" markers (currently selected book, unsaved changes indicator). It
should feel like an ex-libris stamp on the page, not a button color.
Everything else is ink on paper, no exceptions.

## Layout

- Generous side margins. Reading column ~36rem max. Library list and
  the kobo / errata pages allow wider columns (~52rem) but never
  edge-to-edge.
- **Hanging indents** for all entry-style content (library list,
  errata list). The author/title hangs left, the metadata flows right.
- Asymmetric: covers float left of book detail; metadata flows around them.
- **Drop caps** on book detail descriptions — the first letter of the
  description is set in 4-line display Newsreader, weight 200, in `--ink`.
- **Marginalia** style for tertiary metadata: page numbers, file size,
  added date — set in italic, smaller, in `--ink-soft`, positioned in the
  outer margin where possible. On narrow viewports they collapse inline.
- **Rule lines** for separation — never boxes, never shadows, never
  rounded rectangles. A 1px `--margin` rule below a heading or between
  entries is the only structural device.

## "There is no UI"

Specific anti-patterns the design refuses:

- **No buttons.** Actions are text links with an `Edit →` affordance.
  Form submit is a single `Save` link styled identically to a body link.
- **No input boxes.** Form fields are bottom-bordered only — `border:
  none; border-bottom: 1px solid var(--margin)` — and inherit the body
  font fully. The cursor visibly enters the page text.
- **No card containers.** Books, the kobo, errata are just text
  blocks with hanging indents and rule separators.
- **No header at all.** No site name on the page, no nav bar, no folio
  band. The entire site chrome is a single quiet dropdown fixed in
  the top-right corner — italic Newsreader trigger, custom panel of
  italic links, no native browser chrome. Page identity is carried by
  the content itself: a library list IS the library, a book heading
  IS the book.
- **No icons.** Anywhere. Not for nav, not for actions, not for status.
  Words and italics carry the meaning.
- **No badges.** Tags appear as italic small-caps inline.

The above intentionally creates friction for any future feature that wants
to look "appy". When that happens we revisit the design rather than
sneaking a button in.

## Components needed in v1

- **Page nav** — a single fixed-position dropdown in the top-right
  corner of every page. Italic Newsreader trigger in `--ink-soft`,
  chevron rotates 180° on open, custom panel of italic links on aged
  paper. The entire navigation surface for the site. No top header,
  no logo, no site title visible on a page. JS in `nav.js`.
- **Book entry** — used in the library list. Hanging indent. Title in
  text-cut Newsreader, author below in italic, series and added-date in
  marginalia.
- **Library list** — vertical stack of book entries with rule separators.
  Search bar at top is a single underlined input with placeholder "find a
  book…".
- **Cover** — book detail page only. Naked image with a 1px `--margin`
  border (no shadow, no rounded corners, no card). Floats left of the
  metadata block.
- **Drop cap** — first character of the book description, oversized
  display Newsreader.
- **Marginalia block** — a small floated block of italic small-caps
  labels and values, positioned in the outer margin on wide screens,
  inline on narrow screens.
- **Edit form** — bottom-bordered inputs, no labels above (instead, label
  is the input's `placeholder` shown in `--ink-soft` italic, persisted as
  a tiny italic caption above when the field has content).
- **Kobo block** — single page that shows your one Kobo: name in
  italic display Newsreader, full sync URL rendered as monospace
  within a serif page (the only break from the serif-only rule,
  justified because it's a literal URL and must be copy-paste-clear),
  last seen time in italic small-caps marginalia, regenerate-token
  link beneath.
- **Marginalia link** — text link styled with a low underline; on hover,
  the underline thickens and the color flips to `--stamp`.

## Out of scope

- Component library / npm package — not needed; this is one app.
- Storybook / interactive doc tooling — `design/index.html` is the
  styleguide; that's all.
- Iconography, illustration, photography.
- Animation framework. The only motion is hover-state colour transitions
  (~120ms ease-out). No page-load reveals, no scroll-triggered effects —
  this is a quiet interface, not a portfolio.