@awarebydefault/display-case 1.0.0

package/src/ui/design-system/primer-specimens/showcase.tsx

@@ -0,0 +1,68 @@
+/**
+ * Interactive showcase specimens for Display Case's own Primer. These wrap
+ * stateful behaviour the MDX can't express inline: the FlowNav stepper (tracks
+ * the active step) and the TweaksPanel demo.
+ *
+ * The render-address bar is the reusable {@link RenderAddress} showcase
+ * component (under `components/showcase/`); this module just supplies Display
+ * Case's default URL.
+ */
+import { useState } from 'react'
+import {
+  FlowNav,
+  Input,
+  Select,
+  RenderAddress as SpecimenRenderAddress,
+  TweaksPanel,
+} from '../components'
+
+const FLOW_STEPS = [
+  { id: 'Request link', label: 'Request link' },
+  { id: 'Check email', label: 'Check email' },
+  { id: 'Signed in', label: 'Signed in' },
+]
+
+export function FlowNavDemo() {
+  const [active, setActive] = useState('Check email')
+  return (
+    <div className="dcpl-block">
+      <FlowNav steps={FLOW_STEPS} activeId={active} onSelect={setActive} />
+    </div>
+  )
+}
+
+export function TweaksPanelDemo() {
+  const items = [
+    {
+      label: 'label',
+      control: (
+        <Input size="sm" defaultValue="Snapshot" style={{ width: '8rem' }} />
+      ),
+    },
+    {
+      label: 'variant',
+      control: <Select size="sm" options={['ghost', 'accent']} />,
+    },
+    {
+      label: 'disabled',
+      control: <input type="checkbox" aria-label="disabled" />,
+    },
+  ]
+  return (
+    <div style={{ width: '100%', maxWidth: '24rem', margin: '0 auto' }}>
+      <TweaksPanel
+        url="?t.variant=accent"
+        items={items}
+        onToggleMode={() => {}}
+      />
+    </div>
+  )
+}
+
+export function RenderAddress({
+  url = '/render/button/playground?theme=light&t.variant=accent',
+}: {
+  url?: string
+}) {
+  return <SpecimenRenderAddress url={url} />
+}

package/src/ui/design-system/primer-specimens/spacing.tsx

@@ -0,0 +1,101 @@
+/**
+ * Spacing specimens for Display Case's own Primer — the tight rem-based spacing
+ * scale, the modest corner radii, and the flat, border-led elevation model
+ * (shadow is reserved for genuinely floating layers).
+ *
+ * Thin wrappers over the reusable {@link SpacingScale}/{@link SpecimenBoxRow}
+ * primitives (under `components/primer-specimen/`); the Display-Case-specific
+ * data lives here.
+ */
+import {
+  type BoxSpec,
+  type SpaceStep,
+  SpecimenBoxRow,
+  SpacingScale as SpecimenSpacingScale,
+} from '../components/primer-specimen'
+
+const SPACE: SpaceStep[] = [
+  { token: 'space-1', value: '2px', width: 2 },
+  { token: 'space-2', value: '4px', width: 4 },
+  { token: 'space-3', value: '6px', width: 6 },
+  { token: 'space-4', value: '8px', width: 8 },
+  { token: 'space-6', value: '12px', width: 12 },
+  { token: 'space-8', value: '16px', width: 16 },
+  { token: 'space-10', value: '20px', width: 20 },
+  { token: 'space-16', value: '32px', width: 32 },
+]
+
+const RADII: BoxSpec[] = [
+  { label: 'none', note: '0', boxStyle: { borderRadius: '0' } },
+  {
+    label: 'sm',
+    note: '5px · controls',
+    boxStyle: { borderRadius: 'var(--dc-radius-sm)' },
+  },
+  {
+    label: 'md',
+    note: '8px · panels',
+    boxStyle: { borderRadius: 'var(--dc-radius-md)' },
+  },
+  {
+    label: 'lg',
+    note: '12px · overlays',
+    boxStyle: { borderRadius: 'var(--dc-radius-lg)' },
+  },
+  {
+    label: 'full',
+    note: 'pills · dots',
+    boxStyle: { borderRadius: 'var(--dc-radius-full)', width: '48px' },
+  },
+]
+
+// The elevation boxes share a wider surface-on-shadow shape; only the border /
+// shadow differs per item.
+const elevBox = (extra: BoxSpec['boxStyle']): BoxSpec['boxStyle'] => ({
+  width: '134px',
+  height: '56px',
+  background: 'var(--dc-surface)',
+  borderRadius: 'var(--dc-radius-md)',
+  ...extra,
+})
+
+const ELEVATION: BoxSpec[] = [
+  {
+    note: 'border-line',
+    content: '1px border',
+    boxStyle: elevBox({ border: 'var(--dc-border-line)' }),
+  },
+  {
+    note: 'border-strong',
+    content: 'strong',
+    boxStyle: elevBox({ border: '1px solid var(--dc-border-strong)' }),
+  },
+  {
+    note: 'rare — hairline lift',
+    content: 'shadow-sm',
+    boxStyle: elevBox({
+      border: 'var(--dc-border-line)',
+      boxShadow: 'var(--dc-shadow-sm)',
+    }),
+  },
+  {
+    note: 'menus / popovers only',
+    content: 'overlay',
+    boxStyle: elevBox({
+      border: 'var(--dc-border-line)',
+      boxShadow: 'var(--dc-shadow-overlay)',
+    }),
+  },
+]
+
+export function SpacingScale() {
+  return <SpecimenSpacingScale steps={SPACE} />
+}
+
+export function RadiusRow() {
+  return <SpecimenBoxRow items={RADII} />
+}
+
+export function ElevationRow() {
+  return <SpecimenBoxRow items={ELEVATION} />
+}

package/src/ui/design-system/primer-specimens/type.tsx

@@ -0,0 +1,75 @@
+/**
+ * Type specimens for Display Case's own Primer — the two-family pairing (Hanken
+ * Grotesk for chrome, JetBrains Mono for developer texture), the dense px-based
+ * size scale, and the three weights plus the signature uppercase eyebrow label.
+ *
+ * Thin wrappers over the reusable {@link FontFamilies}/{@link TypeScale}/
+ * {@link WeightSpecimen} primitives (under `components/primer-specimen/`); the
+ * Display-Case-specific data lives here.
+ */
+import { Eyebrow } from '../components'
+import {
+  type FontFamily,
+  FontFamilies as SpecimenFontFamilies,
+  TypeScale as SpecimenTypeScale,
+  type TypeStep,
+  type WeightSpec,
+  WeightSpecimen,
+} from '../components/primer-specimen'
+
+const FAMILIES: FontFamily[] = [
+  {
+    tag: 'Sans · UI',
+    sample: 'Display Case shows the work, not itself',
+    note: 'Hanken Grotesk, ui-sans-serif, system-ui, "Segoe UI", Roboto…',
+  },
+  {
+    tag: 'Mono · Code',
+    sample: '/render/<component>/<case>?theme=dark',
+    note: 'JetBrains Mono, ui-monospace, "SF Mono", Menlo…',
+    mono: true,
+  },
+]
+
+const SCALE: TypeStep[] = [
+  { tag: 'xl · 28', size: '28px', sample: 'Doc heading' },
+  { tag: 'lg · 20', size: '20px', sample: 'Section title' },
+  { tag: 'md · 16', size: '16px', sample: 'Icon glyph / emphasis' },
+  {
+    tag: 'base · 14',
+    size: '14px',
+    sample: 'Chrome baseline — nav, buttons, body',
+  },
+  { tag: 'sm · 12', size: '12px', sample: 'Secondary — zoom %, captions' },
+  { tag: 'xs · 11', size: '11px', sample: 'Eyebrow labels, dimension hints' },
+]
+
+const WEIGHTS: WeightSpec[] = [
+  { weight: 400, name: 'Normal', role: 'body' },
+  { weight: 500, name: 'Medium', role: 'active' },
+  { weight: 600, name: 'Semibold', role: 'titles' },
+]
+
+export function FontFamilies() {
+  return <SpecimenFontFamilies families={FAMILIES} />
+}
+
+export function TypeScale() {
+  return <SpecimenTypeScale steps={SCALE} />
+}
+
+export function Weights() {
+  return (
+    <WeightSpecimen
+      weights={WEIGHTS}
+      footer={
+        <>
+          <div className="dcpl-divider" />
+          <Eyebrow>
+            Components · group label · 11px / 500 / 0.08em uppercase
+          </Eyebrow>
+        </>
+      }
+    />
+  )
+}

package/src/ui/design-system/primer.mdx

@@ -0,0 +1,236 @@
+import { Button, Eyebrow, Stage, Wordmark } from './components'
+import { MarigoldRamp, PaperRamp, SemanticSwatches, StatusHues, DefList, StatesRow, LayoutMock, FontFamilies, TypeScale, Weights, SpacingScale, RadiusRow, ElevationRow, Glyphs, RenderAddress, ControlsOverview, ShowcaseOverview, PrimerOverview } from './primer-specimens'
+
+<Eyebrow tone="accent">Primer</Eyebrow>
+
+# Design System
+
+Display Case is **chrome that defers to the content**. Its whole job is to frame
+someone else's component — the exhibit — so the showcase itself stays quiet,
+warm, and legible. It's Bun-native, AI-forward, and a lightweight alternative to
+Storybook. This page is the **Primer**: long-form wall text with embedded live
+specimens, authored in MDX and dogfooding the design system's own components.
+
+<Display
+  title="Wordmark"
+  subtitle="Type-only lockup — brackets frame the name like a case">
+  <Wordmark style={{ fontSize: '0.875rem' }}>Display Case</Wordmark>
+  <Wordmark style={{ fontSize: '1.5rem' }}>Display Case</Wordmark>
+  <Wordmark style={{ fontSize: '2.25rem' }}>Display Case</Wordmark>
+</Display>
+
+Three ideas shape every decision here. **Defer to the content** — the chrome is
+small, warm, and recessive; the component on the stage owns the visual weight.
+**Have a little charm** — paper neutrals, a single marigold accent, a bracketed
+wordmark, soft corner ticks; crafted, not clinical. **Be legible to machines** —
+deterministic render URLs, a manifest-first mindset, grouped addressable controls.
+
+## Content fundamentals
+
+How Display Case writes. The vibe is a calm museum primer, not a marketing
+page — quietly opinionated, never shouting, never decorating the copy.
+
+<Display
+  title="Voice & mechanics"
+  subtitle="The rules every label, button, and line of copy follows"
+  flush>
+  <DefList />
+</Display>
+
+## Visual foundations
+
+The "Vitrine" identity — warm, editorial, flat, and quiet. Detailed specimens
+for colour, type, and spacing follow in their own sections; these are the
+principles that bind them.
+
+**Elevation** is flat by default — the only thing that lifts is a genuinely
+floating layer (a menu or popover). Everything else is border-led; there are no
+card shadows. **Backgrounds** carry no gradients, photos, or patterns; the one
+permitted texture is the faint dotted backdrop behind an exhibit, and the corner
+ticks are the only decorative flourish. **Motion** is quiet and quick — around
+120ms on a gentle ease, no bounces or loops. **Interaction states**: hover is a
+warm fill wash, pressed deepens it with a half-pixel nudge, **selected is
+marigold**, focus draws a 2px marigold ring, and disabled drops to ~45% opacity.
+
+<Display
+  title="States"
+  subtitle="Hover · selected (marigold) · focus · disabled">
+  <StatesRow />
+</Display>
+
+<Display
+  title="Layout"
+  subtitle="A fixed three-region grid — header, sidebar, main">
+  <LayoutMock />
+</Display>
+
+## Colours
+
+Warm paper neutrals, not cold grey. The canvas is ivory, the sidebar a touch
+warmer, text a warm near-black ink — never `#000`. One colour does all the
+emphatic work: **marigold** marks the active case, focus rings, and links.
+Restraint is the point — a second accent would compete with the exhibit.
+
+Warmth never costs legibility — every text and accent pairing clears **WCAG AA**
+in both themes. The accent takes the most tuning: small marigold text on
+near-white paper is hard-capped by the 4.5∶1 rule, so the brand token sits at
+**`#a8570a`** — the brightest marigold that still clears AA *both* as a label on
+the sidebar fill and under the white text of an accent button. (The ramp's
+brighter `#c2690a` reads at only ~3.5 as text, so it stays a fill/decoration
+hue.) The quiet "subtle" text tier and the status hues are likewise nudged per
+theme to stay readable on ivory and on charcoal.
+
+<Display
+  title="Accent — marigold"
+  subtitle="The brand token is #a8570a (AA-tuned); the ramp's #c2690a anchors the family">
+  <MarigoldRamp />
+</Display>
+
+<Display
+  title="Paper ramp"
+  subtitle="Warm taupe-undertoned neutrals — surfaces, text, borders">
+  <PaperRamp />
+</Display>
+
+<Display
+  title="Semantic roles — light"
+  subtitle="The role tokens components consume"
+  theme="light">
+  <SemanticSwatches />
+</Display>
+
+<Display
+  title="Semantic roles — dark"
+  subtitle="The same roles under data-theme=dark — warm charcoal, never pure black"
+  theme="dark">
+  <SemanticSwatches />
+</Display>
+
+<Display
+  title="Status hues"
+  subtitle="Reserved for check output — pass, warn, fail. Lift on charcoal to hold AA.">
+  <StatusHues />
+</Display>
+
+## Type
+
+Two families. **Hanken Grotesk** carries all chrome text; **JetBrains Mono**
+carries developer texture — labels, values, code, and the wordmark. A dense 14px
+base keeps the chrome compact so the exhibit gets the room.
+
+<Display
+  title="Font families"
+  subtitle="System sans for chrome, mono for code & values">
+  <FontFamilies />
+</Display>
+
+<Display
+  title="Type scale"
+  subtitle="px-based; the chrome lives small so content gets room">
+  <TypeScale />
+</Display>
+
+<Display
+  title="Weights & labels"
+  subtitle="Three weights; the uppercase eyebrow pattern">
+  <Weights />
+</Display>
+
+## Spacing
+
+Tight, rem-based spacing keeps the chrome compact. Corners are modest — 5px on
+controls, 8px on panels, 12px on overlays. **Borders carry the structure**: 1px
+warm hairlines define every region, and elevation is reserved for floating layers.
+
+<Display
+  title="Spacing scale"
+  subtitle="Tight, rem-based — dense chrome yields room to content">
+  <SpacingScale />
+</Display>
+
+<Display
+  title="Radius"
+  subtitle="Modest, precise — softened, never pill-round or brutalist-square">
+  <RadiusRow />
+</Display>
+
+<Display
+  title="Borders & elevation"
+  subtitle="Flat by default — borders carry structure, not shadow">
+  <ElevationRow />
+</Display>
+
+## Brand
+
+The wordmark is type only — `[ Display Case ]` with mono brackets in marigold.
+There is no logo image, and that's intentional. The icon vocabulary is just as
+restrained: Unicode glyphs only — no icon font, no SVG, no emoji.
+
+<Display
+  title="Iconography"
+  subtitle="Unicode glyphs only — rendered in the UI font">
+  <Glyphs />
+</Display>
+
+## Components
+
+Three families compose the whole interface, mirroring the `components/` folders.
+**Controls** are the input atoms, **showcase parts** are the shell's molecules
+and organisms, and the **Primer primitives** are the prop-driven specimens this
+wall text is assembled from. Each family below is one grouped exhibit — a mono
+tag on the left, the live component on the right. **Display Case dogfoods every
+one of them.**
+
+<Display
+  title="Controls"
+  subtitle="Button · IconButton · Input · Select">
+  <ControlsOverview />
+</Display>
+
+<Display
+  title="Showcase parts"
+  subtitle="Eyebrow · Chip · NavItem · Stage · FlowNav · TweaksPanel · RenderAddress">
+  <ShowcaseOverview />
+</Display>
+
+<Display
+  title="Primer primitives"
+  subtitle="SwatchGrid · SpacingScale · GlyphGrid · SpecimenBoxRow">
+  <PrimerOverview />
+</Display>
+
+## Deterministic render URLs
+
+Every case renders at a stable URL. **Same URL, same render** — so an agent can
+enumerate the manifest, snapshot exactly one variant, and verify it without a
+human in the loop. Tweak state encodes into the query string, so a specific
+configuration is a link you can paste.
+
+<Display
+  title="Render address"
+  subtitle="GET /render/<component>/<case>?theme=…&t.<tweak>=…">
+  <RenderAddress />
+</Display>
+
+## Get started
+
+1. **Link the tokens once.** Pull in `styles.css` — every value is a `--dc-*`
+   custom property.
+2. **Render under a scope.** Wrap anything in `data-theme="light"` or `"dark"`.
+3. **Wrap specimens.** Put each live demo in `<Display title subtitle theme>`;
+   its title becomes the sidebar table-of-contents entry.
+
+```mdx
+import { Button, Stage } from './components'
+
+<Display title="Button" subtitle="The one true action" theme="dark">
+  <Stage caption="Playground">
+    <Button variant="accent">Snapshot</Button>
+  </Stage>
+</Display>
+```
+
+Switch to **Cases** in the sidebar to browse every component and its variants on
+the stage. The source of truth for this system is the **Display Case Design
+System** project on [claude.ai/design](https://claude.ai/design), kept in sync
+via `/design-sync`.

package/src/ui/design-system/styles.css

@@ -0,0 +1,14 @@
+/* ============================================================
+   Display Case Design System — "The Vitrine".
+   Global stylesheet entry point. Consumers link THIS one file;
+   it is a manifest of @imports only. Every token and the webfont
+   declarations live in the files below.
+
+   Display Case dogfoods this system: its own browse chrome
+   (ui/chrome.css) is styled entirely from these `--dc-*` tokens.
+   ============================================================ */
+
+@import "./tokens/fonts.css";
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/spacing.css";

package/src/ui/design-system/tokens/colors.css

@@ -0,0 +1,172 @@
+/* ============================================================
+   Display Case — Color tokens
+   "The Vitrine": warm paper neutrals, a warm-ink primary, and a
+   single marigold accent. Deliberately NOT cold gray — the chrome
+   is calm and warm so the showcased component is the exhibit.
+   No external UI library is referenced.
+   ============================================================ */
+
+:root {
+  /* --- Paper ramp (warm, taupe-undertoned neutrals) ----------- */
+  --dc-paper-50: #fbfaf6;
+  --dc-paper-100: #f4f1e9;
+  --dc-paper-200: #e6e0d4;
+  --dc-paper-300: #d6cebe;
+  --dc-paper-400: #b3a896;
+  --dc-paper-500: #8a8073;
+  --dc-paper-600: #6b6259;
+  --dc-paper-700: #4a423a;
+  --dc-paper-800: #2e2822;
+  --dc-paper-900: #211d18;
+  --dc-paper-950: #15110d;
+
+  /* --- Marigold ramp (the one accent) ------------------------- */
+  --dc-marigold-200: #fbe3bb;
+  --dc-marigold-300: #f6c878;
+  --dc-marigold-400: #f0a23b;
+  --dc-marigold-500: #e0820b; /* mid */
+  --dc-marigold-600: #c2690a; /* the marigold family's nominal accent step  */
+  --dc-marigold-700: #9a4f0a; /* deeper — the accent's hover/pressed         */
+
+  /* --- Status hues (used sparingly, for check output) --------- */
+  --dc-green-600: #3f7d4e;
+  --dc-amber-500: #d98a1f;
+  --dc-red-600: #c4493a;
+  --dc-red-700: #9e3528;
+
+  /* ============================================================
+     Semantic aliases — LIGHT (default)
+     These are the names components consume.
+     ============================================================ */
+  --dc-bg: var(--dc-paper-50); /* app canvas             */
+  --dc-bg-subtle: var(--dc-paper-100); /* sidebar / raised fill  */
+  --dc-surface: #ffffff; /* inputs / stage inside  */
+  --dc-fg: var(--dc-paper-900); /* primary text (warm ink)*/
+  --dc-fg-muted: var(--dc-paper-600); /* labels / secondary     */
+  --dc-fg-subtle: #736a5d; /* quiet text — the lightest warm taupe that still
+                              clears AA (4.5) on paper-50/100 + white. paper-500
+                              (#8a8073) read at only ~3.4–3.9. */
+  --dc-border: var(--dc-paper-200); /* warm hairlines         */
+  --dc-border-strong: var(--dc-paper-300);
+
+  /* Primary = warm ink (rare, for the one true action). */
+  --dc-ink: var(--dc-paper-900);
+  --dc-ink-hover: var(--dc-paper-800);
+  --dc-ink-fg: var(--dc-paper-50);
+
+  /* Accent = marigold (active case, focus, links, highlights). Tuned to #a8570a:
+     the brightest marigold that still clears AA *both* as small text on paper
+     (4.6 on the sidebar fill) and under white fill text on the accent button
+     (5.2) — the two ways the accent is used. The ramp's nominal #c2690a reads at
+     only ~3.5 as text; this keeps as much of that brightness as AA allows. -700
+     carries the hover. */
+  --dc-brand: #a8570a;
+  --dc-brand-hover: var(--dc-marigold-700);
+  --dc-brand-fg: #ffffff;
+  --dc-brand-subtle: #fbf0dd; /* faint marigold wash     */
+
+  --dc-hover: var(--dc-paper-100); /* control hover fill      */
+  --dc-active: var(--dc-paper-200); /* control pressed fill    */
+  --dc-focus-ring: var(--dc-marigold-400);
+
+  --dc-success: var(--dc-green-600);
+  --dc-warning: var(--dc-amber-500);
+  --dc-danger: var(--dc-red-600);
+
+  /* Consumer-app canvas names the render harness + app-surface specimens paint
+     (server.ts/primer `var(--color-bg, …)`). The Vitrine IS its own consumer,
+     so it fulfils that contract by aliasing them to its themed surface — without
+     this, the /render frame body stays transparent and every dark-theme specimen
+     renders on a white canvas (failing contrast). Re-declared per theme below so
+     they re-resolve against the active scope's --dc-bg/--dc-fg. */
+  --color-bg: var(--dc-bg);
+  --color-fg: var(--dc-fg);
+}
+
+/* ============================================================
+   Semantic aliases — LIGHT (explicit scope)
+   The light values above live only on :root, so a scope nested
+   inside a dark ancestor (e.g. a <Display theme="light"> specimen
+   on a dark primer) needs them re-declared to override the
+   inherited dark values. The ramps stay global on :root.
+   ============================================================ */
+[data-theme="light"] {
+  --dc-bg: var(--dc-paper-50);
+  --dc-bg-subtle: var(--dc-paper-100);
+  --dc-surface: #ffffff;
+  --dc-fg: var(--dc-paper-900);
+  --dc-fg-muted: var(--dc-paper-600);
+  --dc-fg-subtle: #736a5d;
+  --dc-border: var(--dc-paper-200);
+  --dc-border-strong: var(--dc-paper-300);
+  /* Re-resolve the composite so its inner var(--dc-border) binds to *this*
+     scope's border colour — see the note in the dark block below. */
+  --dc-border-line: var(--dc-border-width) solid var(--dc-border);
+
+  --dc-ink: var(--dc-paper-900);
+  --dc-ink-hover: var(--dc-paper-800);
+  --dc-ink-fg: var(--dc-paper-50);
+
+  --dc-brand: #a8570a;
+  --dc-brand-hover: var(--dc-marigold-700);
+  --dc-brand-fg: #ffffff;
+  --dc-brand-subtle: #fbf0dd;
+
+  --dc-hover: var(--dc-paper-100);
+  --dc-active: var(--dc-paper-200);
+  --dc-focus-ring: var(--dc-marigold-400);
+
+  --dc-success: var(--dc-green-600);
+  --dc-warning: var(--dc-amber-500);
+  --dc-danger: var(--dc-red-600);
+
+  --color-bg: var(--dc-bg);
+  --color-fg: var(--dc-fg);
+}
+
+/* ============================================================
+   Semantic aliases — DARK
+   Activated by [data-theme="dark"] on <html> or any scope.
+   Warm charcoal, never pure black.
+   ============================================================ */
+:root[data-theme="dark"],
+[data-theme="dark"] {
+  --dc-bg: #1a1714;
+  --dc-bg-subtle: #211d19;
+  --dc-surface: #262019;
+  --dc-fg: #f2ede3;
+  --dc-fg-muted: #a89e91;
+  --dc-fg-subtle: #9a8f80; /* quiet text on charcoal — lifted from #7c7164
+                              (~3.4–3.7) to clear AA on bg/subtle/surface. */
+  --dc-border: #332c24;
+  --dc-border-strong: #453c30;
+  /* Composite border tokens substitute their inner var() at the scope where
+     they are *declared*, not where they are used. Declared only on :root, the
+     light --dc-border would stay baked into --dc-border-line even inside a
+     forced-dark scope, so themed swatches/tiles kept light hairlines. Re-declare
+     it here so the composite re-resolves against this scope's --dc-border. */
+  --dc-border-line: var(--dc-border-width) solid var(--dc-border);
+
+  --dc-ink: #f2ede3;
+  --dc-ink-hover: #ffffff;
+  --dc-ink-fg: #1a1714;
+
+  --dc-brand: var(--dc-marigold-400);
+  --dc-brand-hover: var(--dc-marigold-300);
+  --dc-brand-fg: #1a1714;
+  --dc-brand-subtle: #2a2118;
+
+  --dc-hover: #211d19;
+  --dc-active: #2e2820;
+  --dc-focus-ring: var(--dc-marigold-500);
+
+  /* Status as TEXT on charcoal: the light red/green read at only ~3.3 here, so
+     lift them for dark. (warning/amber already clears AA on charcoal.) Tags and
+     badges that carry white text use the fixed ramp reds directly, not these. */
+  --dc-success: #579d68;
+  --dc-warning: var(--dc-amber-500);
+  --dc-danger: #d97366;
+
+  --color-bg: var(--dc-bg);
+  --color-fg: var(--dc-fg);
+}

package/src/ui/design-system/tokens/fonts.css

@@ -0,0 +1,18 @@
+/* ============================================================
+   Display Case — Font face declarations
+   Two webfonts give the chrome its developer-native personality:
+     · Hanken Grotesk — warm, legible UI grotesk for all chrome text
+     · JetBrains Mono — characterful mono for labels, values, code,
+       and the bracketed wordmark
+   Loaded from the Google Fonts CDN. Swap these @import lines for
+   self-hosted woff2 if you need a fully offline bundle.
+
+   Note: when Display Case serves its own browse chrome it injects
+   the equivalent <link rel="stylesheet"> into the document head
+   (see server.ts FONT_LINKS) rather than this @import, so the font
+   declaration leads the document and never fights a consumer's own
+   stylesheet @imports. This file remains the canonical source for
+   anyone linking styles.css directly.
+   ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");