---
version: alpha
name: Reading Lamp
description: A dark mode that stops at a warm dim instead of black, a measure locked at 66ch, and exactly two controls.
meta:
  id: "theme-reading-lamp"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:19+09:00"
  updatedAt: "2026-09-02T00:58:19+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Size and warmth. That is the whole settings screen.
  bestFor: Long-form reading, e-books and serialised fiction, essays and archives, read-it-later, documentation prose
  avoidFor: Dashboards, media-rich magazines, anything with an interface to speak of
  defaultMode: dark
  surfaceStyle: flat
  accentUse: underline
  caseStyle: none
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 1
    duration: 400ms
    ease: "cubic-bezier(0.22, 1, 0.36, 1)"
    signature: "The warmth control cross-fades the whole page over 400ms, like a dimmer. It is the only animation in the system."
  displayFont: Crimson Pro
  displayKind: serif
  bodyFont: Crimson Pro
  monoFont: Cutive Mono
colors:
  background: "#F3E5E2"
  foreground: "#201510"
  card: "#DFD9D8"
  card-foreground: "#201510"
  popover: "#DFD9D8"
  popover-foreground: "#201510"
  primary: "#A36C7E"
  primary-foreground: "#110C0B"
  secondary: "#D1CAC9"
  secondary-foreground: "#201510"
  muted: "#D1CAC9"
  muted-foreground: "#625249"
  accent: "#484FB1"
  accent-foreground: "#FEF9F8"
  destructive: "#B6322D"
  destructive-foreground: "#FEF9F8"
  border: "#C5BFBD"
  input: "#C5BFBD"
  ring: "#A36C7E"
  chart-1: "#A4697D"
  chart-2: "#499585"
  chart-3: "#9F6260"
  chart-4: "#4A9C9F"
  chart-5: "#8D5C7E"
colorsDark:
  background: "#543C38"
  foreground: "#FFFFFF"
  card: "#564E4C"
  card-foreground: "#FFFFFF"
  popover: "#564E4C"
  popover-foreground: "#FFFFFF"
  primary: "#C88EA1"
  primary-foreground: "#140B09"
  secondary: "#675C5A"
  secondary-foreground: "#FFFFFF"
  muted: "#675C5A"
  muted-foreground: "#EED5C8"
  accent: "#9EACFF"
  accent-foreground: "#140B09"
  destructive: "#E45D53"
  destructive-foreground: "#140B09"
  border: "#796E6C"
  input: "#796E6C"
  ring: "#C88EA1"
  chart-1: "#BF8296"
  chart-2: "#519D8D"
  chart-3: "#CC8B89"
  chart-4: "#409396"
  chart-5: "#C792B7"
typography:
  display-lg:
    fontFamily: Crimson Pro
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Crimson Pro
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.24
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Crimson Pro
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.36
  body-lg:
    fontFamily: Crimson Pro
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.78
  body-md:
    fontFamily: Crimson Pro
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.76
  body-sm:
    fontFamily: Crimson Pro
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label-caps:
    fontFamily: Crimson Pro
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: Cutive Mono
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  numeral-xl:
    fontFamily: Cutive Mono
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 6px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 72px
  gutter: 24px
  margin: 40px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 12px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 12px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 24px
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.muted-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Reading Lamp

## Overview

Reading Lamp is for text and nothing else. It is the only theme in the library
built on the **deep register**: its dark mode ground sits at L 0.38 — a warm dim
— rather than the near-black every other dark theme uses. That is not a stylistic
preference. Pure white text on near-black produces halation for a large number
of readers, and the standard fix is to lower the text, which lowers contrast.
Raising the ground instead keeps the contrast and removes the glare.

The second commitment is a refusal: **the measure is locked at 66ch and there is
no full-width mode.** A reading app that offers a width control offers the reader
a way to make their own experience worse, and they will take it on a wide monitor.

There are exactly two controls in the entire application: size, and warmth.
Everything else — themes, fonts, justification, margins — has been decided.

It suits books, essays and archives. It is wrong for anything with an interface.

## Colors

A warm dim, not a black.

- **Ground:** near-white warm paper in light mode; in dark mode, **L 0.38** — a
  warm dim brown-grey, the colour of a page under a lamp rather than a screen in
  a dark room.
- **Primary (dusty red):** the one action colour. It appears on perhaps two
  elements per screen.
- **Accent (violet-blue):** an **underline** on links and footnote marks, solved
  to 3:1. Links are never a different colour from the body text — they are the
  body text with a rule under them, because coloured links in a paragraph of
  prose are a distraction the reader did not ask for.
- **Neutrals** step gently so the page has no visible structure at all.
- Charts do not exist in this system. The monochrome setting is nominal.

## Typography

Crimson Pro for everything, Cutive Mono for the few marks.

- **Display and body are one face.** Crimson Pro is an old-style serif drawn for
  screen reading, and it is here at **18px with a 1.76 line height** — the
  largest body size in the library by three points, and the loosest leading.
- **The measure is 66ch.** With 18px type that is about 660px, which is a book
  column, and it is not adjustable.
- **body-lg at 19px** is the reading size for the reader view; body-md at 18px is
  everything else. There is no small body text in the reading column.
- **Cutive Mono** carries the few identifiers this system has: chapter numbers,
  footnote references, timestamps in the archive.
- There is no uppercase anywhere. There are no caps labels in a book.

## Layout

**One column, 66ch, centred, and nothing beside it.** No sidebar, no table of
contents rail, no reading-progress bar down the edge. The chapter list is a
separate screen you go to.

Vertical rhythm is generous: 32px between paragraphs' sections, 72px between
chapter divisions. Margins are 40px and the column is centred in whatever is
left, which on a wide monitor means a great deal of empty space, deliberately.

Footnotes are inline-expandable in place, pushing the text down, because a
footnote in a popover cannot be read alongside the sentence it belongs to.

## Elevation & Depth

None. There are no cards in the reading view, no shadows in either mode, and no
borders except the 1px rule above a footnote block.

The only animation in the entire system is the warmth control, which cross-fades
the whole page over 400ms like a dimmer coming up. Page turns are instant.

## Shapes

Square-ish and irrelevant: 2px on the few controls that exist. There is
essentially no chrome to round.

Photography is warm-graded and rare — a frontispiece, an author portrait, a
plate. Images are full-measure width, never full-bleed, with a mono caption
beneath at 15px.

## Components

- **Reading column:** 66ch, Crimson Pro 19px/1.78, first paragraph after a
  heading not indented, subsequent paragraphs indented by one em with no space
  between them — a book, not a web page.
- **Link:** body colour with a 1px accent underline at 3px offset. Never a
  different colour.
- **Footnote:** superscript mono number; expands in place with a 1px rule above,
  set at 15px.
- **Size control:** five steps, shown as five short rules of increasing length.
  No numbers.
- **Warmth control:** a continuous slider from cool to warm that changes the
  ground and the text together, keeping contrast constant.

## Do's and Don'ts

- Do keep the dark ground at a warm dim rather than near-black.
- Do lock the measure at 66ch on every screen size.
- Do underline links instead of colouring them.
- Don't add a third control to the settings screen.
- Don't offer a full-width reading mode.
- Don't put a progress bar down the side of the text.
- Don't use uppercase labels anywhere.