---
version: alpha
name: UI Wand. Modern
description: >
  The flagship style, flat white panels on warm paper that feel calm and
  uncluttered. Depth comes from a thin border ring plus two soft glow layers
  instead of a dropped shadow, type is tight and condensed, and one salmon
  orange accent marks only the single primary action on each screen.
colors:
  primary: "#141517"
  secondary: "#3b3f45"
  tertiary: "#fd8672"
  neutral: "#f4f2ee"
  surface: "#ffffff"
  surface-2: "#f8f7f4"
  surface-3: "#eeece7"
  on-tertiary: "#141517"
  tertiary-text: "#b23c28"
  tertiary-hover: "#ff9985"
  tertiary-active: "#f26d58"
  border: "rgba(20,21,23,0.10)"
  border-2: "rgba(20,21,23,0.18)"
  border-strong: "rgba(20,21,23,0.42)"
  error: "#b3261e"
  ok: "#176d37"
  night: "#151618"
  on-night: "#f1efea"
typography:
  h1:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.025em"
  h2:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.025em"
  h3:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "-0.01em"
  display:
    fontFamily: Inter
    fontSize: 88px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.035em"
  lead:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
  label:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.06em"
  mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: "0.02em"
rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 999px
spacing:
  1: 4px
  2: 8px
  3: 12px
  4: 16px
  5: 24px
  6: 32px
  7: 48px
  8: 64px
  9: 96px
  10: 128px
  gutter: 32px
  max-width: 1200px
  target: 44px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0px 16px
    height: 40px
  button-primary-hover:
    backgroundColor: "{colors.tertiary-hover}"
    textColor: "{colors.on-tertiary}"
  button-primary-active:
    backgroundColor: "{colors.tertiary-active}"
    textColor: "{colors.on-tertiary}"
  button-primary-disabled:
    backgroundColor: "{colors.surface-3}"
    textColor: "rgba(20,21,23,0.35)"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 0px 16px
    height: 40px
  button-secondary-hover:
    backgroundColor: "{colors.surface-2}"
  button-secondary-active:
    backgroundColor: "{colors.surface-3}"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    rounded: "{rounded.md}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 9px 12px
    height: 40px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
  input-error:
    textColor: "{colors.error}"
  input-disabled:
    backgroundColor: "{colors.surface-2}"
    textColor: "rgba(20,21,23,0.35)"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.xl}"
    padding: 22px 24px 24px
  toggle:
    backgroundColor: "{colors.surface-3}"
    rounded: "{rounded.full}"
    width: 36px
    height: 20px
  toggle-on:
    backgroundColor: "{colors.tertiary}"
  slider:
    backgroundColor: "{colors.surface-3}"
    rounded: "{rounded.full}"
    height: 4px
  slider-thumb:
    backgroundColor: "#ffffff"
    rounded: "{rounded.full}"
    width: 18px
    height: 18px
  stepper:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.md}"
    height: 40px
  nav:
    backgroundColor: "color-mix(in srgb, {colors.neutral} 84%, transparent)"
    textColor: "{colors.primary}"
    height: 64px
  control-bar:
    backgroundColor: "rgba(255,255,255,0.82)"
    rounded: "14px"
    padding: 6px
  checkbox:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xs}"
    width: 18px
    height: 18px
  checkbox-checked:
    backgroundColor: "{colors.tertiary}"
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 28px
  modal:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 28px
    width: 440px
  tooltip:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 6px 10px
omitted: []
---

# UI Wand. Modern DESIGN.md

## Overview

Modern is the flagship UI Wand style: flat white panels on warm paper that read calm and disciplined. Depth comes from a thin border ring plus soft glow layers, not a drop shadow. One salmon accent marks only the single primary action per screen.

Type is Inter, set with tight tracking in the house style: tight negative letter
spacing on display and heading sizes (-0.025em to -0.035em), generous line
height on body copy (1.55) for long-form readability. The one accent color
in the whole system is a warm salmon-orange (#fd8672), and the rule that
keeps it from becoming visual noise is enforced at the token level: it exists
only as `--bd-accent`, consumed only by `.bd-btn--primary` and a small number
of selection/active states. Every other control is ink-on-white or
ink-on-paper.

The target audience is technical: founders, product teams, and other
designers evaluating whether this studio can build something this disciplined.
The emotional register is "nothing here is an accident." Every shadow value
in `tokens.css` is a stacked `0 0 0 1px border` ring plus soft offsets. Never
a single soft shadow. Because a ring survives being resized, duplicated, and
viewed at any zoom without going mushy.

## Colors

- **Primary (#141517):** Near-black ink. Used for all headline and body text,
  and as the default control border color when at full opacity. Reads
  permanent, not harsh, because it never goes to pure `#000`.
- **Secondary (#3b3f45):** The softened ink used for body copy and secondary
  labels (`--bd-fg-2`). One step lighter than primary so hierarchy is legible
  without a second hue.
- **Tertiary (#fd8672):** The signal color. Warm salmon-orange, HSL roughly
  8°/98%/72%. This is the only hue in the system; every other surface is a
  neutral. Ink text on tertiary measures 7.68:1 (passes AAA); white text on
  tertiary measures only 2.38:1 and fails, which is why `--bd-accent-fg` is
  locked to ink (#141517), never white, on every button that uses this fill.
- **Neutral (#f4f2ee):** Warm paper, the page ground. Slightly warmer than
  pure white so the flat white cards (`--bd-surface: #fff`) read as objects
  sitting on a surface rather than a seamless wash.
- **Surface / Surface-2 / Surface-3 (#fff / #f8f7f4 / #eeece7):** Three
  elevation steps used for card background, hover fill, and pressed fill
  respectively. Never crossed: a card never uses surface-2 as its resting
  state.

Provenance: `css/tokens.css` lines 48-62 (`:root` block, Modern is the base
theme and has no `[data-theme]` override except the empty alias at line 92),
overridden for the live accent by `css/modern-salmon.override.css` (loaded
after `components.css`, scoped to `html[data-theme="modern"]` only).

## Typography

Inter is the only typeface in Modern, used at two weights: 600 (display,
headings, UI emphasis) and 400 (body). `font-feature-settings` enables
`cv01, ss03, liga` (Inter's alternate numeral and cursive-italic-free set),
ignored gracefully by fallback stacks.

- **Display/H1:** 600 weight, tight negative tracking (-0.025em to -0.035em),
  line-height 1 to 1.1. In production these are fluid `clamp()` values
  (display: `clamp(48px, 6vw, 88px)`, h1: `clamp(40px, 4.8vw, 64px)`); the
  token front matter above records the desktop maximum. See Replication
  recipe for the exact clamp strings.
- **H2:** 600 weight, `clamp(30px, 3.2vw, 44px)`, `text-wrap: balance` so
  headline wrapping never orphans a single word.
- **H3:** 600 weight, `clamp(20px, 1.6vw, 22px)`, line-height 1.25, tighter
  -0.01em tracking (slightly less aggressive than h1/h2 because h3 sizes are
  near body scale and heavy negative tracking starts to collide glyphs).
- **Lead:** 400 weight, `clamp(17px, 1.4vw, 20px)`, line-height 1.5, capped
  at 56 characters per line (`max-width: 56ch`). This is the one-sentence
  summary under a headline, never a full paragraph.
- **Body:** 400 weight, fixed 16px (not fluid. Body text should not scale
  with viewport, only layout should), line-height 1.55, capped at 64ch.
- **Small:** 400 weight, 14px, used for captions and metadata.
- **Label:** 500 weight, 12px, letter-spacing 0.06em, `text-transform: none`
  in Modern (other styles may set this to uppercase).
- **Mono:** IBM Plex Mono, used only for numeric/technical values: the
  slider's live value readout, keyboard-shortcut badges, timestamps.

Provenance: `css/tokens.css` lines 76-83 (`--bd-sans`, `--bd-fs-*`, `--bd-lh-*`,
`--bd-ls-*`, `--bd-fw-*`), class rules in `css/components.css` lines 17-30.

## Layout

Modern uses a fixed-max-width grid: content never exceeds 1200px
(`--bd-max`), with a fluid gutter that scales from 20px to 56px
(`clamp(20px, 4vw, 56px)`). Section vertical rhythm is `clamp(80px, 9vw,
128px)` (`--bd-section-y`). Large sections breathe, but the breathing room
itself is fluid so it never feels empty on a laptop or cramped on a phone.

The spacing scale is a strict 4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96,
128px (`--bd-s-1` through `--bd-s-10`). There is no half-step; 4px is already
the half-step of the more common 8px systems. Every control's internal
padding, every gap between elements, traces back to one of these ten values.

The one deliberate exception is the touch target floor: every interactive
element is at least 40px tall on desktop and 44px tall on touch
(`--bd-target: 44px`), enforced globally in `components.css`'s R3 fix block
(lines 481-493) regardless of what the per-component height token says.

Provenance: `css/tokens.css` lines 35-37 (`--bd-s-*`, `--bd-gutter`,
`--bd-max`, `--bd-target`), `css/components.css` lines 481-493.

## Elevation & Depth

Modern never uses a single soft drop-shadow. Every elevation level is a
1px solid-color ring (never blurred, so it stays crisp at any zoom) stacked
with zero, one, or two soft ambient layers:

| Level | Token | Composition |
|---|---|---|
| 0 / ring | `--bd-sh-0` | `0 0 0 1px border` only |
| 1 | `--bd-sh-1` | ring + `0 1px 2px rgba(ink,.05)` |
| 2 | `--bd-sh-2` | ring + `0 2px 4px rgba(ink,.05)` + `0 8px 16px -6px rgba(ink,.08)` |
| 3 | `--bd-sh-3` | ring + `0 4px 8px rgba(ink,.06)` + `0 16px 32px -12px rgba(ink,.14)` |
| modal | `--bd-sh-modal` | border-2 ring + `0 8px 16px rgba(ink,.08)` + `0 32px 64px -16px rgba(ink,.28)` |
| inset | `--bd-sh-inset` | `inset 0 1px 2px rgba(ink,.06)` (fields, pressed buttons) |
| button | `--bd-sh-btn` | ring + 1px/2px drop + `inset 0 1px 0 rgba(255,255,255,.6)` (specular top edge) |
| button primary | `--bd-sh-btn-primary` | ring in accent-lo + accent-tinted drop + specular top |

The ring is never optional. Removing it and keeping only the blur would make
a card look soft and low-fidelity, which is explicitly the aesthetic Modern
is rejecting. Cards get `--bd-sh-2` at rest and `--bd-sh-3` on hover with a
`translate: 0 -2px` lift (`components.css` line 240). Nothing in Modern uses
`box-shadow` as the sole state signal; hover also changes background to
`--bd-surface-2` or `--bd-surface-3`.

Provenance: `css/tokens.css` lines 65-74.

## Shapes

Radius scale, six steps: `--bd-r-xs: 4px`, `sm: 6px`, `md: 8px`, `lg: 12px`,
`xl: 16px`, `pill: 999px`. The rule of thumb: controls (buttons, inputs,
chips) use `md` (8px); cards and modals use `xl` (16px); anything meant to
read as a single continuous shape (pills, badges, avatars, the switch track)
uses `pill`. There is no `none`/0 radius anywhere in Modern. That belongs to
Retro and Primitives.

Provenance: `css/tokens.css` line 64.

## Components

### Button. Primary

The only colored surface in the control set. Fill `--bd-accent` (#fd8672),
text `--bd-accent-fg` which is **ink**, not white (white fails contrast on
this hue at 2.38:1). Shadow is `--bd-sh-btn-primary`: a 1px ring in
`--bd-p-orange-lo` plus a tinted drop plus a specular highlight.

| State | Fill | Notes |
|---|---|---|
| Rest | `#fd8672` | ink text, 7.68:1 |
| Hover | `#ff9985` | lighter, ink text 8.83:1 |
| Active/press | `#f26d58` | darker, `translateY(.5px)`, inset shadow swapped in |
| Focus-visible | rest fill | + `--bd-ring` (2px surface gap + 4px `#c2410c` ring, outer band 4.0–5.2:1) |
| Disabled | `--bd-surface-3` | text `--bd-fg-4`, shadow drops to ring only |
| Loading | fill unchanged | text goes `transparent`, 16px spinner fades in, 700ms linear |

### Button. Secondary / ghost

Secondary: white fill, ink text, same shadow family as default `.bd-btn`.
Ghost: transparent, no shadow at rest; hover fills `--bd-surface-3`; active
shows `--bd-sh-inset`. Both share the primary's disabled and loading
treatment in spirit but with ink-on-neutral coloring instead of accent.

### Input / Textarea / Select

Flat white field, no border. The "border" is a 1px box-shadow
(`0 0 0 1px var(--bd-field-border)`) stacked with `--bd-sh-inset`. Hover
thickens the shadow color to `--bd-field-border-hover`. Focus replaces the
shadow entirely: `0 0 0 1px accent, 0 0 0 4px accent-22%-alpha`: a glow, not
a ring, distinct from the button focus ring so fields and buttons never look
identical when focused. Error state swaps the glow color to `--bd-error`;
success to `--bd-ok`. Placeholder text is `--bd-fg-4`. Disabled fields get
`--bd-surface-2` fill and `--bd-fg-4` text, cursor `not-allowed`.

### Card

White surface, `--bd-r-xl` (16px) radius, `--bd-sh-2` at rest → `--bd-sh-3`
plus a 2px upward `translate` on hover. Media area is `16:9`, sits on
`--bd-surface-3`, and shows a faint 24px grid pattern masked to a radial
fade. A subtle "blueprint" texture unique to empty/placeholder media slots.

### Toggle / Switch

36×20px pill track on `--bd-surface-3` with an inset ring plus
`--bd-sh-inset`. The thumb is a plain white 16px circle with its own 1px ring
and small drop shadow, translating 16px on check. Checked state fills the
track `--bd-accent` with a `--bd-accent-lo` ring. Track color change *and*
thumb position both signal state, never position alone.

### Checkbox / Radio

18×18px box (checkbox) or circle (radio) on `--bd-field-bg` with
`--bd-sh-inset` and a 1px field-border ring. Checked fills `--bd-accent`
solid with the darker `--bd-accent-lo` ring; the checkmark SVG scales in from
0.6→1 with an ease-out. Indeterminate reuses the checked visual with the
dash icon instead of the check icon (`--bd-check.is-indeterminate`).

### Slider / Stepper / Progress

Slider: 4px pill rail on `--bd-surface-3`, accent fill to the value, 18px
white thumb with a 1px ring; hover scales the thumb 1.1x, active scales it
1.15x and adds a 6px accent-tinted glow ring (`color-mix(accent 20%)`).
Stepper: a `--bd-ctl-h` (40px) pill housing two 36px buttons flanking a
monospace numeric readout, each divided by a 1px border. Progress: 6px pill
track, accent fill, indeterminate state uses a 35%-wide bar animating
left→right over 1.4s.

### Nav / Control bar

Nav is a 64px fixed bar, `color-mix(bg 84%, transparent)` background with
14px blur + 1.3x saturate. A contrast floor from first paint so nav text
is never unsafe over hero art. Control bar is the floating six-button dock
at the bottom center of the hero: `rgba(255,255,255,.82)` background, 14px
blur, 14px radius, `--bd-sh-3` shadow, slides off-screen (`translate -50%
140%`, opacity 0) when the hero scrolls out of view.

## Do's and Don'ts

- Do use the accent (#fd8672) for exactly one primary action per view. Never
  two primary buttons competing on the same screen.
- Do keep accent text ink, never white. White fails contrast on this hue.
- Don't add a soft drop-shadow without the 1px ring underneath it; a shadow
  alone looks unfinished in this system.
- Do use the 4px spacing scale for every gap and padding value; don't
  eyeball a one-off number.
- Don't mix the mono type family into headlines or body copy. It exists
  only for numeric/technical readouts.
- Do keep every interactive target at least 40px (desktop) / 44px (touch).
- Don't let the nav background go fully opaque or fully transparent; the
  84%-mix + blur is the contrast floor against unpredictable hero art.
- Do use `translateY` lifts (2–3px) for hover, never scale, on cards. Scale
  reads as "button," translate reads as "surface."

## Motion

Base easing and duration scale (`css/tokens.css` lines 38-41, unchanged
across most interactions): `--bd-ease-standard: cubic-bezier(.2,0,0,1)`,
`--bd-ease-out: cubic-bezier(.16,1,.3,1)`, `--bd-ease-in: cubic-bezier(.5,.9,.4)`,
`--bd-ease-press: cubic-bezier(.3,.7,.4,1)`, `--bd-ease-settle:
cubic-bezier(.34,1.4,.5,1)`. Durations: instant 80ms, fast 150ms, base
240ms, slow 420ms, scene 800ms.

Modern's choreography character (from `motion-tokens.css`, the base `:root`
block, since Modern has no theme override here. It *is* the default): sub-pixel
smooth, ease-out everywhere, overshoot (the spring easing) reserved only for
toggles, nothing animated longer than 440ms except the ambient logo drift.
Key values: hero headline enters over 440ms with a 55ms per-line stagger and
a 12px rise; hero pieces drop in with `--bd-m-ease-drop` over 400ms,
staggered 14ms apart capped at 700ms total; the control bar slides in over
300ms and out over 220ms; the theme-switch cover transition is 280ms.

Reduced motion collapses every duration to 1ms (never 0, so
`transitionend`/`animationend` still fire) and every distance to 0; this is
automatic under `prefers-reduced-motion: reduce` and under the in-app
`[data-motion="reduced"]` toggle. `[data-motion="lite"]` keeps micro-
interactions but cuts the ambient layer (logo drift, glint, parallax,
autoplay carousel advance).

Provenance: `css/motion-tokens.css` lines 13-87, 162-203.

## Sound

Pack: `sound/packs/modern.json`. Sample rate 22050Hz, master gain 1.0,
pitch detune 0.6%. Every control maps to a MIDI note number (`m`), a
velocity-band width (`vb`), and a sonic family (`f`) that the Orpheus engine
synthesizes in real time. There are no prerecorded audio files, only
parameter sets.

Representative mapping (full list is 60+ controls in the pack):

| Control | Note | Family | Velocity band |
|---|---|---|---|
| button-primary | 64 | button | 0.04 |
| button-secondary | 67 | button | 0.04 |
| toggle | 59 | switch | 0.04 |
| checkbox | 62 | switch | 0.04 |
| slider | 59 | continuous | 0.10 |
| range-slider | 64 | continuous | 0.10 |
| segmented | 59 | choice | 0.04 |
| progress | 69 | meter | 0.04 |
| text-input | 74 | text | 0.04 |
| knob | 76 | rotary | 0.04 |

Loudness bake (`sound/packs/loudness-bake.json`, "modern" entry, build
`orpheus-soft-r4`, measured live on the engine path): trim -13.1dB, live
session integrated loudness -27.8 LUFS, true peak -7.9dBTP, peak -13.1dB,
492 samples across a 106.58s representative session. This is the quietest
of the warm-material styles (Skeuomorph, Extrude, Frost are all in the
-11 to -15dB trim range) and sits between Gel (loudest, built on an older
"dense-storm" bake with limiting) and Retro (quietest, -17.4dB trim).

Provenance: `sound/packs/modern.json`, `sound/packs/loudness-bake.json`.

## Materials and rendering

Modern's entire material language is: flat fill colors, a 1px border-as-ring
shadow, and a single specular highlight line
(`inset 0 1px 0 rgba(255,255,255,.6)`) on buttons only, to suggest a very
faint gloss without ever reading as skeuomorphic. There are zero gradients
and zero textures anywhere in Modern's own CSS; any gradient the page shows
(e.g. the card-media placeholder grid) is a dot/line pattern, not a tonal
blend.

Nav backdrop: `backdrop-filter: blur(14px) saturate(1.3)` over
`color-mix(in srgb, var(--bd-bg) 84%, transparent)`. This combination is the
"contrast floor". Zephyrus's hero art renders behind the nav and cannot be
trusted to contrast correctly with nav text on its own, so the nav always
pre-mixes 84% of its own background color into the blur before any hero
content shows through.

Exact CSS for the primary button surface:

```css
.bd-btn--primary{
  background: var(--bd-accent);                 /* #fd8672 */
  color: var(--bd-accent-fg);                    /* #141517, never white */
  box-shadow: var(--bd-sh-btn-primary);
  font-weight: 600;
}
```

## Replication recipe

1. Load Inter (400, 500, 600 weights) and IBM Plex Mono (500). Set
   `font-feature-settings: "cv01","ss03","liga"` on the root.
2. Paste the primitives + Modern semantic block from `tokens.css` lines
   16-91 verbatim. Modern is `:root`, there is no separate theme selector
   to write.
3. Apply `modern-salmon.override.css` (12 lines) after `tokens.css` and
   `components.css` to get the live #fd8672 accent instead of the earlier
   #fa6b43/#ff5a30 iterations. This file is scoped to
   `html[data-theme="modern"]` only and is the one that should ship.
4. Use the fluid type scale:
   ```css
   --bd-fs-display: clamp(48px,6vw,88px);
   --bd-fs-h1: clamp(40px,4.8vw,64px);
   --bd-fs-h2: clamp(30px,3.2vw,44px);
   --bd-fs-h3: clamp(20px,1.6vw,22px);
   --bd-fs-lead: clamp(17px,1.4vw,20px);
   ```
5. Every elevation is `0 0 0 1px border` plus zero to two soft layers. Never
   ship a shadow without the ring.
6. Apply the global 44px touch-target floor media query from
   `components.css` lines 481-493 verbatim; it is theme-agnostic and must
   exist in every build regardless of which 7 styles you ship.

## Accessibility

| Pair | Ratio | Verdict |
|---|---|---|
| Ink (#141517) on paper (#f4f2ee) | ~17.9:1 | AAA |
| Ink on white surface (#fff) | ~18.1:1 | AAA |
| Ink on tertiary fill (#fd8672) | 7.68:1 | AAA |
| White text on tertiary fill | 2.38:1 | **Fail**: never used, ink is forced |
| accent-text (#b23c28) on white | 5.88:1 | AA |
| accent-text on paper | 5.40:1 | AA |
| accent-ui (#d5503a) on white (non-text, 3:1 floor) | 4.17:1 | Pass |
| accent-ui on paper (3:1 floor) | 3.83:1 | Pass |

Focus ring: `--bd-ring` is a two-layer ring. 2Px surface-color gap, then a
4px `#c2410c` ring. Measured 4.0 to 5.2:1 against every light ground in
Modern (the raw brand orange alone measured only 2.4–3.1:1, which is why the
ring color is darker than the fill color). `:focus-visible` is the only
trigger; there is no `outline: none` anywhere without this replacement.
Reduced motion collapses all durations to 1ms and all distances to 0 (see
Motion section). Nothing in Modern depends on animation to convey state.

Provenance: contrast measurements recorded as inline comments in
`css/tokens.css` lines 23-24, 56, 60.

## Provenance

- `css/tokens.css`: primitives, Modern `:root` semantic block (lines 16-91).
- `css/modern-salmon.override.css`: live accent override (supersedes
  `modern-r2.override.css`).
- `css/motion-tokens.css`: base `:root` motion block (lines 13-87), reduced
  motion and mobile overrides (lines 162-203).
- `css/components.css`: all `.bd-*` component classes, touch-target floor
  (R3 fixes, lines 472-503).
- `sound/packs/modern.json`, `sound/packs/loudness-bake.json`: sound pack
  and loudness bake.
- `heroes/`: Modern's hero is the implicit default (no `heroes/modern.html`
  override file exists; the live site renders Modern from the base markup).