---
version: alpha
name: New Runtime
description: >-
  Paper-and-ink editorial system for an evidence-linked AI newsroom and systems
  atlas. Cream paper, near-black ink, 1.5px rules, square corners, solid
  saturated fills, hard offset shadows, mono metadata. Light only.
omitted:
  - section: dark-mode-and-shadcn-residue
    reason: >-
      The site is light only (color-scheme: light). The `.dark` block, the
      `--sidebar-*` and `--chart-*` custom properties, and the `@theme inline`
      color aliases in src/styles/global.css are shadcn/ui install residue.
      No page toggles `.dark`, nothing renders a shadcn sidebar or chart, and
      none of these values are part of the identity. Do not document, extend,
      or design against them.
colors:
  paper: "#f4f2ec"
  ink: "#0f0f0e"
  primary: "#0f0f0e"
  background: "#f4f2ec"
  hue-blue: "#2546ff"
  hue-lime: "#c8f53c"
  hue-coral: "#ff5b3a"
  hue-coral-text: "#c93a1b"
  hue-violet: "#7256f5"
  hue-amber: "#ffb627"
  hue-pink: "#ff8fcf"
  signal: "#2546ff"
  surface: "#ffffff"
  surface-muted: "#e9edf1"
  text: "#111312"
  text-muted: "#5e655f"
  border: "#d8dfe5"
  link: "#315eea"
  accent: "#e8e5dc"
  primary-foreground: "#ffffff"
  caution: "#d6a23a"
  risk: "#cf4d3f"
  destructive: "oklch(0.577 0.245 27.325)"
  violet: "#6f58d9"
  code-bg: "#eef2f6"
  workbench: "#101214"
  workbench-soft: "#191c1f"
  workbench-line: "#30363b"
  workbench-text: "#f1f4ef"
  workbench-muted: "#aeb7ad"
  tag-green-bg: "rgb(200 245 60 / 0.34)"
  tag-green-bg-strong: "rgb(200 245 60 / 0.6)"
  tag-green-border: "rgb(15 15 14 / 0.2)"
  tag-violet-bg: "rgba(111, 88, 217, 0.11)"
  tag-violet-bg-strong: "rgba(111, 88, 217, 0.18)"
  tag-violet-border: "rgba(111, 88, 217, 0.2)"
  tag-violet-text: "#5943b4"
  tag-gray-bg: "rgba(93, 103, 111, 0.1)"
  tag-gray-bg-strong: "rgba(93, 103, 111, 0.16)"
  tag-gray-border: "rgba(93, 103, 111, 0.16)"
  tag-gray-text: "#4e575e"
  message-green-bg: "rgb(249 253 236 / 0.85)"
  message-violet-bg: "rgba(246, 243, 255, 0.78)"
  message-gray-bg: "rgba(240, 243, 246, 0.82)"
typography:
  display-xl:
    fontFamily: '"Bricolage Grotesque Variable", "Geist Variable", ui-sans-serif, system-ui, sans-serif'
    fontSize: 84px
    fontWeight: 780
    lineHeight: 1.08
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: '"Bricolage Grotesque Variable", "Geist Variable", ui-sans-serif, system-ui, sans-serif'
    fontSize: 42px
    fontWeight: 760
    lineHeight: 1.08
    letterSpacing: -0.025em
  headline-md:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 22px
    fontWeight: 740
    lineHeight: 1.08
  title-card:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 30px
    fontWeight: 760
    lineHeight: 1.08
  lead:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  label-nav:
    fontFamily: '"Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
  label-kicker:
    fontFamily: '"JetBrains Mono Variable", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
    fontSize: 11px
    fontWeight: 720
    lineHeight: 1.15
    letterSpacing: 0.02em
  meta-mono:
    fontFamily: '"JetBrains Mono Variable", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
  accent-serif:
    fontFamily: '"Instrument Serif", Georgia, "Times New Roman", serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
rounded:
  none: 0px
  base: 0.25rem
spacing:
  rule: 1.5px
  hairline: 1px
  gutter: 20px
  page-max: 1280px
  canvas-max: 1480px
  reading-measure: 68ch
  card-padding: 24px
  section-band: 42px
motion:
  ease-out: "cubic-bezier(0.23, 1, 0.32, 1)"
  ease-in-out: "cubic-bezier(0.77, 0, 0.175, 1)"
  dur-press: 120ms
  dur-hover: 160ms
  dur-menu: 200ms
  ease-hover: ease
  dur-panel: 250ms
  dur-enter: 450ms
components:
  kicker:
    backgroundColor: "{colors.hue-lime}"
    textColor: "{colors.ink}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
    padding: 4px 9px
    height: 25px
  kicker-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
    padding: 4px 9px
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hue-lime}"
    typography: "{typography.label-nav}"
    rounded: "{rounded.none}"
    padding: 10px 15px
    height: 42px
  button-primary-hover:
    backgroundColor: "{colors.hue-lime}"
    textColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-nav}"
    rounded: "{rounded.none}"
    padding: 0.7rem 0.85rem
  button-secondary-hover:
    backgroundColor: "{colors.hue-lime}"
    textColor: "{colors.ink}"
  card-note:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.card-padding}"
  fn-section:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: 24px 26px 10px
  thesis-block:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.paper}"
    rounded: "{rounded.none}"
  ink-grid-cell:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: 1.25rem
  workbench-panel:
    backgroundColor: "{colors.workbench}"
    textColor: "{colors.workbench-text}"
    typography: "{typography.meta-mono}"
    rounded: "{rounded.none}"
  tag-green:
    backgroundColor: "{colors.tag-green-bg}"
    textColor: "{colors.ink}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
  tag-violet:
    backgroundColor: "{colors.tag-violet-bg}"
    textColor: "{colors.tag-violet-text}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
  tag-gray:
    backgroundColor: "{colors.tag-gray-bg}"
    textColor: "{colors.tag-gray-text}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
  pagination-current:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hue-lime}"
    rounded: "{rounded.none}"
  site-header:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.label-nav}"
  tile-blue:
    backgroundColor: "{colors.hue-blue}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
  tile-lime:
    backgroundColor: "{colors.hue-lime}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  tile-coral:
    backgroundColor: "{colors.hue-coral}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  tile-violet:
    backgroundColor: "{colors.hue-violet}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
  tile-amber:
    backgroundColor: "{colors.hue-amber}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  tile-pink:
    backgroundColor: "{colors.hue-pink}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  tile-ink:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hue-lime}"
    rounded: "{rounded.none}"
  link-inline:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.link}"
    typography: "{typography.body-lg}"
  text-coral:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.hue-coral-text}"
  caption-muted:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.text-muted}"
    typography: "{typography.body-md}"
  chip-muted:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.text}"
    typography: "{typography.label-kicker}"
    rounded: "{rounded.none}"
  code-inline:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.text}"
    typography: "{typography.meta-mono}"
    rounded: "{rounded.none}"
  workbench-row:
    backgroundColor: "{colors.workbench-soft}"
    textColor: "{colors.workbench-muted}"
    typography: "{typography.meta-mono}"
---

# Design System: New Runtime

Source of truth for agents and humans editing `qwgai-site`. The CSS custom
properties on `:root` in `src/styles/global.css` are the normative values; this
file must match them (`npm run validate:design-md` fails on drift). Public
copies: `https://newruntime.com/design.md` and the DTCG export
`https://newruntime.com/design-tokens.json`.

## Overview

New Runtime is a newsroom printed on a light-table: a broadsheet layout set on
warm cream stock with near-black ink, where every record is a clipped,
source-linked card pinned to a grid of 1.5px ink rules. Think of an engineering
lab notebook crossed with a Swiss-style newspaper desk and a riso-printed
zine: flat ink, a handful of saturated spot colours printed as solid blocks,
offset shadows that look like a second pass of the press slipped a few pixels.
The reader is an AI or software engineer, or an agent reading the same pages
as Markdown or JSON. The UI should feel dense, dated, accountable and a little
playful; never glossy, never a SaaS landing page.

The editorial section names are part of the identity, not copy to be
"improved": **Field Notes** (one brief note per story), **Signals** (a
synthesis of two or more notes), **Analysis**, **Trends** (Patterns, Shifts,
Deltas, Interface Graveyard), **Forecasts**, **Topics**, **Systems**,
**Projects**, **Learn**, **Tested**. Keep them, keep their casing, and keep
them as navigation labels and kickers.

### Deliberate identity choices

Automated design critics (impeccable, taste or "AI slop" audits) must treat the
following as intentional and must not strip, soften or "modernise" them:

- **Cream paper background** {colors.paper}, not white. White {colors.surface}
  is reserved for cards and cells that sit on the paper.
- **Mono kicker and eyebrow labels**: small JetBrains Mono chips in a solid
  lime box with an ink rule ({components.kicker}) above headings.
- **JetBrains Mono for metadata**: dates, counts, IDs, scores, route names,
  table numerals and terminal rows are set in {typography.meta-mono}.
- **Hard offset shadows** (`Npx Npx 0 <colour>`, zero blur) on the specific
  components listed under Elevation & Depth. They are print registration,
  not soft elevation.
- **1.5px ink rules and borders** {spacing.rule} as the structural line of the
  system: header rule, card borders, grid gutters drawn with ink.
- **Solid saturated fills**: lime, blue, violet, coral, amber and pink used as
  full flat blocks (tiles, kickers, hover states), not as tints or gradients.
- **Square corners** {rounded.none} on every paper-and-ink component.
- **The editorial section names** listed above.

### Reading modes

Every page belongs to one of two modes; pick the mode before picking components.

- **Read mode**: Field Notes, Signals, Analysis articles, archives, Learn
  guides, About/Privacy/Developers and the agent docs (`/agents/`,
  `/developers/`). One calm text column of 60-75ch (the system uses
  {spacing.reading-measure}), {typography.body-lg} body, generous vertical
  rhythm, kickers and mono metadata above the title, sources at the end.
  Colour appears only in kickers, tags, block shadows and links.
- **Operate mode**: the Machine Discovery Lab, source observatory, explorers,
  ledgers, forecast tables, the Agent Readiness Check, dashboards and
  workbench panels. Dense grids of ink-ruled cells up to {spacing.canvas-max},
  mono numerals, filters and toggles, solid fills to encode state. Text
  columns still cap at the reading measure inside a cell.

## Colors

One ink, one paper, and a set of six saturated spot hues used as solid fills.

- **Paper** {colors.paper}: the page canvas on every route (`.richmessage-site`
  background, sticky header at 94% opacity). Warm, slightly grey cream stock.
  `background` {colors.background} is the same value through the shadcn alias.
- **Ink** {colors.ink}: rules, borders, shadows, headings, the primary button
  and active pagination. Near-black, not pure black. `primary`
  {colors.primary} resolves to ink (`--primary` -> `--signal-strong` -> `--ink`).
- **Text** {colors.text} and **Text muted** {colors.text-muted}: body copy and
  secondary copy. Muted text is for descriptions and captions, never for
  metadata that carries a date or a count the reader needs.
- **Surface** {colors.surface}: white cards and grid cells on paper.
  **Surface muted** {colors.surface-muted} and **Accent** {colors.accent} are
  quiet fills for secondary chips and table stripes.
- **Hue lime** {colors.hue-lime}: the house accent. Kicker chips, primary
  hover, `::selection`, text on ink (active pagination, primary button).
  Lime is the focus-ring colour on ink and blue surfaces (14:1 on ink, 6:1 on
  blue).
- **Hue blue** {colors.hue-blue}: system accent (`--signal`). Accent rules,
  the default keyboard focus ring on paper, rotating headline words, lead
  story tiles. Blue on ink is only 3.1:1, so dark and blue surfaces switch
  the focus ring to lime.
- **Hue violet** {colors.hue-violet}: secondary-label offset shadow and
  violet tiles. It was darkened from #7a5cff, which gave white tile labels only
  4.37:1; this shade clears WCAG AA for white text.
- **Hue coral** {colors.hue-coral}: fills only. As text on paper it is 2.75:1,
  so coral text uses **Hue coral text** {colors.hue-coral-text} (4.57:1).
- **Hue amber** {colors.hue-amber} and **Hue pink** {colors.hue-pink}: tile
  and shadow hues in rotating card grids. Pink tiles take an ink focus ring.
- **Link** {colors.link}: inline links in running text ({components.link-inline},
  4.8:1 on paper). Hover goes to ink. Muted text is 5.4:1 on paper.
- **Signal** {colors.signal}: alias of hue blue for accent rules. The legacy
  signal greens (#2f8f4e / #1c6d3a) were off-palette and are retired; never
  reintroduce them.
- **Caution** {colors.caution}, **Risk** {colors.risk}, **Destructive**
  {colors.destructive}: status only (stale, contradicted, failed). Never
  decorative.
- **Workbench** {colors.workbench}, {colors.workbench-soft},
  {colors.workbench-line}, {colors.workbench-text}, {colors.workbench-muted}:
  the dark terminal panel palette, used only inside workbench/terminal
  components on a light page. It is not a dark mode.
- **Tiles**: home and map tiles use one spot hue as a solid fill. White text
  goes on blue (6.2:1) and violet (4.8:1) tiles ({components.tile-blue},
  {components.tile-violet}); ink text on lime, coral (6.2:1), amber and pink;
  ink tiles carry lime text (15:1, {components.tile-ink}).
- **Tags**: green tags are the lime member of the palette
  ({colors.tag-green-bg}, strong {colors.tag-green-bg-strong}, border
  {colors.tag-green-border}, ink text). Violet ({colors.tag-violet-text} on
  {colors.tag-violet-bg}) and gray ({colors.tag-gray-text} on
  {colors.tag-gray-bg}) tags complete the set.
- Tag text over its translucent tint composites to about 5.7:1 (violet) and
  5.8:1 (gray) on paper. The official linter compares the raw RGBA values
  without compositing over paper and reports these two as 1.4:1 and 1.3:1;
  those two warnings are known false positives.
- **Message tints** {colors.message-green-bg}, {colors.message-violet-bg},
  {colors.message-gray-bg}: legacy RichMessage bubble backgrounds. Keep for
  existing components; do not use for new work.
- **Primary foreground** {colors.primary-foreground}: shadcn alias, white.
  Paper-and-ink buttons use lime on ink instead.

## Typography

Four families, each with one job.

- **Bricolage Grotesque Variable** (display): `main h1` and `main h2` only.
  Heavy (760-780), tight negative tracking, set at width 85 in the brand mark.
  {typography.display-xl} for page titles (84px, scaled down responsively),
  {typography.headline-lg} for section heads.
- **Geist Variable** (sans): everything a reader reads. Body
  {typography.body-lg} (18px / 1.65) in Read mode, {typography.body-md} in
  cards, {typography.lead} for standfirsts, {typography.headline-md} for h3,
  {typography.label-nav} for navigation and buttons. Tailwind's `@theme`
  `font-sans` is a shorter `'Geist Variable', sans-serif` stack; custom CSS
  uses the full `--font-sans` stack.
- **JetBrains Mono Variable** (mono): kickers, eyebrows, dates, counts,
  route names, IDs, workbench rows, numerals in data cells.
  {typography.label-kicker} (11px, 720) for chips, {typography.meta-mono}
  (12px) for metadata lines. The base `.eyebrow` is uppercase.
- **Instrument Serif Italic** (accent): {typography.accent-serif}, a single
  italic word or phrase inside a display line (the home rotator). Never body,
  never a whole heading, never a standfirst.

The type scale is the `--text-*` ramp on `:root`: 12, 14, 16, 18, 22, 30, 42,
64, 84px. Use those steps; do not invent intermediate sizes.

## Layout

- Page frame: `width: min(100% - 40px, 1280px)` ({spacing.page-max} with a
  {spacing.gutter} gutter each side). The reference canvas (home and
  explorers) widens header and footer to {spacing.canvas-max}; Signal detail
  pages keep the 1280px column.
- Read mode text column: {spacing.reading-measure} (68ch; 72ch on Tested).
  Keep prose between 60 and 75 characters per line.
- Grids are drawn with ink: an ink-filled container with `gap: 1.5px` and
  white cells, so the gaps read as 1.5px rules ({components.ink-grid-cell}).
- Section bands: {spacing.section-band} vertical padding with a rule below.
  Cards pad {spacing.card-padding}.
- Breakpoints in use: 1180, 1040, 900, 860, 720, 620, 520px. Multi-column ink
  grids collapse to two columns around 860px and to one column at 520px; no
  horizontal page scroll at phone width.

## Elevation & Depth

The system is flat. Hierarchy comes from ink rules, solid fills and type
weight, plus one deliberate device: the **hard offset shadow**, a zero-blur
shadow in ink or a palette hue, like a misregistered second print pass.

- Kicker secondary: `2px 2px 0` {colors.hue-violet}.
- Brand mark square and primary button hover: `3px 3px 0` {colors.ink}, with
  the element translated `-2px, -2px` on hover.
- Knowledge panels (updates, week, new records), Field Note blocks and code
  blocks: `4px 4px 0` in blue, lime, violet, the section hue, or ink.
- Field Note sections and the thesis block: `5px 5px 0` in the section hue.
- Note ledger cards on hover: `6px 6px 0` in a hue that cycles down the grid
  (coral, violet, lime, amber), card lifted `-3px, -3px`. Reduced motion
  removes the lift.

The soft `--shadow` (`0 12px 32px` at 6% ink) survives only on the legacy
workbench panel. Do not use blurred shadows on new components.

## Shapes

Square. Paper-and-ink components use {rounded.none}: kickers, buttons, cards,
Field Note sections, code blocks, pagination, tiles. `--radius`
({rounded.base}) and the derived `--radius-*` steps exist for shadcn/ui
primitives only. The 8px radius on older cards and nav tabs is legacy; replace
it with square corners when touching those components. The only round shapes
are status dots.

Borders: {spacing.rule} solid ink for structure; {spacing.hairline} in
{colors.border} only for quiet in-cell dividers. Block quotes use a 6px
{colors.hue-blue} left rule.

## Components

- **Kicker** ({components.kicker}): lime chip, 1.5px ink border, mono 11px,
  min-height 25px, sits above a heading. **Kicker secondary**
  ({components.kicker-secondary}): white chip with an ink rule and the violet
  2px offset, used for section labels, pattern kickers and revisions.
- **Primary button** ({components.button-primary}): ink fill, lime text,
  square. Hover ({components.button-primary-hover}) flips to lime fill with
  ink text and a 3px ink offset shadow.
- **Secondary action** ({components.button-secondary}): white, 1.5px ink
  border, ink text; hover fills lime.
- **Note card** ({components.card-note}): white cell on paper, 1.5px border
  that turns ink on hover, cycling hue offset shadow.
- **Field Note section** ({components.fn-section}) and **thesis block**
  ({components.thesis-block}): bordered white section with a hue square before
  the h2; the thesis is ink with paper text. Both carry a 5px hue shadow.
- **Ink grid** ({components.ink-grid-cell}): loops, baselines, boundaries and
  fact grids drawn as ink containers with 1.5px gaps.
- **Workbench panel** ({components.workbench-panel}): dark terminal surface
  with mono rows and lime action links, used inside Operate-mode pages.
- **Tags** ({components.tag-green}, {components.tag-violet},
  {components.tag-gray}): topic and status chips.
- **Pagination current** ({components.pagination-current}): ink with lime
  text.
- **Site header** ({components.site-header}): paper at 94% opacity with a
  1.5px ink rule below; nav in {typography.label-nav}, current page marked
  lime.
- **Focus**: `2px solid` ring at 3px offset in {colors.hue-blue} on paper;
  {colors.hue-lime} on ink and blue surfaces; {colors.ink} on pink tiles.

## Do's and Don'ts

- **Do** read this file before any UI edit and use the `:root` custom
  properties. **Don't** add a new hex value outside `:root`; add the token
  there first and document it here.
- **Do** keep the cream paper background on every page. **Don't** switch the
  page to pure white, add a dark mode, or design against the `.dark` block.
- **Do** use hard offset shadows only on the components listed under
  Elevation & Depth. **Don't** add blurred, coloured-glow or layered shadows.
- **Do** draw structure with 1.5px ink rules. **Don't** replace them with
  1px grey borders to look "cleaner".
- **Do** use spot hues as solid flat fills. **Don't** use gradients, glass,
  blur or translucent hue washes on new components.
- **Do** keep corners square. **Don't** introduce rounded cards or pill
  buttons; the 8px radius is legacy.
- **Do** set dates, counts and IDs in JetBrains Mono. **Don't** set body copy
  or headlines in mono.
- **Do** keep Read-mode prose at 60-75ch. **Don't** let article text run the
  full 1280px width.
- **Do** use coral text only as {colors.hue-coral-text} and white text only on
  violet {colors.hue-violet} or darker. **Don't** put blue focus rings on ink.
- **Don't** rename Field Notes, Signals, Analysis, Trends or the other
  section names, and don't reintroduce the retired signal greens.

## Motion

Motion is quick and mechanical, like a press stamping: no bounce, no
overshoot. The values in front matter are the system values and map 1:1 to
the `--ease-*` and `--dur-*` custom properties on `:root`. The linter does not
export the `motion` group (it warns `token-like-ignored`); agents read it
here.

- {motion.ease-out} for entering and hover feedback; {motion.ease-in-out} for
  elements that move between two on-screen positions.
- {motion.dur-press} for press/toggle feedback, {motion.dur-hover} for hover
  lifts (offset shadow plus translate), {motion.dur-menu} for menus and
  popovers, {motion.dur-panel} for panels and content swaps; exits run about
  20% faster than entries. {motion.ease-hover} is reserved for colour-only
  hover changes. Nothing in the UI animates longer than 300ms except the
  one-time homepage scroll reveal at {motion.dur-enter} (translate at most 16px).
- Movement on hover (lift, translate) only under
  `@media (hover: hover) and (pointer: fine)`; colour changes may be global.
  Never `transition: all`.
- Animate `transform` and `opacity` only. Hover lifts move the element and
  grow the hard shadow together.
- `prefers-reduced-motion: reduce` is gentler, not zero: transforms, marquees
  and reveal translations are removed, keyframe animations jump to their end
  state, short opacity and colour fades (at most 150ms) stay.
- Page navigation uses a cross-document view transition (200ms cross-fade,
  120ms under reduced motion); no client router.

## Generated Diagrams

Generated editorial diagrams follow
`docs/design/generated-editorial-diagram-style-guard.md` and its canonical
Nano Banana style source; that guard owns the selection gate and the visual
style. On the site, a generated diagram sits inside a paper-and-ink frame:
1.5px {colors.ink} border, {rounded.none}, white {colors.surface} mat on
{colors.paper}, a {components.kicker} labelled `New Runtime synthesis`, the
caption in {typography.meta-mono}, and the original source linked below.
Exact labels, numbers and connectors stay in HTML/SVG text, not in the bitmap.
Deterministic charts and SVG diagrams draw with ink strokes and the six spot
hues as solid fills.

## Agent Prompt Guide

When generating or editing UI for New Runtime:

1. Decide the mode first: Read (calm 68ch column) or Operate (dense ink grid).
2. Start every page on {colors.paper}; put content in white
   {colors.surface} cells framed by 1.5px {colors.ink} rules.
3. Put a {components.kicker} above each heading, dates and counts in
   {typography.meta-mono}, headings in Bricolage Grotesque, body in Geist.
4. Use one spot hue per component as a solid fill or a hard offset shadow;
   lime is the default accent, blue the system accent.
5. Square corners everywhere; hover = lime fill or a hard shadow plus a
   2-3px lift, at {motion.dur-hover} with {motion.ease-out}.
6. Reference `var(--token)` from `:root`; never paste hex values into
   component CSS.
7. Keep the editorial section names verbatim.

Example brief: "A Field Notes archive page in Read mode: paper background, a
lime mono kicker `FIELD NOTES`, Bricolage h1, a 68ch list of white note cards
with 1.5px ink borders and mono dates, hover lifts each card onto a 6px hue
offset shadow."