@bitbaum/design-tokens 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mao Nakamoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# @bitbaum/design-tokens
+
+The design **single source of truth** for OrangeCat, FleetCrown and Solon.
+
+One file — [`tokens.css`](./tokens.css) — defines every colour, typeface, weight,
+tracking, radius and shared primitive the three products use. They import it.
+Nothing is copied.
+
+## Why
+
+These tokens used to be hand-copied into three repos, and they drifted. Solon's
+`globals.css` carried a comment claiming its tokens matched OrangeCat's while
+sharing **zero** names or values with it — so the three products looked like
+three different companies. Copies drift; imports cannot.
+
+## Retheming the entire stack
+
+1. Edit the block marked `▼▼▼ THE KNOBS ▼▼▼` in `tokens.css`. Nothing else.
+2. Tag a release: `git tag v1.2.0 && git push --tags`
+3. Bump `@bitbaum/design-tokens` in the three apps. Their CI auto-merges.
+
+Changing the display typeface is **one line**:
+
+```css
+--font-display: "Instrument Serif", Georgia, serif;
+--font-display-weight: 400;   /* the face's weight lives WITH the face */
+--tracking-display: -0.015em; /* and so does its tracking */
+```
+
+## Install
+
+```jsonc
+// package.json
+"@bitbaum/design-tokens": "github:bitbaum/design-tokens#v1.1.0"
+```
+
+```tsx
+// app/layout.tsx — import BEFORE the app's own globals.css
+import "@bitbaum/design-tokens/tokens.css";
+import "./globals.css";
+```
+
+```js
+// tailwind.config.js (v3)
+module.exports = {
+  presets: [require("@bitbaum/design-tokens/tailwind-preset")],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+};
+```
+
+Tailwind v4 apps consume `tokens.css` through `@theme`; the variable names are
+identical, so both paths stay in sync.
+
+## The contract
+
+Components declare **intent**, never mechanics.
+
+| Do | Don't | Why |
+|---|---|---|
+| `className="font-display"` | `font-['Instrument_Serif']` | the face is not a component's business |
+| `className="font-display"` | `font-display font-bold` | the display face has **one weight**; a synthesized bold looks cheap |
+| `className="bg-surface-base"` | `bg-[#1c1c1c]` | retheming must not require finding hex codes |
+| `className="text-accent"` | `text-[#ff5c00]` | one action colour, one definition |
+| `bg-accent text-on-accent` | `bg-accent text-white` | white on the accent is **3.10:1** and fails AA; the paired ink is 6.10:1 |
+| `className="tabular"` | — | numbers that change in place must not jitter |
+| `font-display` at ≥`text-2xl` | `font-display text-lg` | below 24px the high-contrast serif reads *lighter* than the body sans and hierarchy inverts |
+| `className="wordmark"` | `font-display` on the logo | uppercase + open tracking is the one small size a display serif survives |
+
+Enforce it in each repo's design gate so drift fails the build rather than
+shipping quietly.
+
+## Typefaces
+
+Self-hosted (latin + latin-ext), no runtime requests to Google:
+
+| Role | Face | Weights | Carries |
+|---|---|---|---|
+| display | Instrument Serif | 400 only | headlines, wordmarks |
+| sans | Inter | 400–700 variable | all UI and body text |
+| mono | IBM Plex Mono | 400, 500 | addresses, signatures, hashes, tallies |
+
+All three are SIL Open Font License.
+
+### Why a serif
+
+Every AI and infrastructure company competes inside the same dark-canvas
+grotesque convention, where the winner is whoever has the largest design budget.
+A high-contrast serif exits that comparison: it reads institutional rather than
+startup, which is exactly right for a stack whose product is *legitimacy* —
+signed votes, verifiable treasuries, an append-only audit trail.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@bitbaum/design-tokens",
+  "version": "1.1.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "description": "Design SSOT for OrangeCat, FleetCrown and Solon — tokens, self-hosted faces, and the Tailwind preset that maps them.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitbaum/design-tokens.git"
+  },
+  "files": [
+    "tokens.css",
+    "tailwind-preset.js",
+    "fonts"
+  ],
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./fonts/*": "./fonts/*"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.4.0",
+    "eslint": "^10.9.1",
+    "globals": "^17.12.0",
+    "prettier": "3.9.6",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test test/*.test.js",
+    "verify": "pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm test",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,113 @@
+/**
+ * @bitbaum/design-tokens — Tailwind v3 preset.
+ *
+ * Maps utility names onto the CSS custom properties defined in tokens.css.
+ * Every value here resolves to a var — never a literal. That is the whole
+ * point: retheming edits tokens.css, and nothing in any app changes.
+ *
+ * Usage (tailwind.config.js):
+ *   module.exports = {
+ *     presets: [require('@bitbaum/design-tokens/tailwind-preset')],
+ *     content: [...],
+ *   }
+ *
+ * Tailwind v4 apps (FleetCrown) consume tokens.css directly via @theme instead;
+ * the variable names are identical, so the two paths stay in sync.
+ */
+
+// HSL channel triplets, so `bg-surface-raised/50` composes alpha correctly.
+/**
+ * @param {string} token CSS custom property name, e.g. `--text-primary`.
+ * @returns {string} Tailwind colour value carrying the alpha placeholder.
+ */
+const withAlpha = (token) => `hsl(var(${token}) / <alpha-value>)`;
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        fg: {
+          primary: withAlpha('--text-primary'),
+          secondary: withAlpha('--text-secondary'),
+          tertiary: withAlpha('--text-tertiary'),
+          muted: withAlpha('--text-muted'),
+          inverted: withAlpha('--text-inverted'),
+        },
+        surface: {
+          public: withAlpha('--surface-public'),
+          page: withAlpha('--surface-page'),
+          base: withAlpha('--surface-base'),
+          raised: withAlpha('--surface-raised'),
+          overlay: withAlpha('--surface-overlay'),
+          modal: withAlpha('--surface-modal'),
+          drawer: withAlpha('--surface-drawer'),
+          hover: withAlpha('--surface-hover'),
+        },
+        border: {
+          subtle: withAlpha('--border-subtle'),
+          DEFAULT: withAlpha('--border-default'),
+          strong: withAlpha('--border-strong'),
+          interactive: withAlpha('--border-interactive'),
+        },
+        // Lets components write `border-default` alongside `border-subtle`.
+        default: withAlpha('--border-default'),
+        accent: {
+          DEFAULT: 'var(--public-accent)',
+          hover: 'var(--accent-hover)',
+          muted: 'hsl(var(--accent-muted))',
+          text: 'hsl(var(--accent-text))',
+        },
+        // The label colour for text ON the accent. `bg-accent text-white` is
+        // 3.10:1 and fails AA; `bg-accent text-on-accent` is 6.10:1. Paired
+        // with the background it belongs to so nobody has to remember which
+        // ink an orange button takes.
+        'on-accent': withAlpha('--on-accent'),
+        // Bitcoin's own orange — means "this is Bitcoin", never an action.
+        bitcoin: 'var(--bitcoin-orange)',
+        status: {
+          positive: withAlpha('--status-positive'),
+          warning: withAlpha('--status-warning'),
+          negative: withAlpha('--status-negative'),
+          neutral: withAlpha('--status-neutral'),
+          // The -subtle tokens already carry their own alpha, so they are used
+          // as-is rather than through withAlpha.
+          'positive-subtle': 'hsl(var(--status-positive-subtle))',
+          'warning-subtle': 'hsl(var(--status-warning-subtle))',
+          'negative-subtle': 'hsl(var(--status-negative-subtle))',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        display: ['var(--font-display)'],
+        mono: ['var(--font-mono)'],
+      },
+      letterSpacing: {
+        display: 'var(--tracking-display)',
+        label: 'var(--tracking-label)',
+        caps: 'var(--tracking-caps)',
+      },
+      borderRadius: {
+        control: 'var(--radius-control)',
+        surface: 'var(--radius-surface)',
+        pill: 'var(--radius-pill)',
+      },
+      fontSize: {
+        // Fluid display sizes. Line heights ride with them so a headline never
+        // needs a per-breakpoint leading override.
+        'display-1': ['var(--text-display-1)', { lineHeight: '1.04' }],
+        'display-2': ['var(--text-display-2)', { lineHeight: '1.12' }],
+        'display-3': ['var(--text-display-3)', { lineHeight: '1.2' }],
+      },
+      maxWidth: {
+        shell: 'var(--shell-max)',
+        lede: 'var(--measure-lede)',
+        copy: 'var(--measure-copy)',
+      },
+      spacing: {
+        nav: 'var(--public-nav-height)',
+        section: 'var(--section-py)',
+        'section-tight': 'var(--section-py-tight)',
+      },
+    },
+  },
+};

package/tokens.css

@@ -0,0 +1,428 @@
+/**
+ * @bitbaum/design-tokens — the design SSOT for OrangeCat, FleetCrown and Solon.
+ *
+ * ┌──────────────────────────────────────────────────────────────────────────┐
+ * │  TO RETHEME THE ENTIRE STACK, EDIT THE "KNOBS" BLOCK BELOW AND NOTHING   │
+ * │  ELSE. Then tag a release and bump the dependency in the three apps.     │
+ * └──────────────────────────────────────────────────────────────────────────┘
+ *
+ * Why this package exists: the same tokens used to be hand-copied into three
+ * repos. They drifted — Solon's globals.css carried a comment claiming it
+ * matched OrangeCat while sharing zero values with it, and the three products
+ * looked like three companies. Copies drift; imports cannot.
+ *
+ * Rules for consumers:
+ *   - Components use ROLES (.font-display, bg-surface-base, text-fg-secondary).
+ *     They never name a typeface, a weight, or a hex value.
+ *   - A face's required weight and tracking are declared HERE, next to the face,
+ *     so swapping a single-weight display serif for a variable grotesque is one
+ *     edit and zero component changes.
+ *   - Colours are HSL channel triplets so Tailwind composes alpha:
+ *     `hsl(var(--surface-raised) / 0.5)` via `bg-surface-raised/50`.
+ */
+
+/* ══════════════════════════════════════════════════════════════════════════
+   FACES — self-hosted, latin + latin-ext. No external requests at runtime.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* Instrument Serif — display. SINGLE WEIGHT (400): there is no bold. Asking for
+   700 makes the browser synthesize a fake bold, which looks cheap; that is why
+   --font-display-weight exists and why components must not set a weight. */
+@font-face {
+  font-family: 'Instrument Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/instrument-serif-latin.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Instrument Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/instrument-serif-latin-ext.woff2) format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Instrument Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/instrument-serif-italic-latin.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Inter — UI/body. Variable 400–700. */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/inter-latin.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/inter-latin-ext.woff2) format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* IBM Plex Mono — load-bearing strings: Bitcoin addresses, signatures, hashes,
+   tallies. A hash must look identical on all three sites. */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/plex-mono-400-latin.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./fonts/plex-mono-500-latin.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+  /* ════════════════════════════════════════════════════════════════════════
+     ▼▼▼  THE KNOBS  ▼▼▼   Everything below this line is derived from these.
+     ════════════════════════════════════════════════════════════════════════ */
+
+  /* — Typeface roles. Swap a face here and the whole stack changes. ——————— */
+  --font-display: 'Instrument Serif', Georgia, serif;
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* The weight and tracking the DISPLAY FACE needs. These belong to the face,
+     not to the component — that is what makes a face swap a one-line change.
+     Instrument Serif has one weight (400) and, being a high-contrast serif,
+     wants far less negative tracking than a grotesque does. */
+  --font-display-weight: 400;
+  --tracking-display: -0.015em;
+
+  /* — The one action colour across all three products. Theme-independent. — */
+  --public-accent: #ff5c00;
+
+  /**
+   * The label colour for text sitting ON --public-accent.
+   *
+   * White on #ff5c00 is 3.10:1 — below the 4.5 AA floor — so every primary
+   * CTA in the fleet was failing at once: Solon's "Open the Dashboard",
+   * OrangeCat's "Get Started", FleetCrown's "Launch agent". Measured, not
+   * guessed. Near-black on the same orange is 6.10:1.
+   *
+   * The orange is deliberately NOT darkened to rescue white text: it would
+   * have to reach #c74600 to clear the floor, and that is a duller, muddier
+   * colour. The accent IS the brand; the label is what gives way.
+   *
+   * Theme-independent for the same reason --public-accent is. The accent does
+   * not flip between themes, so a label that flipped with the theme would be
+   * unreadable in one of them — which is exactly why no existing text token
+   * could be reused here (--text-primary inverts, this must not).
+   */
+  --on-accent: 0 0% 8%;
+
+  /**
+   * — The marketing band ——————————————————————————————————————————————————
+   * Always near-black, in BOTH themes, so a CTA reads the same regardless of
+   * the surrounding app theme. Deliberately not part of the ramp below.
+   */
+  --surface-public: 0 0% 4%;
+
+  /* ── LIGHT THEME ────────────────────────────────────────────────────────
+     :root is light and `.dark` overrides it — the same mechanism OrangeCat
+     uses, so an app can toggle themes without translating anything. An app
+     that is dark-only (Solon, FleetCrown's public surface) pins it by putting
+     `class="dark"` on <html> and never removing it. */
+
+  /* Surfaces — page < base < raised < overlay < modal < drawer */
+  --surface-page: 0 0% 97%;
+  --surface-base: 0 0% 100%;
+  --surface-raised: 0 0% 96%;
+  --surface-overlay: 0 0% 94%;
+  --surface-modal: 0 0% 100%;
+  --surface-drawer: 0 0% 98%;
+  --surface-hover: 0 0% 94%;
+
+  /* Text ramp */
+  --text-primary: 0 0% 10%;
+  --text-secondary: 0 0% 40%;
+  --text-tertiary: 0 0% 58%;
+  --text-muted: 0 0% 72%;
+  --text-inverted: 0 0% 98%;
+
+  /* Borders */
+  --border-subtle: 0 0% 94%;
+  --border-default: 0 0% 82%;
+  --border-strong: 0 0% 78%;
+  --border-interactive: 0 0% 30%;
+
+  /* Accent */
+  --accent-primary: var(--public-accent);
+  --accent-hover: #e44d00;
+  --accent-muted: 0 0% 10%;
+  --accent-text: 0 0% 10%;
+
+  /* Status — the only chromatic colours permitted outside the accent */
+  --status-positive: 145 60% 35%;
+  --status-positive-subtle: 145 60% 35% / 0.08;
+  --status-warning: 38 92% 50%;
+  --status-warning-subtle: 38 92% 50% / 0.08;
+  --status-negative: 0 65% 50%;
+  --status-negative-subtle: 0 65% 50% / 0.08;
+  --status-neutral: 0 0% 58%;
+
+  /* — Geometry —————————————————————————————————————————————————————————— */
+  --radius-control: 0.375rem;
+  --radius-surface: 0.5rem;
+  --radius-pill: 9999px;
+  --shell-max: 80rem;
+  --public-nav-height: 76px;
+
+  /* — Secondary tracking roles —————————————————————————————————————————— */
+  --tracking-label: 0.1em;
+  --tracking-caps: 0.16em;
+
+  /**
+   * — Vertical rhythm ————————————————————————————————————————————————————
+   * Pace is one decision, not a `py-20 sm:py-28` guess repeated on every
+   * section — that is how a page ends up with six slightly different rhythms.
+   * Fluid, so spacing that reads as generous at 1440 does not strand a phone
+   * with half a screen of emptiness.
+   */
+  --section-py: clamp(5rem, 9vw, 9rem);
+  --section-py-tight: clamp(3.5rem, 6vw, 6rem);
+
+  /**
+   * — Display scale ——————————————————————————————————————————————————————
+   * Fluid for the same reason: one confident size that resolves itself per
+   * viewport, rather than three breakpoint variants per heading. Note that
+   * display-3 bottoms out at 1.5rem — exactly the display face's size floor,
+   * so every step of this scale is safe to set in the display face.
+   */
+  --text-display-1: clamp(2.75rem, 5.4vw, 4.5rem);
+  --text-display-2: clamp(2rem, 3.4vw, 3rem);
+  --text-display-3: clamp(1.5rem, 2vw, 1.875rem);
+
+  /**
+   * — Measures for running text ——————————————————————————————————————————
+   * Headlines take their width from the column they sit in; a hero h1 with its
+   * own max-width as well ends up with two rules where only one ever binds.
+   */
+  --measure-lede: 46ch;
+  --measure-copy: 68ch;
+
+  /* ════════════════════════════════════════════════════════════════════════
+     ▲▲▲  END KNOBS  ▲▲▲
+     ════════════════════════════════════════════════════════════════════════ */
+
+  /* Bitcoin's own orange. Not a brand colour — it means "this is Bitcoin", so
+     it is deliberately NOT --public-accent and must not be used for actions. */
+  --bitcoin-orange: #f7931a;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   DARK THEME
+   Only the values that actually differ. Faces, weights, tracking, geometry,
+   rhythm, measures, --public-accent and --surface-public are theme-independent
+   and are NOT repeated here — repeating them is how a theme drifts from its
+   own light counterpart.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.dark {
+  /* Surfaces */
+  --surface-page: 0 0% 7%;
+  --surface-base: 0 0% 11%;
+  --surface-raised: 0 0% 14%;
+  --surface-overlay: 0 0% 17%;
+  --surface-modal: 0 0% 11%;
+  --surface-drawer: 0 0% 9%;
+  --surface-hover: 0 0% 13%;
+
+  /* Text ramp */
+  --text-primary: 0 0% 92%;
+  --text-secondary: 0 0% 65%;
+  --text-tertiary: 0 0% 48%;
+  --text-muted: 0 0% 32%;
+  --text-inverted: 0 0% 10%;
+
+  /* Borders */
+  --border-subtle: 0 0% 13%;
+  --border-default: 0 0% 20%;
+  --border-strong: 0 0% 24%;
+  --border-interactive: 0 0% 60%;
+
+  /* Accent */
+  --accent-primary: var(--public-accent);
+  --accent-hover: #ff7a33;
+  --accent-muted: 0 0% 92% / 0.08;
+  --accent-text: 0 0% 92%;
+
+  /* Status */
+  --status-positive: 145 55% 50%;
+  --status-positive-subtle: 145 55% 50% / 0.12;
+  --status-warning: 38 92% 60%;
+  --status-warning-subtle: 38 92% 60% / 0.12;
+  --status-negative: 0 75% 60%;
+  --status-negative-subtle: 0 75% 60% / 0.12;
+  --status-neutral: 0 0% 48%;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   SHARED PRIMITIVES — the chrome all three products present.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+body {
+  color: hsl(var(--text-primary));
+  background: hsl(var(--surface-page));
+  font-family: var(--font-sans);
+}
+
+/**
+ * The display treatment. Owns family + weight + tracking together so that a
+ * component only ever declares INTENT ("this is display type"), never the
+ * mechanics. Do not add font-bold/tracking-* alongside this class: the current
+ * face has no bold, and a synthesized one looks cheap.
+ */
+.font-display {
+  font-family: var(--font-display);
+  font-weight: var(--font-display-weight);
+  letter-spacing: var(--tracking-display);
+  /* Balance the line lengths so a headline never strands its last word alone on
+     a second line. Browsers cap this at a few lines, which is exactly the range
+     a display heading occupies; longer running text is unaffected. */
+  text-wrap: balance;
+}
+
+/**
+ * SIZE FLOOR — the display face is for DISPLAY sizes only: 1.5rem (24px) and up.
+ *
+ * Instrument Serif is high-contrast: its thin strokes thin out further as the
+ * type shrinks, so an 18px serif heading reads LIGHTER than the 16px sans
+ * paragraph beneath it and the hierarchy silently inverts. Below the floor,
+ * headings use the sans at 600. Each repo's design gate enforces this by
+ * rejecting `font-display` next to text-xs/sm/base/lg/xl.
+ */
+
+/**
+ * The wordmark. A high-contrast serif goes weak at small sizes in mixed case,
+ * but holds up in uppercase with open tracking — which is exactly what a
+ * wordmark is. This is the ONLY sanctioned use of the display face below the
+ * size floor described above.
+ */
+.wordmark {
+  font-family: var(--font-display);
+  font-weight: var(--font-display-weight);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/**
+ * Numbers that sit in columns or change in place — tallies, balances, counts.
+ * Tabular figures stop the layout jittering as values update.
+ */
+.tabular {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+/**
+ * Section rhythm. Marketing sections are full-bleed and own their inner
+ * container — a root layout must NOT wrap pages in one, or every hero renders
+ * as a box floating in a gutter instead of reaching the edges of the screen.
+ */
+.section-shell {
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--shell-max);
+  padding-inline: 1rem;
+}
+
+@media (min-width: 640px) {
+  .section-shell {
+    padding-inline: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .section-shell {
+    padding-inline: 2rem;
+  }
+}
+
+/** One accent glow and a masked grid over the near-black public surface. */
+.public-backdrop {
+  position: relative;
+  isolation: isolate;
+  background: hsl(var(--surface-public));
+  --public-glow-accent: rgb(255 92 0 / 0.1);
+  --public-grid-stroke: rgb(255 255 255 / 0.04);
+  --public-grid-size: 80px;
+}
+
+.public-backdrop::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: radial-gradient(60rem 30rem at 50% -10%, var(--public-glow-accent), transparent 70%);
+}
+
+.public-backdrop::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-image:
+    linear-gradient(to right, var(--public-grid-stroke) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--public-grid-stroke) 1px, transparent 1px);
+  background-size: var(--public-grid-size) var(--public-grid-size);
+  mask-image: radial-gradient(closest-side at 50% 35%, black, transparent);
+}
+
+/** The eyebrow pill that opens a marketing page on all three products. */
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid hsl(var(--border-default));
+  background: hsl(var(--surface-base));
+  padding: 0.375rem 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: hsl(var(--text-secondary));
+}
+
+.eyebrow::before {
+  content: '';
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--radius-pill);
+  background: var(--public-accent);
+}