Paper

When to use it

Reach for it when the content is a document, an inscription or a chart of something historical. Warm sheet, dark ink.

Quoted from the live theme.css: these charts were dark, and dark was the wrong call. A black sheet with neon letters reads as a copy of the chart that suggested the form, however different the content. Paper is more honest to the material. Warm rather than white, because a cool white sheet reads as an interface and a warm one reads as a document.

Contract: document

A family is a set of token names plus structural rules. A variant is one set of values poured into them. Every variant below satisfies this contract, so swapping between them is a palette change, not a rewrite.

Required

Optional

Ink on a sheet, not foreground on a background. Load the theme file before the page stylesheet: theme owns color, page owns layout. This split is live at world-languages.com/shared/theme.css + page.css.

Variants

Same contract, different values. Click a swatch to copy it.

/* Paper (world-languages) */
:root {
  /* colors */
  --bg: #f4efe6;
  --bg-band: #ebe3d5;
  --surface: rgba(253, 251, 247, 0.97);
  --ink-bright: #17150f;
  --ink: #35312a;
  --ink-muted: #7c756a;
  --rule: rgba(53, 49, 42, 0.20);
  --accent: #1c5f9e;
  --btn-bg: rgba(253, 251, 247, 0.9);
  --btn-border: rgba(53, 49, 42, 0.18);
  --border: rgba(53, 49, 42, 0.22);
  /* structure */
  --sheet-width: min(1520px, 100vw);
  --sheet-compact: min(780px, calc((100svh - 120px) * 0.8), 100vw);
  --border-radius: 4px on controls, 5px on tooltips;
  --control-bar: position: fixed; bottom: 14px; centered; backdrop-filter: blur(6px);
}

/* Parchment */
:root {
  /* colors */
  --bg: #f6efe0;
  --bg-grain: #efe6d2;
  --surface: #fffdf7;
  --surface-2: #f3ead7;
  --ink: #2a2218;
  --ink-muted: #6b5d49;
  --ink-faint: #71634b;
  --accent: #c0341d;
  --accent-soft: #e8c9bf;
  --border: #e2d6bd;
  --gold: #b8860b;
  --atlas: #2f6f6a;
  --wiktionary: #8a7d63;
  /* structure */
  --radius: 16px;
  --safe-area: --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  /* effects */
  --shadow: 0 1px 2px rgba(42, 34, 24, .06), 0 8px 24px rgba(42, 34, 24, .08);
}

/* Heritage */
:root {
  /* colors */
  --bg: #f3efe6;
  --ink: #2d2d2d;
  --ink-muted: #5c5c5c;
  --accent: #8b0000;
  --surface: rgba(255, 253, 250, 0.90);
  --border: #d4c5b0;
  --axis-line: #5c4d3c;
  --stem-green: #2e3b1f;
  --flower-blue: #779ecb;
  /* structure */
  --radius: 4px;
  /* effects */
  --bg-gradient: linear-gradient(#edeae2, #d4d4d4, #6e7f8f);
  /* typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
}

Typography

The script-family posters load Noto Serif plus per-script faces (Noto Sans Phoenician, Noto Sans Old Italic, Uncial Antiqua, UnifrakturMaguntia) as content, not chrome.

Stacks

Spacing

Base unit 8px. Every gap, pad and margin is a multiple of it.

Do / Don't