@inixiative/config 0.5.183 → 0.5.184

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Inixiative
+
+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

@@ -6,44 +6,32 @@ Shared toolchain for the inixiative ecosystem: tsconfig/biome/tsup presets, a ve
 
 | Export | Use |
 | --- | --- |
-| `@inixiative/config/tsconfig/base.json` | bun library (bundler resolution, verbatimModuleSyntax, `types: ["bun"]`) |
-| `@inixiative/config/tsconfig/node.json` | base + `types: ["node"]` |
-| `@inixiative/config/tsconfig/react.json` | base + DOM lib + `jsx: react-jsx` |
-| `@inixiative/config/biome/base.json` | formatter + linter core (single quotes, lineWidth 100, recommended + strictness block) |
-| `@inixiative/config/biome/react.json` | overlay: hook dependency linting |
-| `@inixiative/config/tsup` | `node(options)` / `react(options)` build presets |
-| `@inixiative/config/lefthook/base.yml` | pre-commit hooks: typecheck + biome on staged files |
-
-Adoption is three stub files plus the devDependency:
-
-```jsonc
-// tsconfig.json
-{ "extends": "@inixiative/config/tsconfig/base.json", "exclude": ["dist"] }
-
-// biome.json
-{ "extends": ["@inixiative/config/biome/base.json"] }
-```
-
-```ts
-// tsup.config.ts
-import { node } from '@inixiative/config/tsup';
-
-export default node();
-```
+| `@inixiative/config/theme/public.css` | the brand: base, `--app-*` slots, status (`--success` / `--warning` / `--error`), UI (incl. `--shadow`) and type tokens, plus `@font-face` for Bricolage Grotesque, Instrument Sans and JetBrains Mono |
+| `@inixiative/config/theme/status.css` | the thread/work status layer (`--status-problem / attention / working / queued / done / idle / archived`) and the badge layer, for apps that show agent work |
+| `@inixiative/config/theme/domains.css` | four palettes on one structure, set with `data-domain="agentic \| building-blocks \| governance \| inixiative"` on any element; they nest |
+| `@inixiative/config/theme/marketing.css` | the marketing grammar: fluid type scale, spacing and section rhythm, container and gutter, radius, elevation and motion tokens (zeroed under `prefers-reduced-motion`), and the shared classes inside `.marketing` (`eyebrow` + `status-dot`, `button` / `button-secondary` / `text-link`, `nav`, `brand`, `section`, `card`, `card-grid`, `footer`, `prose`, all in `@layer components` so Tailwind utilities and unlayered page CSS override them) |
+| `@inixiative/config/theme/fonts/*` | the latin variable fonts `public.css` loads (SIL OFL 1.1, texts in `theme/fonts/LICENSES.md`) |
 
-Stubs hold `extends` plus minimal reviewed overrides only. This package never generates config bodies.
+Apps load `public.css`, then `status.css`, then their own CSS. Marketing pages load `public.css`, `domains.css`, then `marketing.css` (after template's `theme.css` where an app has it: `[data-domain]` ties `:root`/`.dark` on specificity, so load order decides), and put `class="marketing" data-domain="…"` on the page root. Light is `:root`; dark is the `.dark` class on `<html>`. Values are HSL channels: `hsl(var(--app-primary))`, `hsl(var(--border) / .5)`. The fonts load from `./fonts/` relative to `public.css`, so serve the folder as it ships. `demo/marketing.html` (not shipped) shows every domain, the type scale, buttons, sections and long-form prose; open it from a checkout.
 
-## Theme
+### Domain palettes
 
-The inixiative look, read at runtime by every app that wears it (Kingdom, Foundry), so a decision about the look lands in all of them with the next release.
+Each palette fills the same four slots; marketing CSS reads the slots directly (`--app-primary`), because template's `--primary` is resolved once on `:root` and does not follow a nested `data-domain`. The primary is the page's one accent (CTA, eyebrow, wordmark stop). Tertiary and quaternary appear only where they mean something (agentic: blue = shared, pink = Signet). `inixiative` is neutral ink; its secondary, tertiary and quaternary are the agentic, building-blocks and governance primaries, so each door on the hub can wear its domain. Long-form reading (`.prose`) is set for the light theme.
 
-| Export | Use |
-| --- | --- |
-| `@inixiative/config/theme/public.css` | the brand: base, `--app-*`, status (`--success` / `--warning` / `--error`), UI and type tokens, plus `@font-face` for Bricolage Grotesque, Instrument Sans and JetBrains Mono |
-| `@inixiative/config/theme/agentic.css` | the status layer (`--status-problem / attention / working / queued / done / idle / archived`) and the badge layer, for apps that show agent work |
-| `@inixiative/config/theme/fonts/*` | the latin variable fonts `public.css` loads (SIL OFL 1.1, texts in `theme/fonts/LICENSES.md`) |
+Contrast as text on the background (light `#f6f7f2`, dark ink `#0b1014`); the test holds every accent at 4.5:1 or more on the background and the card, and each accent's foreground on the accent.
 
-Load `public.css`, then `agentic.css`, then the app's own CSS. Light is `:root`; dark is the `.dark` class on `<html>`. Values are HSL channels: `hsl(var(--app-primary))`, `hsl(var(--border) / .5)`. The fonts load from `./fonts/` relative to `public.css`, so serve the folder as it ships.
+| Domain | Slot | Light | on `#f6f7f2` | Dark | on ink |
+| --- | --- | --- | --- | --- | --- |
+| agentic | primary | `#466713` | 6.08 | `#c8f77e` | 15.53 |
+| agentic | tertiary (shared) | `#1e69b8` | 5.18 | `#94c8ff` | 10.89 |
+| agentic | quaternary (Signet) | `#a33e84` | 5.45 | `#f1b7e2` | 11.48 |
+| building-blocks | primary (amber) | `#955104` | 5.64 | `#faba4c` | 11.10 |
+| building-blocks | tertiary (teal) | `#0c6d6e` | 5.69 | `#51d6cd` | 10.79 |
+| building-blocks | quaternary (brick) | `#ae3f29` | 5.51 | `#f9a18b` | 9.56 |
+| governance | primary (violet) | `#613bba` | 6.86 | `#c0a7fb` | 9.25 |
+| governance | tertiary (jade) | `#12684e` | 6.26 | `#66d6ad` | 10.73 |
+| governance | quaternary (rose) | `#a92d42` | 6.21 | `#fba7b8` | 10.31 |
+| inixiative | primary (ink) | `#0d1317` | 17.37 | `#eff2ed` | 16.93 |
 
 Apps load the theme from this package at runtime, so it is a runtime `dependency` of theirs. To keep that cheap this package has no runtime dependencies and every peer is optional; a test holds both.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inixiative/config",
-  "version": "0.5.183",
+  "version": "0.5.184",
   "description": "Shared toolchain for the inixiative ecosystem: tsconfig/biome/tsup presets, a version manifest (BOM), and a sync/check CLI",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,9 @@
     },
     "./ports.json": "./ports.json",
     "./theme/public.css": "./theme/public.css",
-    "./theme/agentic.css": "./theme/agentic.css",
+    "./theme/status.css": "./theme/status.css",
+    "./theme/domains.css": "./theme/domains.css",
+    "./theme/marketing.css": "./theme/marketing.css",
     "./theme/fonts/*": "./theme/fonts/*"
   },
   "scripts": {

package/theme/domains.css

@@ -0,0 +1,137 @@
+/*
+ * @inixiative/config/theme/domains.css — one structure, four palettes (Aron, 2026-11-02).
+ *
+ * Load after theme/public.css. A palette is the four --app-* slots (primary, secondary, tertiary,
+ * quaternary, each with its foreground) plus --ring, set on any element with `data-domain`:
+ *   agentic          Kingdom, Foundry, Archive, Oracle: lime = yours, blue = shared, pink = Signet (public.css's own values)
+ *   building-blocks  the primitives (json-rules, permissions, transitions, …): amber, teal, brick
+ *   governance       the whitepaper and proposals: violet, jade, rose
+ *   inixiative       the org: neutral ink; secondary/tertiary/quaternary are the three domain primaries
+ * Why an attribute and not one file per palette: palettes nest. The hub is `inixiative` and each door
+ * inside it wears its own domain (`<a data-domain="governance">`); a file per palette can't do that.
+ * Why raw tokens per mode and plain mappings: the `[data-domain]` rules hold no colour, so they work in
+ * light and dark alike and at any depth. Read slots directly (hsl(var(--app-primary))): template's
+ * --primary is resolved once on :root and does not follow a nested data-domain.
+ * Every primary, tertiary and quaternary is AA (4.5:1) as text on its mode's background and card;
+ * the ratios are in the README.
+ */
+
+:root {
+  --agentic-primary: 84 69% 24%;
+  --agentic-primary-foreground: 70 25% 97%;
+  --agentic-secondary: 80 14% 91%;
+  --agentic-secondary-foreground: 206 29% 10%;
+  --agentic-tertiary: 211 72% 42%;
+  --agentic-tertiary-foreground: 0 0% 100%;
+  --agentic-quaternary: 318 45% 44%;
+  --agentic-quaternary-foreground: 0 0% 100%;
+  --agentic-ring: 84 69% 30%;
+
+  --building-blocks-primary: 32 95% 30%;
+  --building-blocks-primary-foreground: 70 25% 97%;
+  --building-blocks-secondary: 36 20% 91%;
+  --building-blocks-secondary-foreground: 206 29% 10%;
+  --building-blocks-tertiary: 181 80% 24%;
+  --building-blocks-tertiary-foreground: 0 0% 100%;
+  --building-blocks-quaternary: 10 62% 42%;
+  --building-blocks-quaternary-foreground: 0 0% 100%;
+  --building-blocks-ring: 32 95% 30%;
+
+  --governance-primary: 258 52% 48%;
+  --governance-primary-foreground: 0 0% 100%;
+  --governance-secondary: 255 18% 92%;
+  --governance-secondary-foreground: 206 29% 10%;
+  --governance-tertiary: 162 70% 24%;
+  --governance-tertiary-foreground: 0 0% 100%;
+  --governance-quaternary: 350 58% 42%;
+  --governance-quaternary-foreground: 0 0% 100%;
+  --governance-ring: 258 52% 48%;
+
+  --inixiative-primary: 206 29% 7%;
+  --inixiative-primary-foreground: 70 25% 97%;
+  --inixiative-ring: 206 29% 7%;
+}
+
+.dark {
+  --agentic-primary: 83 88% 73%;
+  --agentic-primary-foreground: 206 29% 6%;
+  --agentic-secondary: 204 25% 12%;
+  --agentic-secondary-foreground: 96 17% 94%;
+  --agentic-tertiary: 211 100% 79%;
+  --agentic-tertiary-foreground: 206 29% 6%;
+  --agentic-quaternary: 315 67% 83%;
+  --agentic-quaternary-foreground: 206 29% 6%;
+  --agentic-ring: 83 88% 73%;
+
+  --building-blocks-primary: 38 95% 64%;
+  --building-blocks-primary-foreground: 206 29% 6%;
+  --building-blocks-secondary: 30 16% 12%;
+  --building-blocks-secondary-foreground: 96 17% 94%;
+  --building-blocks-tertiary: 176 62% 58%;
+  --building-blocks-tertiary-foreground: 206 29% 6%;
+  --building-blocks-quaternary: 12 90% 76%;
+  --building-blocks-quaternary-foreground: 206 29% 6%;
+  --building-blocks-ring: 38 95% 64%;
+
+  --governance-primary: 258 92% 82%;
+  --governance-primary-foreground: 206 29% 6%;
+  --governance-secondary: 250 18% 13%;
+  --governance-secondary-foreground: 96 17% 94%;
+  --governance-tertiary: 158 58% 62%;
+  --governance-tertiary-foreground: 206 29% 6%;
+  --governance-quaternary: 348 92% 82%;
+  --governance-quaternary-foreground: 206 29% 6%;
+  --governance-ring: 258 92% 82%;
+
+  --inixiative-primary: 96 17% 94%;
+  --inixiative-primary-foreground: 206 29% 6%;
+  --inixiative-ring: 96 17% 94%;
+}
+
+[data-domain="agentic"] {
+  --app-primary: var(--agentic-primary);
+  --app-primary-foreground: var(--agentic-primary-foreground);
+  --app-secondary: var(--agentic-secondary);
+  --app-secondary-foreground: var(--agentic-secondary-foreground);
+  --app-tertiary: var(--agentic-tertiary);
+  --app-tertiary-foreground: var(--agentic-tertiary-foreground);
+  --app-quaternary: var(--agentic-quaternary);
+  --app-quaternary-foreground: var(--agentic-quaternary-foreground);
+  --ring: var(--agentic-ring);
+}
+
+[data-domain="building-blocks"] {
+  --app-primary: var(--building-blocks-primary);
+  --app-primary-foreground: var(--building-blocks-primary-foreground);
+  --app-secondary: var(--building-blocks-secondary);
+  --app-secondary-foreground: var(--building-blocks-secondary-foreground);
+  --app-tertiary: var(--building-blocks-tertiary);
+  --app-tertiary-foreground: var(--building-blocks-tertiary-foreground);
+  --app-quaternary: var(--building-blocks-quaternary);
+  --app-quaternary-foreground: var(--building-blocks-quaternary-foreground);
+  --ring: var(--building-blocks-ring);
+}
+
+[data-domain="governance"] {
+  --app-primary: var(--governance-primary);
+  --app-primary-foreground: var(--governance-primary-foreground);
+  --app-secondary: var(--governance-secondary);
+  --app-secondary-foreground: var(--governance-secondary-foreground);
+  --app-tertiary: var(--governance-tertiary);
+  --app-tertiary-foreground: var(--governance-tertiary-foreground);
+  --app-quaternary: var(--governance-quaternary);
+  --app-quaternary-foreground: var(--governance-quaternary-foreground);
+  --ring: var(--governance-ring);
+}
+
+[data-domain="inixiative"] {
+  --app-primary: var(--inixiative-primary);
+  --app-primary-foreground: var(--inixiative-primary-foreground);
+  --app-secondary: var(--agentic-primary);
+  --app-secondary-foreground: var(--agentic-primary-foreground);
+  --app-tertiary: var(--building-blocks-primary);
+  --app-tertiary-foreground: var(--building-blocks-primary-foreground);
+  --app-quaternary: var(--governance-primary);
+  --app-quaternary-foreground: var(--governance-primary-foreground);
+  --ring: var(--inixiative-ring);
+}

package/theme/marketing.css

@@ -0,0 +1,513 @@
+/*
+ * @inixiative/config/theme/marketing.css — the marketing grammar: scales and the shared page classes.
+ *
+ * Load after theme/public.css and theme/domains.css. Lifted from Kingdom's landing (apps/web/app/components/landing),
+ * so the hub, Kingdom's landing and every product page share one type scale, rhythm and set of parts.
+ * Colour comes only from public.css and domains.css tokens; this file holds none of its own.
+ * Classes apply inside `.marketing` (put it on the page root, with a `data-domain`). They sit in
+ * `@layer components` behind :where(), so Tailwind's utilities (a later layer) and any unlayered page CSS win.
+ * Rules the grammar carries: the domain primary is the one accent (CTA, eyebrow, wordmark stop); tertiary
+ * and quaternary only appear where they mean something (agentic: shared, Signet). Motion means live: only
+ * `.status-dot[data-live]` animates, and nothing moves under prefers-reduced-motion. Long-form reading
+ * (`.prose`) is set for the light theme: give that page no `.dark`.
+ */
+
+:root {
+  /* Type: fluid steps, 640px → 1440px viewport */
+  --text-display-1: clamp(2.25rem, 1.05rem + 3vw, 3.75rem);
+  --text-display-2: clamp(2rem, 1.2rem + 2vw, 3rem);
+  --text-display-3: clamp(1.75rem, 1.05rem + 1.75vw, 2.625rem);
+  --text-heading-1: clamp(1.625rem, 1.125rem + 1.25vw, 2.25rem);
+  --text-heading-2: clamp(1.25rem, 0.95rem + 0.75vw, 1.625rem);
+  --text-heading-3: clamp(1.1875rem, 1.0375rem + 0.375vw, 1.375rem);
+  --text-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
+  --text-body: 1rem;
+  --text-small: 0.9375rem;
+  --text-caption: 0.8125rem;
+  --text-eyebrow: 0.75rem;
+  --text-micro: 0.6875rem;
+
+  --leading-display: 1.04;
+  --leading-heading: 1.12;
+  --leading-body: 1.6;
+  --leading-prose: 1.72;
+
+  --tracking-display: -0.03em;
+  --tracking-heading: -0.02em;
+  --tracking-eyebrow: 0.14em;
+  --tracking-label: 0.1em;
+
+  --weight-display: 750;
+  --weight-heading: 650;
+  --weight-strong: 600;
+
+  /* Spacing: 4px base */
+  --gap-1: 0.25rem;
+  --gap-2: 0.5rem;
+  --gap-3: 0.75rem;
+  --gap-4: 1rem;
+  --gap-5: 1.25rem;
+  --gap-6: 1.5rem;
+  --gap-7: 2rem;
+  --gap-8: 3rem;
+  --gap-9: 4rem;
+  --gap-10: 6rem;
+
+  /* Section rhythm and containers */
+  --section-padding: clamp(4rem, 2rem + 5vw, 6.5rem);
+  --section-padding-compact: 2.25rem;
+  --section-gap: var(--gap-8);
+  --container-max: 82.5rem;
+  --container-heading: 42.5rem;
+  --measure: 68ch;
+  --gutter: clamp(1rem, -0.5rem + 4vw, 3rem);
+  --nav-height: clamp(4.5rem, 3.5rem + 2vw, 5.5rem);
+
+  /* Radius (numbered, so Tailwind's --radius-sm/md/lg stay Tailwind's) */
+  --radius-1: 0.375rem;
+  --radius-2: 0.5rem;
+  --radius-3: 0.75rem;
+  --radius-4: 1rem;
+  --radius-5: 1.25rem;
+  --radius-pill: 999px;
+
+  /* Motion */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 250ms;
+  --duration-scene: 500ms;
+  --duration-live: 2.4s;
+  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --ease-move: cubic-bezier(0.5, 0, 0.2, 1);
+  --lift: -1px;
+
+  /* Elevation (paper cards staged as objects) */
+  --elevation-1: 0 18px 40px -24px hsl(var(--shadow) / 0.45);
+  --elevation-2: 0 30px 60px -30px hsl(var(--shadow) / 0.6);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --duration-scene: 0ms;
+    --lift: 0px;
+  }
+  :where(.marketing) .status-dot[data-live] {
+    animation: none;
+  }
+}
+
+@layer components {
+  :where(.marketing) {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: var(--text-body);
+    line-height: var(--leading-body);
+    -webkit-font-smoothing: antialiased;
+    color-scheme: light;
+  }
+  :where(.dark .marketing, .marketing.dark) {
+    color-scheme: dark;
+  }
+  :where(.marketing) *,
+  :where(.marketing) *::before,
+  :where(.marketing) *::after {
+    box-sizing: border-box;
+  }
+  :where(.marketing) a {
+    color: inherit;
+    text-decoration: none;
+  }
+  :where(.marketing) :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 4px;
+    border-radius: var(--radius-1);
+  }
+  :where(.marketing) :is(h1, h2, h3, h4),
+  :where(.marketing) :is(.display-1, .display-2, .display-3, .heading-1, .heading-2, .heading-3) {
+    margin: 0;
+    font-family: var(--font-display);
+    font-weight: var(--weight-display);
+    letter-spacing: var(--tracking-display);
+    line-height: var(--leading-heading);
+    text-wrap: balance;
+  }
+
+  :where(.marketing) .display-1 {
+    font-size: var(--text-display-1);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .display-2 {
+    font-size: var(--text-display-2);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .display-3 {
+    font-size: var(--text-display-3);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .heading-1 {
+    font-size: var(--text-heading-1);
+  }
+  :where(.marketing) .heading-2 {
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .heading-3 {
+    font-size: var(--text-heading-3);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .lede {
+    margin: 0;
+    font-size: var(--text-lede);
+    line-height: var(--leading-body);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .accent {
+    color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .skip {
+    position: absolute;
+    left: var(--gap-4);
+    top: -4rem;
+    z-index: 10;
+    padding: var(--gap-2) var(--gap-4);
+    border-radius: var(--radius-2);
+    background: hsl(var(--app-primary));
+    color: hsl(var(--app-primary-foreground));
+  }
+  :where(.marketing) .skip:focus {
+    top: var(--gap-4);
+  }
+
+  :where(.marketing) .shell {
+    width: 100%;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--gutter);
+  }
+
+  :where(.marketing) .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-3);
+    font-family: var(--font-mono);
+    font-size: var(--text-eyebrow);
+    font-weight: 500;
+    letter-spacing: var(--tracking-eyebrow);
+    line-height: 1.2;
+    text-transform: uppercase;
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .eyebrow[data-quiet] {
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .status-dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: hsl(var(--app-primary));
+    box-shadow: 0 0 12px hsl(var(--app-primary));
+  }
+  :where(.marketing) .status-dot[data-live] {
+    animation: marketing-live var(--duration-live) var(--ease-move) infinite;
+  }
+  @keyframes marketing-live {
+    50% {
+      box-shadow: 0 0 2px hsl(var(--app-primary));
+      opacity: 0.55;
+    }
+  }
+
+  :where(.marketing) .nav {
+    height: var(--nav-height);
+    display: flex;
+    align-items: center;
+    gap: var(--gap-7);
+    border-bottom: 1px solid hsl(var(--border));
+  }
+  :where(.marketing) .nav-links {
+    display: flex;
+    gap: var(--gap-7);
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+  }
+  :where(.marketing) .nav-links a {
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+    transition: color var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .nav-links a:hover,
+  :where(.marketing) .nav-links a[aria-current="page"] {
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-3);
+    font-family: var(--font-display);
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-display);
+    letter-spacing: var(--tracking-display);
+  }
+  :where(.marketing) .brand svg {
+    width: 1em;
+    height: 1.15em;
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .brand-period {
+    color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--gap-5);
+  }
+  :where(.marketing) .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-3);
+    height: 52px;
+    padding: 0 var(--gap-6);
+    border: 0;
+    border-radius: var(--radius-3);
+    font: inherit;
+    font-size: var(--text-body);
+    font-weight: var(--weight-strong);
+    background: hsl(var(--app-primary));
+    color: hsl(var(--app-primary-foreground));
+    cursor: pointer;
+    transition:
+      transform var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .button:hover {
+    transform: translateY(var(--lift));
+    box-shadow: 0 10px 30px -10px hsl(var(--app-primary) / 0.6);
+  }
+  :where(.marketing) .button-secondary {
+    background: transparent;
+    color: hsl(var(--foreground));
+    box-shadow: inset 0 0 0 1px hsl(var(--input));
+  }
+  :where(.marketing) .button-secondary:hover {
+    transform: none;
+    box-shadow: inset 0 0 0 1px hsl(var(--app-primary));
+  }
+  :where(.marketing) .button[data-size="small"] {
+    height: 42px;
+    padding: 0 var(--gap-5);
+    border-radius: var(--radius-3);
+    font-size: var(--text-small);
+  }
+  :where(.marketing) .text-link {
+    font-weight: 500;
+    color: hsl(var(--foreground));
+    border-bottom: 1px solid hsl(var(--input));
+    padding-bottom: 2px;
+    transition: border-color var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .text-link:hover {
+    border-color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-gap);
+    padding: var(--section-padding) 0;
+  }
+  :where(.marketing) .section[data-compact] {
+    gap: var(--gap-5);
+    padding: var(--section-padding-compact) 0;
+  }
+  :where(.marketing) .section + .section,
+  :where(.marketing) .section[data-rule] {
+    border-top: 1px solid hsl(var(--border));
+  }
+  :where(.marketing) .section-heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-4);
+    max-width: var(--container-heading);
+  }
+  :where(.marketing) .section-heading h2 {
+    font-size: var(--text-display-2);
+  }
+
+  :where(.marketing) .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-3);
+    padding: var(--gap-7);
+    border-radius: var(--radius-5);
+    overflow: hidden;
+    color: hsl(var(--card-foreground));
+    background:
+      radial-gradient(120% 80% at 0% 0%, hsl(var(--app-primary) / 0.12), transparent 60%),
+      hsl(var(--card));
+    box-shadow: inset 0 0 0 1px hsl(var(--border));
+    transition:
+      transform var(--duration-slow) var(--ease-standard),
+      box-shadow var(--duration-slow) var(--ease-standard);
+  }
+  :where(.marketing) .card[data-plain] {
+    background: hsl(var(--card));
+  }
+  :where(.marketing) .card[data-raised] {
+    box-shadow:
+      inset 0 0 0 1px hsl(var(--border)),
+      var(--elevation-2);
+  }
+  :where(.marketing) :is(a.card, .card[data-interactive]):hover {
+    transform: translateY(calc(var(--lift) * 3));
+    box-shadow:
+      inset 0 0 0 1px hsl(var(--app-primary) / 0.55),
+      0 24px 50px -28px hsl(var(--app-primary) / 0.6);
+  }
+  :where(.marketing) .card h3 {
+    font-size: var(--text-heading-3);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .card p {
+    margin: 0;
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    gap: var(--gap-5);
+  }
+
+  :where(.marketing) .footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-6);
+    padding: var(--gap-7) 0 var(--gap-8);
+    border-top: 1px solid hsl(var(--border));
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .footer .brand {
+    font-size: var(--text-heading-3);
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-3) var(--gap-6);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where(.marketing) .footer-links a:hover {
+    color: hsl(var(--foreground));
+  }
+
+  :where(.marketing) .prose {
+    max-width: var(--measure);
+    font-size: 1.0625rem;
+    line-height: var(--leading-prose);
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .prose > * + * {
+    margin-top: 1.1em;
+  }
+  :where(.marketing) .prose :is(h2, h3) {
+    margin-top: 2.2em;
+  }
+  :where(.marketing) .prose h2 {
+    font-size: var(--text-heading-1);
+  }
+  :where(.marketing) .prose h3 {
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .prose :is(h2, h3) + * {
+    margin-top: 0.6em;
+  }
+  :where(.marketing) .prose p,
+  :where(.marketing) .prose :is(ul, ol) {
+    margin-bottom: 0;
+  }
+  :where(.marketing) .prose :is(ul, ol) {
+    padding-left: 1.4em;
+  }
+  :where(.marketing) .prose li + li {
+    margin-top: 0.4em;
+  }
+  :where(.marketing) .prose li::marker {
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .prose a {
+    color: hsl(var(--app-primary));
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+  }
+  :where(.marketing) .prose strong {
+    font-weight: var(--weight-strong);
+  }
+  :where(.marketing) .prose blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: var(--gap-5);
+    border-left: 3px solid hsl(var(--app-primary));
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .prose :not(pre) > code {
+    padding: 0.1em 0.35em;
+    border-radius: var(--radius-1);
+    font-family: var(--font-mono);
+    font-size: 0.88em;
+    background: hsl(var(--muted));
+  }
+  :where(.marketing) .prose pre {
+    overflow-x: auto;
+    padding: var(--gap-5);
+    border-radius: var(--radius-3);
+    font-family: var(--font-mono);
+    font-size: var(--text-caption);
+    line-height: 1.6;
+    background: hsl(var(--muted));
+  }
+  :where(.marketing) .prose hr {
+    border: 0;
+    border-top: 1px solid hsl(var(--border));
+    margin: 2.4em 0;
+  }
+  :where(.marketing) .prose figcaption,
+  :where(.marketing) .prose .aside {
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .prose .aside {
+    padding: var(--gap-5) var(--gap-6);
+    border-radius: var(--radius-4);
+    background: hsl(var(--muted));
+  }
+
+  @media (max-width: 760px) {
+    :where(.marketing) .nav-links {
+      display: none;
+    }
+    :where(.marketing) .nav > :last-child {
+      margin-left: auto;
+    }
+  }
+}

package/theme/public.css

@@ -6,7 +6,7 @@
  * Values are HSL channels, used as hsl(var(--x)) or hsl(var(--x) / .12).
  * Light is the default (:root); dark is the `.dark` class on <html>, as in template and Kingdom.
  * Colour meaning: lime = yours / live (--app-primary), blue = shared (--app-tertiary), pink = Signet (--app-quaternary).
- * Thread and work status colours are a separate layer: theme/agentic.css.
+ * Thread and work status colours are a separate layer: theme/status.css. Domain palettes: theme/domains.css; marketing grammar: theme/marketing.css.
  */
 
 @font-face {
@@ -67,6 +67,7 @@
   --border: 87 12% 86%;
   --input: 87 12% 82%;
   --ring: 84 69% 30%;
+  --shadow: 206 29% 7%; /* elevation: hsl(var(--shadow) / .3) */
   --radius: 0.75rem;
 
   /* Type */
@@ -109,4 +110,5 @@
   --border: 202 22% 15%;
   --input: 204 22% 19%;
   --ring: 83 88% 73%;
+  --shadow: 206 40% 2%;
 }

package/theme/{agentic.css → status.css}

@@ -1,5 +1,5 @@
 /*
- * @inixiative/config/theme/agentic.css — the status and badge layers for agentic apps (Foundry, Kingdom).
+ * @inixiative/config/theme/status.css — the status and badge layers for apps that show agent work (Foundry, Kingdom).
  *
  * Load after theme/public.css. Light is :root, dark is `.dark`, like public.css.
  *

package/versions.json

@@ -13,7 +13,7 @@
     "@types/bun"
   ],
   "ecosystem": {
-    "@inixiative/config": "0.5.183",
+    "@inixiative/config": "0.5.184",
     "@inixiative/json-rules": "3.16.0",
     "@inixiative/permissions": "0.18.0",
     "@inixiative/transitions": "0.6.0",
@@ -51,6 +51,7 @@
     }
   },
   "candidates": {
-    "@inixiative/atlas": "0.5.0"
+    "@inixiative/atlas": "0.5.0",
+    "@inixiative/agent-session": "0.10.0"
   }
 }