§ 1

Principles

1. Reading first.

   The body text is the design. Justified setting, drop caps, ornament — out.

2. Monochrome.

   Near-neutral paper, near-black ink, graded greys. The brand has no chromatic accent.

3. Two typefaces.

   EB Garamond for prose; Inter for chrome. Both via Bunny Fonts.

4. Square corners.

   Every --radius token resolves to 0.

5. Borders, not fills.

   1 px borders by default. Filled surfaces only on hover or for the primary CTA.

6. One scale.

   One spacing scale, one type scale, one motion set. Variants are the exception.

7. Mobile-first.

   44 × 44 px tap targets. Inputs at 16 px+ to stop iOS zoom.

§ 2

Wordmark

§ 3

Color

Nine tokens. The first six form a near-neutral ladder from paper to ink; the last three are border treatments and the focus ring. Dark mode mirrors them, with both directions verified WCAG AA. Hover any tile to see it in use against paper.

• Aa

  Paper

  var(--paper)

  Hex

  #F6F5F1

  RGB

  246 245 241

  Default page background

• Aa

  Paper alt

  var(--paper-alt)

  Hex

  #EEEDE7

  RGB

  238 237 231

  Sections, cards, footer

• Aa

  Surface

  var(--surface)

  Hex

  #FFFFFF

  RGB

  255 255 255

  Card faces, inputs

• Aa

  Ink

  var(--ink)

  Hex

  #111111

  RGB

  17 17 17

  On paper

  17.8 : 1 AAA

  Body text, headings, links

• Aa

  Ink soft

  var(--ink-soft)

  Hex

  #333333

  RGB

  51 51 51

  On paper

  11.8 : 1 AAA

  Secondary text, leads

• Aa

  Ink muted

  var(--ink-muted)

  Hex

  #5A5A5A

  RGB

  90 90 90

  On paper

  6.4 : 1 AA

  Captions, eyebrows, meta

• Aa

  Border

  var(--border)

  Hex

  #908E83

  RGB

  144 142 131

  On paper

  3.0 : 1 UI

  Dividers, card outlines

• Aa

  Border soft

  var(--border-soft)

  Hex

  #D5D3C9

  RGB

  213 211 201

  Inner separators

• Aa

  Focus

  var(--focus)

  Hex

  #1E6AE8

  RGB

  30 106 232

  On paper

  5.0 : 1 AA

  Keyboard focus ring

§ 4

Typography

Two faces. EB Garamond for prose; Inter for chrome. Every size below is a token; never a raw rem.

Type scale

EB Garamond

Inter

Italic — for content, never chrome

§ 5

Iconography

A single Brady-Handy portrait of Paine, cropped to the face, drives the entire icon set. Vector master at favicon.svg; rasterised PNGs at common pixel densities cover legacy and platform-specific contexts.

• 

  favicon.svg

  /assets/img/favicon.svg Modern browsers — scales infinitely
• 

  apple-touch-icon.png

  /assets/img/apple-touch-icon.png iOS home-screen, 180 px
• 

  favicon-512.png

  /assets/img/favicon-512.png Android Chrome PWA install
• 

  favicon-192.png

  /assets/img/favicon-192.png PWA install (standard)
• 

  favicon-32.png

  /assets/img/favicon-32.png Browser tab, retina
• 

  favicon-16.png

  /assets/img/favicon-16.png Browser tab, standard
• 

  favicon.ico

  /favicon.ico Legacy browser auto-probe
• 

  og-default.jpg

  /assets/img/og-default.jpg Default Open Graph card · 1200 × 630

Run node scripts/render-favicon.mjs to regenerate the PNG set from src/assets/img/thomas-paine.jpg.

§ 6

Spacing

Nine steps, named not numbered. Use the token; never a raw rem.

• --space-3xs 0.25rem Hairline gap between siblings of the same word
• --space-2xs 0.375rem Tight chip gap
• --space-xs 0.5rem Inline gap, button gap
• --space-sm 0.75rem Small block padding
• --space-md 1rem Default block padding
• --space-lg 1.5rem Card padding, section internal gap
• --space-xl 2.5rem Section vertical breathing room
• --space-2xl 4rem Major section break
• --space-3xl 6rem Page-ending breathing room

§ 7

Radius & shadow

Square corners are the brand. The only allowed radius is the pill on chips and small badges. Shadows are reserved for the live-mode lift on hover and floating UI (modals, tooltips).

§ 8

Motion

One easing curve, two durations. Motion respects prefers-reduced-motion across the site.

§ 9

Buttons

Two variants — outline (default) and primary (filled). One small modifier. Every button meets 44 × 44 px tap target. Labels in plain Title Case, no trailing arrows.

<a class="btn">Read the Speech</a>
<a class="btn btn--primary">Subscribe</a>
<a class="btn btn--sm">View</a>

Tooltips (data-tip) are reserved for icon-only buttons and glossary terms. Text-labelled buttons let the label speak for itself.

§ 10

Chips

Filter chips on /works/. Pill-padded sans buttons; ink-on-paper inverts on hover.

• Lecture21
• Essay51
• Reply13

<ul class="form-chips">
  <li>
    <button class="form-chip">
      <span class="form-chip-label">Lecture</span>
      <span class="form-chip-count">21</span>
    </button>
  </li>
</ul>

§ 11

Badges & tags

Outline pill, small caps. Used on work meta-rows, archive lists, and topic surfaces.

<span class="badge">Volume 1</span>
<span class="tag">Agnosticism</span>

§ 12

Cards

One card. No colored top border, no shadow by default. Border darkens on hover.

§ 13

Stat tiles

Display numeral, sans-uppercase label, italic-serif sub. For at-a-glance figures.

• 177 Works in full Every piece in the canon, transcribed.
• 12 Octavo volumes Farrell, 1900–1902.
• 1,528K Words in the canon 113 hours at 225 wpm.

§ 14

Blockquote & pullquote

Blockquote for inline quotations; pullquote for editorial emphasis on essay pages.

An honest God is the noblest work of man.

§ 15

Forms

16 px font size minimum (stops iOS zoom-on-focus). Visible focus ring. Real <label> on every input.

§ 16

Alert

Inline message for transient state — used on contact thank-you, build-time notices, and unconfigured-feature placeholders. Border-left rule for hierarchy; never colored fills.

§ 17

Voice

Direct. Plain. First person. I write the way Paine wrote — short sentences, ordinary words, occasional wit, no irony as a shield.

Voice attributes

Authoritative, not bombastic

The corpus speaks for itself; the editorial layer points at it. I describe Paine's actual standing in his own time and let the reader judge.

Plain, not folksy

No Twain impersonation. Short sentences, ordinary words.

Specific, not aspirational

"177 works across four volumes" beats "a vast collection." "The 1872 Cooper Union speech" beats "a famous early lecture."

Apparatus-aware

Page-meta, breadcrumbs, attribution lines read as scholarly apparatus, not marketing. Cite-meta is small caps and muted, never bold and centred.

§ 18

Rewrites

Concrete before/after — the kind of edit the voice rules produce in practice.

§ 19

Punctuation & numerals

Quotes

Curly ("like this"), apostrophes ('), never straight.

Dashes

En-dash for ranges (1833–1899). Em-dash for parenthetical breaks — like this — with no surrounding spaces.

Copyright

©, never "(c)".

Dates

"Month DD, YYYY" (April 26, 2026), never numeric.

Numerals

Spell out one through nine; digits for 10 and up. Commas in 1,000+ numbers.

Spelling

American English throughout (color, organize, recognize, license for both noun and verb). Editorial copy is the boundary; Paine's transcribed prose is preserved verbatim, period spellings and all (shew, connexion, to-day, despatch). Code identifiers and product names follow upstream conventions.

§ 20

Accessibility — the floor

Anything below this floor is a bug.

Contrast

4.5 : 1 for body text; 3 : 1 for headings ≥ 24 px. Current pairings are all above 8 : 1.

Touch targets

44 × 44 px minimum (--tap-target).

Keyboard

Every interactive element reachable, with a visible focus ring (--focus).

Images

Every image has alt text; decorative images use alt="".

Motion

Honour prefers-reduced-motion and prefers-color-scheme.

Forms

Every input has a real <label>; required fields use aria-required.

§ 21

What's been removed

Earlier drafts had three accent colours (navy, crimson, gold), three typefaces, drop caps on every essay, ornament glyphs in the hero and footer, decorative gradient rules, multiple card variants, eight button modifiers, and dark inverse hero sections. All of it gone. If a future page needs decoration, it has to justify itself against the principles in § 1 first.