---
version: alpha
name: After Hours Reading Room
colors:
  primary: "#202025"
  paper: "#F5EEDC"
  signal: "#F4B9D1"
  quiet: "#5A5860"
typography:
  heading:
    fontFamily: Georgia
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Arial
    fontSize: 16px
    lineHeight: 1.6
spacing:
  paragraph: 16px
  section: 48px
rounded:
  paper: 0px
  action: 20px
components:
  button-primary:
    backgroundColor: "{colors.signal}"
    textColor: "{colors.primary}"
    rounded: "{rounded.action}"
    padding: 16px
---

## Overview
An independent reading room for people choosing one essay to read now. The visitor needs an excerpt, its reading time, and a clear way into the full essay.

## Colors
Signal green identifies the single primary action in the current reading context. Paper is the article surface; quiet text is supporting information on paper.

## Typography
Use the heading face for essay titles and the body face for running prose. Keep supporting labels in the body face; a third typeface is unnecessary.

## Layout
On desktop, lead with one excerpt, followed by its title and reading time. Keep a separate narrow reading queue alongside the excerpt. On a phone, move the queue after the excerpt; do not collapse it into an icon.

## Elevation & Depth
Use surface contrast and whitespace. The reading queue is subordinate to the active excerpt and does not need a floating shadow.

## Shapes
The article surface has square corners. Only the primary reading action is rounded.

## Components
The primary button opens the complete essay. Its label names that action. Secondary essay choices are plain text links in the queue.

## Do's and Don'ts
Do keep the title and reading time visible before the primary action. Do not put every essay into an equally prominent card. Do preserve a visible keyboard focus indicator and descriptive links.