Literary Longform Interface

# Literary Longform Interface

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#1f2933` |
| secondary | `#6b5c53` |
| accent | `#8b2332` |
| background | `#f4efe8` |
| surface | `#fbf8f3` |
| text | `#1c1917` |
| muted | `#6a625b` |
| border | `#c9bfb2` |
| error | `#b42318` |
| success | `#2f6b45` |
| warning | `#9a6700` |
| info | `#355c7d` |

### Typography

- **Heading Font**: Newsreader
- **Body Font**: Source Serif 4
- **Mono Font**: IBM Plex Mono
- **Base Size**: 18px
- **Scale Ratio**: 1.2
- **Line Height**: 1.72
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,600;6..72,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 20px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(28,25,23,0.04)
- **Md**: 0 12px 30px rgba(54,42,34,0.08)
- **Lg**: 0 24px 60px rgba(54,42,34,0.12)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm off-white panels with faint inset tinting and occasional drop caps or folio rules
- **Bg Pattern**: lines

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline editorial rules with occasional double-rule dividers for section transitions

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Layout

### Grid

Use a three-zone editorial grid: left rail for issue context and navigation, centered article column for continuous reading, and right rail for notes, stats, and saved highlights. On smaller viewports collapse rails beneath the article while preserving rule-based sectioning.

### Breakpoints

Desktop around 1440px shows full three-column reading room; tablet around 768px compresses to article plus stacked utility modules; mobile around 375px becomes a single reading column with sticky top controls and full-width panels.

### Whitespace

Keep oversized top margins, generous paragraph spacing, and broad outer gutters so the article feels calm and premium instead of crowded.

## Guidance

### Do

- Use serif typography for all longform reading surfaces and reserve mono labeling for metadata and controls.
- Express structure with rules, spacing, and measure before resorting to filled boxes or heavy shadows.
- Let annotations, notes, and reading tools feel adjacent to the story, never louder than the prose itself.

### Don't

- Do not turn the page into a generic component gallery or analytics dashboard.
- Do not use saturated accent colors as large backgrounds behind continuous reading text.
- Do not widen body copy so far that the reading measure loses literary intimacy.