From 2af7c430e184b05f08973acb829b1116beeea4d6 Mon Sep 17 00:00:00 2001
From: Samir <hey@samir.xyz>
Date: Wed, 19 Aug 2026 17:56:18 -0400
Subject: [PATCH] IV-107 reframe around scientific clarity

---
 .agents/memory/structured-liquidity-motion.md |   2 +-
 .agents/memory/structured-liquidity.md        |   6 +-
 .agents/skills/structured-liquidity/SKILL.md  |  70 ++--
 artifacts/structured-liquidity/index.html     |  53 ++-
 .../public/design-tokens.json                 |  87 ++--
 .../structured-liquidity/public/llms.txt      |  34 +-
 .../public/r/structured-liquidity-agent.json  |   4 +-
 .../public/r/structured-liquidity.json        |  38 +-
 .../structured-liquidity/public/registry.json |   4 +-
 .../public/structured-liquidity.css           | 296 ++++++++++----
 .../scripts/build-registry.mjs                | 101 +++--
 .../src/components/site/Adopt.tsx             |  72 ++--
 .../src/components/site/FooterCta.tsx         |   2 +-
 .../src/components/site/Hero.tsx              |  27 +-
 .../src/components/site/Pillars.tsx           |  57 ++-
 .../src/components/site/Tweaker.tsx           |  15 +-
 .../components/site/kit/KitContentData.tsx    |  18 +-
 .../src/styles/10-tokens-base.css             | 296 ++++++++++----
 .../src/styles/40-inline.css                  | 378 +++++++++++++++++-
 docs/component-audit-2026-08.md               |   2 +-
 docs/design-ethos-v2.md                       |  28 +-
 replit.md                                     |   8 +-
 22 files changed, 1165 insertions(+), 433 deletions(-)

diff --git a/.agents/memory/structured-liquidity-motion.md b/.agents/memory/structured-liquidity-motion.md
index 4ae0824..af9bcfa 100644
--- a/.agents/memory/structured-liquidity-motion.md
+++ b/.agents/memory/structured-liquidity-motion.md
@@ -9,7 +9,7 @@ Tactile interaction motion (press ripples, liquid toggles/switch sheen, flowing
 
 ## Governing principle (content decision)
 The rigid **container** never bounces/squishes/morphs (sharp corners, flat offset shadow, grid hold). Only the **liquid inside** reacts — ripple, flood, settle with viscous overshoot, catch light. One shared easing token set (`--ease-liquid`, `--ease-liquid-over`, `--motion*`) so every motion feels like the same material.
-**Why:** generic bouncy UI or Apple's blurry-blob treatment both break Neobrutalist Structure; the physical frame must stay firm while Liquid Glass Motion happens inside it.
+**Why:** generic bouncy UI or Apple's blurry-blob treatment both break Structured Framing; the physical frame must stay firm while Liquid Motion happens inside it.
 **Adoption note:** this motion is specimen-only — it can't go in the distributable `public` CSS (verbatim rule), so do NOT document it in `registry.json`/SKILL.md.
 
 ## Trap 1 — `mix-blend-mode: plus-lighter` blows out over a vivid backdrop
diff --git a/.agents/memory/structured-liquidity.md b/.agents/memory/structured-liquidity.md
index 22c3008..8fdd02e 100644
--- a/.agents/memory/structured-liquidity.md
+++ b/.agents/memory/structured-liquidity.md
@@ -5,7 +5,7 @@ description: The durable decisions behind the SL specimen port — what it is, a
 
 # Structured Liquidity
 
-An open UI design language—**Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.**—shipped as a live specimen at `artifacts/structured-liquidity`. Neobrutalist Structure is the physical frame: load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction. Liquid Glass Motion is layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass. Editorial Modern Frameworks compose hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence; they are informed by editorial scientific modernism. Together they form the Structured Liquidity trifecta, represented by the cube's three visible faces. Semantic Clarity remains the quality gate across all three, not a fourth pillar. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there.
+An open UI design language—**Structured framing. Liquid motion. Scientific clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, tactile interaction, and flat offset shadows used selectively for interactive or deliberately layered cutout surfaces. Liquid Motion makes system behavior perceptible through neutral translucency, continuity, and purposeful motion; glass is not a default card treatment. Scientific Clarity communicates meaning through disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. Together the three pillars form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there.
 
 ## The non-obvious trap (why the port isn't a verbatim copy)
 
@@ -104,13 +104,13 @@ The verbatim kit ships several components as static CSS-only stubs — e.g. the
 
 **Styled scrollbars (gotcha):** style them in `index.html` inline `<style>`, not the verbatim public CSS. DON'T set `scrollbar-width`/`scrollbar-color` globally on `*` — modern Chrome then switches to the native thin scrollbar and IGNORES every `::-webkit-scrollbar` rule, leaving a default grey bar (this was the bug). Instead: drive Chrome+Safari purely via `::-webkit-scrollbar*` pseudo-elements, and feed Firefox the standard `scrollbar-width`/`scrollbar-color` only inside `@supports not selector(::-webkit-scrollbar){ html{...} }`. Also: `--glass-tint` is a SPACE-separated triplet (`255 255 255`), so use modern `rgb(var(--glass-tint) / 0.06)` slash syntax for scrollbar colours (legacy `rgba(...,a)` parses inconsistently in the `scrollbar-color` shorthand). Headless screenshots don't render OS scrollbars, so they can't verify this — reason about it instead.
 
-**The ethos is a trifecta of three orthogonal design dimensions (content decision), always in this order:** Neobrutalist Structure (frame), Liquid Glass Motion (state), and Editorial Modern Frameworks (composition). The cube's three visible faces represent the trifecta. Editorial Modern Frameworks are informed by editorial scientific modernism; that phrase names their visual tradition, never a pillar. Semantic Clarity remains the quality gate across all three, not a fourth pillar. Keep the hero, manifesto, figure, docs, guidance, CSS comments, and generated registry in lockstep. **Why:** each dimension answers a different implementation question, while the clarity gate ensures the page still works without color, glass, or motion.
+**The ethos is a trifecta of three orthogonal design dimensions (content decision), always in this order:** Structured Framing (how information is organized), Liquid Motion (how the system behaves), and Scientific Clarity (how meaning is communicated). The cube's three visible faces represent the trifecta. Scientific Clarity is informed by Swiss modernism and the International Typographic Style; the tradition is a reference, while legibility, order, and unmistakable communication define the pillar. It also includes the test that the page remains complete and useful without color, glass, or motion. Keep the hero, manifesto, docs, guidance, CSS comments, and generated registry in lockstep. **Why:** each dimension answers a different implementation question without introducing a redundant fourth concept.
 
 ## Showcase = product-card grid (mode-aware overlay gotcha)
 
 The Showcase renders `.show-grid` of `.show-card` cards (each a single `<a class="show-card glass">` = browser-bar + screenshot + always-visible foot with avatar/name/tag/badge). The description + Visit CTA live in a `.show-card-veil` overlay revealed on `:hover`/`:focus-visible`; on touch it becomes a persistent bottom gradient panel via `@media (hover:none)` (touch has no hover state before navigation). CTA is a `<span>`, never a nested `<a>`. Add a product = copy one card block + drop its screenshot in `public/`.
 
-**Gotcha — mode-aware text overlays must key off `--bg`, NOT `--glass-tint`:** `--glass-tint` is white (`255 255 255`) in BOTH dark and light modes, so a glass-tinted scrim under `var(--ink)` text washes out in dark mode (light text on near-white). Base any text-bearing overlay on the mode-aware page bg: `rgba(39,41,51,.x)` (dark `#272933`) + a `[data-mode="light"]` override `rgba(223,229,242,.x)` (light `#dfe5f2`), with `var(--ink)` text.
+**Gotcha — mode-aware text overlays must key off `--bg`, NOT `--glass-tint`:** `--glass-tint` is white (`255 255 255`) in BOTH dark and light modes, so a glass-tinted scrim under `var(--ink)` text washes out in dark mode (light text on near-white). Base any text-bearing overlay on the mode-aware page background (`#f2f0ea` light, `#171717` dark) and keep `var(--ink)` text.
 
 **Gotcha — `.wrap` caps at `min(1200px,92vw)`:** an `auto-fit, minmax(MIN,1fr)` grid only reaches N columns if `N*MIN + (N-1)*gap ≤ 1200`. For 4-across at a 1.2rem gap, MIN must be ≤ ~270px (used 260px). Cap a lone card with `max-width` + `margin-inline:auto` so a single item doesn't stretch full-width.
 
diff --git a/.agents/skills/structured-liquidity/SKILL.md b/.agents/skills/structured-liquidity/SKILL.md
index f1a73c6..e226f8a 100644
--- a/.agents/skills/structured-liquidity/SKILL.md
+++ b/.agents/skills/structured-liquidity/SKILL.md
@@ -1,77 +1,77 @@
 ---
 name: structured-liquidity
-description: Apply the Structured Liquidity UI design language — Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks, all held to a Semantic Clarity quality gate. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.
+description: Apply the Structured Liquidity UI design language — Structured Framing, Liquid Motion, and Scientific Clarity. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.
 ---
 
 # Structured Liquidity
 
-**Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.**
+**Structured framing. Liquid motion. Scientific clarity.**
 
-1. **Neobrutalist Structure:** The physical frame—load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction.
-2. **Liquid Glass Motion:** Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass.
-3. **Editorial Modern Frameworks:** Hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence, informed by editorial scientific modernism.
+1. **Structured Framing:** How information is organized—load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows.
+2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible.
+3. **Scientific Clarity:** How meaning is communicated—disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: make information legible, ordered, and unmistakable.
 
-Together they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. **Semantic Clarity remains the quality gate across all three, not a fourth pillar.** The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.
+Together they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Scientific Clarity includes the quality test that every screen remains complete, legible, and useful without color, glass, or motion. The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.
 
 ## The non-negotiable rules
 
 Follow these literally — they are what keep generated output on-brand:
 
 1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.
-2. **Flat offset shadows.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. The blur radius is always `0`. Never use a soft/blurred shadow on a structural element.
+2. **Flat offset shadows, used selectively.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Blur is always `0`. Reserve shadows for tactile affordances and deliberately layered cutout surfaces; flat information containers can rely on borders, rules, and alignment.
 3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.
 4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.
-5. **Glass is depth, not color.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent.
+5. **Glass is state and depth, not decoration.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent and use it where continuity, layering, or motion matters—not on every card.
 6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.
-7. **Fixed type roles.** display (`--display`, Inter) = headings/buttons/brand; body (`--body`, Inter) = reading copy; mono (`--mono`, Space Mono) = labels/data/captions/eyebrows.
+7. **Fixed type roles.** display (`--display`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex Mono) = labels/data/captions/eyebrows.
 8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.
 9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.
-10. **Compose like an editorial instrument.** Use oversized hierarchy, refined grids, generous major-section rhythm, and compact mono captions for sources, state, and evidence.
+10. **Communicate with scientific clarity.** Use a rational grid, exact alignment, asymmetric balance, measured line lengths, purposeful whitespace, and compact mono captions for sources, state, and evidence. Swiss modernism and the International Typographic Style are the reference tradition.
 11. **Monochrome carries information.** The accent identifies selection, progression, or one key relationship; it does not decorate the page.
-12. **Pass the Semantic Clarity gate.** Every screen must remain complete, legible, and useful without color, glass, or motion.
+12. **Clarity survives effects.** Every screen must remain complete, legible, and useful without color, glass, or motion.
 
 ## Tokens
 
-Apply these as CSS custom properties on `:root` (dark-mode defaults):
+Apply these as CSS custom properties on `:root` (light-mode defaults):
 
 ```css
 :root {
   --accent: #a388ee;
   --accent-ink: #000000;
-  --bg: #272933;
-  --bg-2: #1f2028;
-  --ink: #e6e6e6;
-  --ink-dim: #9da0ab;
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
   --edge: 0 0 0;
   --hard-shadow: #000000;
-  --neg: #3c3f4b;
-  --neg-ink: #f0f0f2;
-  --glass-blur: 18px;
+  --neg: #242424;
+  --neg-ink: #ffffff;
+  --glass-blur: 14px;
   --glass-tint: 255 255 255;
-  --glass-alpha: 0.07;
+  --glass-alpha: 0.72;
   --border-w: 2px;
-  --hard-x: 7px;
-  --hard-y: 7px;
+  --hard-x: 5px;
+  --hard-y: 5px;
   --radius: 0px;
-  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --body: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
-  --text-display-xl: clamp(4.5rem, 10vw, 9rem);
-  --text-display-lg: clamp(2.8rem, 6vw, 5.5rem);
-  --measure-reading: 68ch;
+  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
   --measure-caption: 48ch;
   --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
   --section-space: clamp(4rem, 9vw, 9rem);
 }
 ```
 
-Light mode: set `data-mode="light"` on `<html>` and override `--bg:#dfe5f2; --bg-2:#fff; --ink:#000; --ink-dim:#5b5f6b; --neg:#16171c; --neg-ink:#fff; --glass-alpha:0.55`.
+Dark mode: set `data-mode="dark"` on `<html>` and override `--bg:#171717; --bg-2:#0f0f0f; --ink:#f3f1eb; --ink-dim:#aaa9a4; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`.
 
 The canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).
 
 ## Type layout
 
-Three roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use dramatic scale and weight for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.
+Three roles — header / body / detail (display / body / mono). Archivo carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use IBM Plex Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.
 
 ## Motion contract
 
@@ -100,20 +100,20 @@ npx shadcn@latest add https://structured.glass/r/button.json                  #
 
 Each `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.
 
-**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Inter and Space Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.
+**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Archivo and IBM Plex Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.
 
-## Anatomy of a rigid container holding glass
+## Anatomy of a stateful glass surface inside a rigid frame
 
 ```html
 <div class="glass kit-cell">
   <span class="kit-cap">Title</span>
-  <p>Body copy inside a rigid container holding liquid glass.</p>
+  <p>Use this treatment when the surface communicates state or depth.</p>
 </div>
 ```
 
 ```css
-/* if you are not using the kit CSS, the container recipe is: */
-.container {
+/* if you are not using the kit CSS, the stateful glass recipe is: */
+.stateful-glass {
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
   box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
diff --git a/artifacts/structured-liquidity/index.html b/artifacts/structured-liquidity/index.html
index 0bca87b..c2a140f 100644
--- a/artifacts/structured-liquidity/index.html
+++ b/artifacts/structured-liquidity/index.html
@@ -1,20 +1,35 @@
-<!DOCTYPE html>
-<html lang="en" data-mode="dark" class="sl-js">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Structured Liquidity: a design language</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2316121f'/%3E%3Cpath d='M50 18 L77.71 34 L77.71 66 L50 82 L22.29 66 L22.29 34 Z' fill='none' stroke='%23a388ee' stroke-width='5'/%3E%3Cpath d='M50 36.56 L61.64 43.28 L61.64 56.72 L50 63.44 L38.36 56.72 L38.36 43.28 Z' fill='none' stroke='%23a388ee' stroke-width='4'/%3E%3Cpath d='M50 18 L50 36.56 M77.71 34 L61.64 43.28 M77.71 66 L61.64 56.72 M50 82 L50 63.44 M22.29 66 L38.36 56.72 M22.29 34 L38.36 43.28 M50 50 L50 82 M50 50 L22.29 34 M50 50 L77.71 34 M50 50 L50 63.44 M50 50 L38.36 43.28 M50 50 L61.64 43.28' fill='none' stroke='%23a388ee' stroke-width='3'/%3E%3C/svg%3E" />
-<meta name="description" content="Structured Liquidity is an open UI design language: rigid containers with sharp edges and flat offset shadows holding liquid, light-reflecting glass. A complete component kit you can retheme live and adopt with AI tools." />
-<meta property="og:title" content="Structured Liquidity: a design language" />
-<meta property="og:description" content="Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks. The three-part Structured Liquidity design language." />
-<meta property="og:type" content="website" />
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+<!doctype html>
+<html lang="en" data-mode="light" class="sl-js">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Structured Liquidity: a design language</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2316121f'/%3E%3Cpath d='M50 18 L77.71 34 L77.71 66 L50 82 L22.29 66 L22.29 34 Z' fill='none' stroke='%23a388ee' stroke-width='5'/%3E%3Cpath d='M50 36.56 L61.64 43.28 L61.64 56.72 L50 63.44 L38.36 56.72 L38.36 43.28 Z' fill='none' stroke='%23a388ee' stroke-width='4'/%3E%3Cpath d='M50 18 L50 36.56 M77.71 34 L61.64 43.28 M77.71 66 L61.64 56.72 M50 82 L50 63.44 M22.29 66 L38.36 56.72 M22.29 34 L38.36 43.28 M50 50 L50 82 M50 50 L22.29 34 M50 50 L77.71 34 M50 50 L50 63.44 M50 50 L38.36 43.28 M50 50 L61.64 43.28' fill='none' stroke='%23a388ee' stroke-width='3'/%3E%3C/svg%3E"
+    />
+    <meta
+      name="description"
+      content="Structured Liquidity is an open UI design language: rigid containers with sharp edges and flat offset shadows holding liquid, light-reflecting glass. A complete component kit you can retheme live and adopt with AI tools."
+    />
+    <meta
+      property="og:title"
+      content="Structured Liquidity: a design language"
+    />
+    <meta
+      property="og:description"
+      content="Structured framing. Liquid motion. Scientific clarity. The three-part Structured Liquidity design language."
+    />
+    <meta property="og:type" content="website" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/artifacts/structured-liquidity/public/design-tokens.json b/artifacts/structured-liquidity/public/design-tokens.json
index a421cf1..bf034a0 100644
--- a/artifacts/structured-liquidity/public/design-tokens.json
+++ b/artifacts/structured-liquidity/public/design-tokens.json
@@ -1,5 +1,5 @@
 {
-  "$description": "Structured Liquidity design tokens for Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks: the three-part trifecta represented by the cube's visible faces. Semantic Clarity remains the quality gate across all three, not a fourth pillar. W3C Design Tokens Community Group format. Each token carries its CSS custom-property name in $extensions.cssVar so an agent can apply it directly to :root.",
+  "$description": "Structured Liquidity design tokens for Structured Framing, Liquid Motion, and Scientific Clarity: the three-part trifecta represented by the cube's visible faces. W3C Design Tokens Community Group format. Each token carries its CSS custom-property name in $extensions.cssVar so an agent can apply it directly to :root.",
   "color": {
     "$type": "color",
     "accent": {
@@ -13,23 +13,23 @@
       "$extensions": { "cssVar": "--accent-ink" }
     },
     "bg": {
-      "$value": "#272933",
-      "$description": "Page background (dark mode).",
+      "$value": "#f2f0ea",
+      "$description": "Light-first paper page background.",
       "$extensions": { "cssVar": "--bg" }
     },
     "bg2": {
-      "$value": "#1f2028",
-      "$description": "Raised surface / menu background (dark mode).",
+      "$value": "#ffffff",
+      "$description": "Flat paper surface and menu background.",
       "$extensions": { "cssVar": "--bg-2" }
     },
     "ink": {
-      "$value": "#e6e6e6",
-      "$description": "Primary foreground text (dark mode).",
+      "$value": "#111111",
+      "$description": "Primary foreground text.",
       "$extensions": { "cssVar": "--ink" }
     },
     "inkDim": {
-      "$value": "#9da0ab",
-      "$description": "Secondary / muted text (dark mode).",
+      "$value": "#5d5d59",
+      "$description": "Secondary / muted text.",
       "$extensions": { "cssVar": "--ink-dim" }
     },
     "edge": {
@@ -43,12 +43,12 @@
       "$extensions": { "cssVar": "--hard-shadow" }
     },
     "negative": {
-      "$value": "#3c3f4b",
+      "$value": "#242424",
       "$description": "Destructive / negative surface. Neutral gray, never red.",
       "$extensions": { "cssVar": "--neg" }
     },
     "negativeInk": {
-      "$value": "#f0f0f2",
+      "$value": "#ffffff",
       "$description": "Text on the negative surface.",
       "$extensions": { "cssVar": "--neg-ink" }
     }
@@ -56,7 +56,7 @@
   "glass": {
     "blur": {
       "$type": "dimension",
-      "$value": "18px",
+      "$value": "14px",
       "$description": "backdrop-filter blur radius for liquid glass surfaces.",
       "$extensions": { "cssVar": "--glass-blur" }
     },
@@ -68,8 +68,8 @@
     },
     "alpha": {
       "$type": "number",
-      "$value": 0.07,
-      "$description": "Glass fill opacity (dark mode). Light mode raises this to 0.55.",
+      "$value": 0.72,
+      "$description": "Glass fill opacity for the light-first default. Dark mode lowers this to 0.08.",
       "$extensions": { "cssVar": "--glass-alpha" }
     }
   },
@@ -93,13 +93,13 @@
     "flat": {
       "$type": "shadow",
       "$value": {
-        "offsetX": "7px",
-        "offsetY": "7px",
+        "offsetX": "5px",
+        "offsetY": "5px",
         "blur": "0px",
         "spread": "0px",
         "color": "#000000"
       },
-      "$description": "The flat offset shadow. Blur is always 0, structural, never soft. Offset is driven by --hard-x / --hard-y.",
+      "$description": "The selective flat offset shadow for tactile affordances and deliberate cutout layers. Blur is always 0. Offset is driven by --hard-x / --hard-y.",
       "$extensions": {
         "cssVar": "--hard-x / --hard-y",
         "css": "var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)"
@@ -109,37 +109,54 @@
   "fontFamily": {
     "$type": "fontFamily",
     "display": {
-      "$value": ["Inter", "Helvetica Neue", "system-ui", "sans-serif"],
-      "$description": "Headings, buttons, and brand. Use weight and scale to create hierarchy.",
+      "$value": [
+        "Archivo",
+        "Helvetica Neue",
+        "Arial",
+        "system-ui",
+        "sans-serif"
+      ],
+      "$description": "Headings, buttons, and brand. Use weight, scale, and alignment to create hierarchy.",
       "$extensions": { "cssVar": "--display" }
     },
     "body": {
-      "$value": ["Inter", "Helvetica Neue", "system-ui", "sans-serif"],
+      "$value": [
+        "Archivo",
+        "Helvetica Neue",
+        "Arial",
+        "system-ui",
+        "sans-serif"
+      ],
       "$description": "Paragraph and reading copy. Neutral and legible.",
       "$extensions": { "cssVar": "--body" }
     },
     "mono": {
-      "$value": ["Space Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      "$value": [
+        "IBM Plex Mono",
+        "SFMono-Regular",
+        "ui-monospace",
+        "monospace"
+      ],
       "$description": "Labels, captions, data, eyebrows. Never long paragraphs.",
       "$extensions": { "cssVar": "--mono" }
     }
   },
-  "editorial": {
+  "scientificClarity": {
     "displayXL": {
       "$type": "dimension",
-      "$value": "clamp(4.5rem, 10vw, 9rem)",
-      "$description": "Oversized display scale for a single dominant editorial statement.",
+      "$value": "clamp(4.2rem, 10.5vw, 9.5rem)",
+      "$description": "Oversized display scale for a single dominant typographic statement.",
       "$extensions": { "cssVar": "--text-display-xl" }
     },
     "displayLG": {
       "$type": "dimension",
-      "$value": "clamp(2.8rem, 6vw, 5.5rem)",
+      "$value": "clamp(2.6rem, 5.5vw, 5.25rem)",
       "$description": "Large display scale for section-opening statements.",
       "$extensions": { "cssVar": "--text-display-lg" }
     },
     "readingMeasure": {
       "$type": "dimension",
-      "$value": "68ch",
+      "$value": "62ch",
       "$description": "Maximum comfortable measure for explanatory prose.",
       "$extensions": { "cssVar": "--measure-reading" }
     },
@@ -152,7 +169,7 @@
     "sectionSpace": {
       "$type": "dimension",
       "$value": "clamp(4rem, 9vw, 9rem)",
-      "$description": "Editorial section rhythm that separates major arguments.",
+      "$description": "Measured section rhythm that separates major arguments.",
       "$extensions": { "cssVar": "--section-space" }
     },
     "gridGutter": {
@@ -183,19 +200,19 @@
     }
   },
   "mode": {
-    "light": {
-      "$description": "Overrides applied when <html data-mode=\"light\">. Apply these values on top of the defaults above.",
+    "dark": {
+      "$description": "Overrides applied when <html data-mode=\"dark\">. Apply these values on top of the light-first defaults above.",
       "color": {
         "$type": "color",
-        "bg": { "$value": "#dfe5f2", "$extensions": { "cssVar": "--bg" } },
-        "bg2": { "$value": "#ffffff", "$extensions": { "cssVar": "--bg-2" } },
-        "ink": { "$value": "#000000", "$extensions": { "cssVar": "--ink" } },
+        "bg": { "$value": "#171717", "$extensions": { "cssVar": "--bg" } },
+        "bg2": { "$value": "#0f0f0f", "$extensions": { "cssVar": "--bg-2" } },
+        "ink": { "$value": "#f3f1eb", "$extensions": { "cssVar": "--ink" } },
         "inkDim": {
-          "$value": "#5b5f6b",
+          "$value": "#aaa9a4",
           "$extensions": { "cssVar": "--ink-dim" }
         },
         "negative": {
-          "$value": "#16171c",
+          "$value": "#343434",
           "$extensions": { "cssVar": "--neg" }
         },
         "negativeInk": {
@@ -206,7 +223,7 @@
       "glass": {
         "alpha": {
           "$type": "number",
-          "$value": 0.55,
+          "$value": 0.08,
           "$extensions": { "cssVar": "--glass-alpha" }
         }
       }
diff --git a/artifacts/structured-liquidity/public/llms.txt b/artifacts/structured-liquidity/public/llms.txt
index 880b5fa..f0ea6c3 100644
--- a/artifacts/structured-liquidity/public/llms.txt
+++ b/artifacts/structured-liquidity/public/llms.txt
@@ -1,6 +1,6 @@
 # Structured Liquidity
 
-> **Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.** Together they form the Structured Liquidity trifecta, represented by the cube's three visible faces. Semantic Clarity remains the quality gate across all three, not a fourth pillar. This file makes the language machine-readable so an AI agent can adopt it faithfully.
+> **Structured framing. Liquid motion. Scientific clarity.** Together they form the Structured Liquidity trifecta, represented by the cube's three visible faces. This file makes the language machine-readable so an AI agent can adopt it faithfully.
 
 ## Install before editing UI
 
@@ -12,24 +12,24 @@ This installs the theme and `.agents/skills/structured-liquidity/SKILL.md`. Veri
 
 ## The three pillars
 
-1. **Neobrutalist Structure · Frame**: The physical frame—load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction.
-2. **Liquid Glass Motion · State**: Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass.
-3. **Editorial Modern Frameworks · Composition**: Hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence, informed by editorial scientific modernism.
+1. **Structured Framing · Organization**: Load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows organize information.
+2. **Liquid Motion · Behavior**: Continuity, layered neutral glass, and purposeful motion make state and believable mass perceptible.
+3. **Scientific Clarity · Communication**: Disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace make meaning legible, ordered, and unmistakable. Swiss modernism and the International Typographic Style are the informing tradition.
 
-**Semantic Clarity gate**: every screen remains complete, legible, and useful without color, glass, or motion. It is not a fourth pillar.
+Scientific Clarity includes the quality test that every screen remains complete, legible, and useful without color, glass, or motion.
 
 ## Hard rules (follow these literally to stay on-brand)
 
 - Corners are square. `border-radius` is `0` by default; only raise it deliberately via the `--radius` token.
-- Shadows are **flat and offset**: `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Never use a blur radius on a structural shadow.
+- Shadows are **flat and offset**: `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Never use a blur radius. Reserve them for tactile affordances and deliberately layered cutout surfaces; flat information containers do not need a shadow.
 - Borders are solid and load-bearing: `var(--border-w) solid rgb(var(--edge))`. The edge (`--edge`) is black in both light and dark mode.
 - **Exactly one accent.** `--accent` carries all emphasis. Do not introduce a second hue to compete with it.
-- Glass surfaces use `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Glass stays neutral/translucent: it is depth, not color.
+- Glass surfaces use `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Glass stays neutral/translucent and communicates state, continuity, or depth; it is not the default treatment for every card.
 - Destructive surfaces use a neutral gray (`--neg`), never red. Error *text* may use a warning color, but destructive *containers* stay neutral.
 - Type roles are fixed: **display** = headings/buttons/brand (`--display`), **mono** = labels, captions, data, eyebrows (`--mono`), **body** = paragraph/reading copy (`--body`).
 - Leading icons are the default for nav links and buttons (Lucide). Put the icon first, then the label.
 - Press/hover feedback nudges the element toward its shadow (translate by ~1px and grow the offset). Motion proves mass.
-- Compose like an editorial instrument: one dominant statement, disciplined grids, restrained reading measures, and compact mono evidence labels.
+- Communicate with scientific clarity: one dominant statement, a rational grid, exact alignment, restrained reading measures, purposeful whitespace, and compact mono evidence labels.
 - Use monochrome to explain. The single accent identifies selection, progression, or one key relationship.
 - The rigid frame never wobbles or morphs. Motion belongs inside it, explains state or continuity, and has a complete reduced-motion equivalent.
 - Navigation, body surface, and footer chrome use the same `--shell-w`. The body is an independent near-background surface; narrower reading measures belong inside it.
@@ -44,27 +44,27 @@ All visuals read from CSS custom properties on `:root`. The machine-readable tok
 Core defaults:
 
 - `--accent` `#a388ee`, `--accent-ink` `#000000` (auto black/white by luminance)
-- `--bg` `#272933`, `--bg-2` `#1f2028`, `--ink` `#e6e6e6`, `--ink-dim` `#9da0ab`
-- `--edge` `0 0 0` (rgb channels), `--hard-shadow` `#000000`, `--neg` `#3c3f4b`
-- `--glass-blur` `18px`, `--glass-tint` `255 255 255`, `--glass-alpha` `0.07`
-- `--border-w` `2px`, `--hard-x` / `--hard-y` `7px`, `--radius` `0px`
-- `--display` Inter, `--body` Inter, `--mono` Space Mono
+- `--bg` `#f2f0ea`, `--bg-2` `#ffffff`, `--ink` `#111111`, `--ink-dim` `#5d5d59`
+- `--edge` `0 0 0` (rgb channels), `--hard-shadow` `#000000`, `--neg` `#242424`
+- `--glass-blur` `14px`, `--glass-tint` `255 255 255`, `--glass-alpha` `0.72`
+- `--border-w` `2px`, `--hard-x` / `--hard-y` `5px`, `--radius` `0px`
+- `--display` Archivo, `--body` Archivo, `--mono` IBM Plex Mono
 - `--text-display-xl` `clamp(4.5rem, 10vw, 9rem)`, `--text-display-lg` `clamp(2.8rem, 6vw, 5.5rem)`
 - `--measure-reading` `68ch`, `--measure-caption` `48ch`, `--section-space` `clamp(4rem, 9vw, 9rem)`
 - `--content-w` aliases `--shell-w`, `--shell-w` `1280px`, `--viewport-gutter` `4vw`, `--body-surface` near-background opaque surface
-- Light mode: set `data-mode="light"` on `<html>` (flips `--bg`, `--ink`, `--ink-dim`, `--glass-alpha`, etc.)
+- Light mode is the default. Set `data-mode="dark"` on `<html>` for the neutral-charcoal dark palette.
 
 ## Recommended font pairings
 
 The language fixes three roles: a **display** face (headlines, buttons, brand), a **body** face (reading copy), and a **mono** face (labels, data, captions). Keep the display heavy and tight; keep the body humanist and legible; keep mono for anything tabular or label-like.
 
-- **Canonical · Inter (header) · Inter (body) · Space Mono (detail)**: use weight and scale within Inter for hierarchy; reserve Space Mono for labels, data, code, and metadata.
+- **Canonical · Archivo (header) · Archivo (body) · IBM Plex Mono (detail)**: use width, weight, scale, and exact alignment within Archivo for hierarchy; reserve IBM Plex Mono for labels, data, code, and metadata.
 
 Rules of thumb: never pair two display faces; never set body copy in the display face (it gets tiring); use mono only for labels, code, numbers, and metadata, never for long paragraphs.
 
 ## Components and templates
 
-A complete kit of 70+ components and four production-tested site templates, each a rigid container holding liquid glass. Installable React sources are in the machine-readable registry:
+A complete kit of 70+ components and four production-tested site templates. Each component assigns structure, glass, and typography deliberately instead of applying every treatment everywhere. Installable React sources are in the machine-readable registry:
 
 - [registry.json](registry.json): component name, description, variants/sizes, and ready-to-paste HTML for buttons, badges, toggles, switches, checkboxes, radios, inputs, sliders, progress, avatars, tabs, cards (glass), and dialog/sheet overlays.
 
@@ -79,7 +79,7 @@ To adopt the kit, include the three stylesheets and the kit script, then use the
 2. Read the installed skill and [design-tokens.json](design-tokens.json).
 3. Pull components from [registry.json](registry.json) instead of inventing class names.
 4. Follow the **Hard rules** above for any new component.
-5. Use Inter for header/body roles and Space Mono only for detail.
+5. Use Archivo for header/body roles and IBM Plex Mono only for detail.
 6. Keep the visible Structured Liquidity attribution in the public site's footer.
 
 ## Source
diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
index f5ce747..35eda80 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json
@@ -3,14 +3,14 @@
   "name": "structured-liquidity-agent",
   "type": "registry:item",
   "title": "Structured Liquidity Agent Bundle",
-  "description": "Install the Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks language plus its persistent local agent skill before the first UI edit.",
+  "description": "Install the Structured Framing, Liquid Motion, and Scientific Clarity language plus its persistent local agent skill before the first UI edit.",
   "registryDependencies": [
     "https://structured.glass/r/structured-liquidity.json"
   ],
   "files": [
     {
       "path": "registry/rules/structured-liquidity/SKILL.md",
-      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks, all held to a Semantic Clarity quality gate. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.\n---\n\n# Structured Liquidity\n\n**Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.**\n\n1. **Neobrutalist Structure:** The physical frame—load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction.\n2. **Liquid Glass Motion:** Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass.\n3. **Editorial Modern Frameworks:** Hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence, informed by editorial scientific modernism.\n\nTogether they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. **Semantic Clarity remains the quality gate across all three, not a fourth pillar.** The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.\n\n## The non-negotiable rules\n\nFollow these literally — they are what keep generated output on-brand:\n\n1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.\n2. **Flat offset shadows.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. The blur radius is always `0`. Never use a soft/blurred shadow on a structural element.\n3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.\n4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.\n5. **Glass is depth, not color.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent.\n6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.\n7. **Fixed type roles.** display (`--display`, Inter) = headings/buttons/brand; body (`--body`, Inter) = reading copy; mono (`--mono`, Space Mono) = labels/data/captions/eyebrows.\n8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.\n9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.\n10. **Compose like an editorial instrument.** Use oversized hierarchy, refined grids, generous major-section rhythm, and compact mono captions for sources, state, and evidence.\n11. **Monochrome carries information.** The accent identifies selection, progression, or one key relationship; it does not decorate the page.\n12. **Pass the Semantic Clarity gate.** Every screen must remain complete, legible, and useful without color, glass, or motion.\n\n## Tokens\n\nApply these as CSS custom properties on `:root` (dark-mode defaults):\n\n```css\n:root {\n  --accent: #a388ee;\n  --accent-ink: #000000;\n  --bg: #272933;\n  --bg-2: #1f2028;\n  --ink: #e6e6e6;\n  --ink-dim: #9da0ab;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #3c3f4b;\n  --neg-ink: #f0f0f2;\n  --glass-blur: 18px;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.07;\n  --border-w: 2px;\n  --hard-x: 7px;\n  --hard-y: 7px;\n  --radius: 0px;\n  --display: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --body: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --mono: \"Space Mono\", ui-monospace, \"SFMono-Regular\", monospace;\n  --text-display-xl: clamp(4.5rem, 10vw, 9rem);\n  --text-display-lg: clamp(2.8rem, 6vw, 5.5rem);\n  --measure-reading: 68ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n}\n```\n\nLight mode: set `data-mode=\"light\"` on `<html>` and override `--bg:#dfe5f2; --bg-2:#fff; --ink:#000; --ink-dim:#5b5f6b; --neg:#16171c; --neg-ink:#fff; --glass-alpha:0.55`.\n\nThe canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).\n\n## Type layout\n\nThree roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use dramatic scale and weight for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.\n\n## Motion contract\n\nThe rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.\n\n## Components\n\nThe specimen ships a **shadcn-installable registry** served at `/r/*.json`. Two ways to adopt, depending on the target project:\n\n### Installation gate for agents\n\nBefore making the first UI edit in a target project, run:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json\n```\n\nVerify that the theme styles and `.agents/skills/structured-liquidity/SKILL.md` landed. Do not spend early iterations approximating the language by hand.\n\n**A. React + Tailwind project (preferred).** Use the shadcn CLI. Install the whole language (tokens + the three stylesheets + the kit script) first, then any component:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity.json   # base style — do this first\nnpx shadcn@latest add https://structured.glass/r/button.json                  # then any component\n```\n\nEach `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.\n\n**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Inter and Space Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.\n\n## Anatomy of a rigid container holding glass\n\n```html\n<div class=\"glass kit-cell\">\n  <span class=\"kit-cap\">Title</span>\n  <p>Body copy inside a rigid container holding liquid glass.</p>\n</div>\n```\n\n```css\n/* if you are not using the kit CSS, the container recipe is: */\n.container {\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n}\n```\n",
+      "content": "---\nname: structured-liquidity\ndescription: Apply the Structured Liquidity UI design language — Structured Framing, Liquid Motion, and Scientific Clarity. Use when building or restyling any UI that should follow Structured Liquidity, when the user references the language by name, or when adopting its tokens/components in a new project.\n---\n\n# Structured Liquidity\n\n**Structured framing. Liquid motion. Scientific clarity.**\n\n1. **Structured Framing:** How information is organized—load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows.\n2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible.\n3. **Scientific Clarity:** How meaning is communicated—disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: make information legible, ordered, and unmistakable.\n\nTogether they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Scientific Clarity includes the quality test that every screen remains complete, legible, and useful without color, glass, or motion. The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact.\n\n## The non-negotiable rules\n\nFollow these literally — they are what keep generated output on-brand:\n\n1. **Square corners.** `border-radius: var(--radius)` (default `0`). Only raise deliberately.\n2. **Flat offset shadows, used selectively.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Blur is always `0`. Reserve shadows for tactile affordances and deliberately layered cutout surfaces; flat information containers can rely on borders, rules, and alignment.\n3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.\n4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.\n5. **Glass is state and depth, not decoration.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent and use it where continuity, layering, or motion matters—not on every card.\n6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.\n7. **Fixed type roles.** display (`--display`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex Mono) = labels/data/captions/eyebrows.\n8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.\n9. **Motion proves mass.** On press/hover, nudge the element ~1px toward its shadow and grow the offset.\n10. **Communicate with scientific clarity.** Use a rational grid, exact alignment, asymmetric balance, measured line lengths, purposeful whitespace, and compact mono captions for sources, state, and evidence. Swiss modernism and the International Typographic Style are the reference tradition.\n11. **Monochrome carries information.** The accent identifies selection, progression, or one key relationship; it does not decorate the page.\n12. **Clarity survives effects.** Every screen must remain complete, legible, and useful without color, glass, or motion.\n\n## Tokens\n\nApply these as CSS custom properties on `:root` (light-mode defaults):\n\n```css\n:root {\n  --accent: #a388ee;\n  --accent-ink: #000000;\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111;\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #242424;\n  --neg-ink: #ffffff;\n  --glass-blur: 14px;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.72;\n  --border-w: 2px;\n  --hard-x: 5px;\n  --hard-y: 5px;\n  --radius: 0px;\n  --display: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex Mono\", \"SFMono-Regular\", ui-monospace, monospace;\n  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);\n  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);\n  --measure-reading: 62ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n}\n```\n\nDark mode: set `data-mode=\"dark\"` on `<html>` and override `--bg:#171717; --bg-2:#0f0f0f; --ink:#f3f1eb; --ink-dim:#aaa9a4; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`.\n\nThe canonical machine-readable set is `design-tokens.json` (W3C Design Tokens format; each token's `$extensions.cssVar` gives the exact variable name).\n\n## Type layout\n\nThree roles — header / body / detail (display / body / mono). Archivo carries both sans-serif roles; use scale, weight, measure, and alignment for hierarchy. Use IBM Plex Mono only for labels, data, code, captions, and eyebrows. Prefer one dominant statement, a 12-column or similarly disciplined grid, short reading measures, and figure captions that identify evidence and state.\n\n## Motion contract\n\nThe rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.\n\n## Components\n\nThe specimen ships a **shadcn-installable registry** served at `/r/*.json`. Two ways to adopt, depending on the target project:\n\n### Installation gate for agents\n\nBefore making the first UI edit in a target project, run:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json\n```\n\nVerify that the theme styles and `.agents/skills/structured-liquidity/SKILL.md` landed. Do not spend early iterations approximating the language by hand.\n\n**A. React + Tailwind project (preferred).** Use the shadcn CLI. Install the whole language (tokens + the three stylesheets + the kit script) first, then any component:\n\n```bash\nnpx shadcn@latest add https://structured.glass/r/structured-liquidity.json   # base style — do this first\nnpx shadcn@latest add https://structured.glass/r/button.json                  # then any component\n```\n\nEach `registry:ui` item is a plain React component (no Radix) that emits the SL classes and declares the base style as a `registryDependency`, so the CSS comes along. The registry index lives at `/registry.json`.\n\n**B. Any stack (plain HTML/CSS).** Include `structured-liquidity.css`, `structured-liquidity-components.css`, `structured-liquidity-kit.css`, and `structured-liquidity-kit.js`; load Archivo and IBM Plex Mono; then use the SL classes directly. Core kit: `sl-btn`, `sl-badge`, `sl-toggle`/`sl-toggle-group`, `sl-switch`, `sl-check`, `sl-radio-item` (inside a `[data-radio-group]`), `sl-input`/`sl-label`, `sl-slider`, `sl-progress`, `sl-ava`, `sl-tabs` (`.tablist` buttons + `.panel` nodes), and overlays (`sl-overlay` + `sl-dialog`/`sl-sheet`). In plain HTML, interactive components are wired by `structured-liquidity-kit.js` via `data-toggle-aria`, `data-toggle-group`, `data-radio-group`, `data-open-overlay`, `data-close-overlay`.\n\n## Anatomy of a stateful glass surface inside a rigid frame\n\n```html\n<div class=\"glass kit-cell\">\n  <span class=\"kit-cap\">Title</span>\n  <p>Use this treatment when the surface communicates state or depth.</p>\n</div>\n```\n\n```css\n/* if you are not using the kit CSS, the stateful glass recipe is: */\n.stateful-glass {\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n  background: rgba(var(--glass-tint), var(--glass-alpha));\n  backdrop-filter: blur(var(--glass-blur)) saturate(150%);\n}\n```\n",
       "type": "registry:file",
       "target": ".agents/skills/structured-liquidity/SKILL.md"
     }
diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity.json b/artifacts/structured-liquidity/public/r/structured-liquidity.json
index 7038ffc..1ab17c9 100644
--- a/artifacts/structured-liquidity/public/r/structured-liquidity.json
+++ b/artifacts/structured-liquidity/public/r/structured-liquidity.json
@@ -3,7 +3,7 @@
   "name": "structured-liquidity",
   "type": "registry:style",
   "title": "Structured Liquidity",
-  "description": "The Structured Liquidity design language base: Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks, with Semantic Clarity as the quality gate. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
+  "description": "The Structured Liquidity design language base: Structured Framing, Liquid Motion, and Scientific Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
   "dependencies": [
     "clsx",
     "tailwind-merge",
@@ -17,31 +17,31 @@
     "theme": {
       "accent": "#a388ee",
       "accent-ink": "#000000",
-      "bg": "#272933",
-      "bg-2": "#1f2028",
-      "ink": "#e6e6e6",
-      "ink-dim": "#9da0ab",
+      "bg": "#f2f0ea",
+      "bg-2": "#ffffff",
+      "ink": "#111111",
+      "ink-dim": "#5d5d59",
       "edge": "0 0 0",
       "hard-shadow": "#000000",
-      "neg": "#3c3f4b",
-      "neg-ink": "#f0f0f2",
-      "glass-blur": "18px",
+      "neg": "#242424",
+      "neg-ink": "#ffffff",
+      "glass-blur": "14px",
       "glass-tint": "255 255 255",
-      "glass-alpha": "0.07",
+      "glass-alpha": "0.72",
       "border-w": "2px",
-      "hard-x": "7px",
-      "hard-y": "7px",
+      "hard-x": "5px",
+      "hard-y": "5px",
       "radius": "0px",
-      "display": "\"Inter\",\"Helvetica Neue\",system-ui,sans-serif",
-      "body": "\"Inter\",\"Helvetica Neue\",system-ui,sans-serif",
-      "mono": "\"Space Mono\",ui-monospace,\"SFMono-Regular\",monospace",
-      "text-display-xl": "clamp(4.5rem, 10vw, 9rem)",
-      "text-display-lg": "clamp(2.8rem, 6vw, 5.5rem)",
-      "measure-reading": "68ch",
+      "display": "\"Archivo\",\"Helvetica Neue\",Arial,system-ui,sans-serif",
+      "body": "\"Archivo\",\"Helvetica Neue\",Arial,system-ui,sans-serif",
+      "mono": "\"IBM Plex Mono\",\"SFMono-Regular\",ui-monospace,monospace",
+      "text-display-xl": "clamp(4.2rem, 10.5vw, 9.5rem)",
+      "text-display-lg": "clamp(2.6rem, 5.5vw, 5.25rem)",
+      "measure-reading": "62ch",
       "measure-caption": "48ch",
       "grid-gutter": "clamp(1rem, 2.5vw, 2.5rem)",
       "section-space": "clamp(4rem, 9vw, 9rem)",
-      "editorial-gap": "clamp(1.25rem, 3vw, 3rem)",
+      "clarity-gap": "clamp(1.25rem, 3vw, 3rem)",
       "rule-hairline": "1px",
       "ease-liquid": "cubic-bezier(.22,1,.36,1)",
       "ease-liquid-over": "cubic-bezier(.34,1.4,.5,1)",
@@ -53,7 +53,7 @@
   "files": [
     {
       "path": "registry/styles/structured-liquidity.css",
-      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — Neobrutalist Structure. Liquid Glass\n   Motion. Editorial Modern Frameworks. Semantic Clarity remains the quality\n   gate across all three, not a fourth pillar. This stylesheet IS\n   the specimen.\n   ============================================================ */\n\n:root {\n  /* ---- tunable knobs (driven by Tweaks) ---- */\n  --accent: #a388ee;          /* neobrutalism.dev purple */\n  --accent-ink: #000000;      /* text that sits on accent */\n  --glass-blur: 18px;\n  --glass-tint: 255 255 255;  /* rgb channels for glass fill */\n  --glass-alpha: 0.07;\n  --border-w: 2px;\n  --hard-x: 7px;\n  --hard-y: 7px;\n  --radius: 0px;\n  --shell-w: 1280px;\n  --content-w: var(--shell-w);\n  --viewport-gutter: 4vw;\n  --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);\n  --floating-ui-clearance: 96px;\n\n  /* ---- Editorial Modern Frameworks, informed by editorial scientific modernism ---- */\n  --text-display-xl: clamp(4.5rem, 10vw, 9rem);\n  --text-display-lg: clamp(2.8rem, 6vw, 5.5rem);\n  --measure-reading: 68ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n  --editorial-gap: clamp(1.25rem, 3vw, 3rem);\n  --rule-hairline: 1px;\n  --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);\n  --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);\n\n  /* ---- fixed palette (neobrutalism.dev) ---- */\n  --bg: #272933;\n  --bg-2: #1f2028;\n  --ink: #e6e6e6;             /* foreground */\n  --ink-dim: #9da0ab;\n  --edge: 0 0 0;              /* neobrutalism black border (rgb) */\n  --hard-shadow: #000000;\n  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */\n  --neg-ink: #f0f0f2;\n\n  --display: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --body: \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n  --mono: \"Space Mono\", ui-monospace, \"SFMono-Regular\", monospace;\n}\n\n/* tighter rhythm — denser, less airy */\n\n[data-mode=\"light\"] {\n  --bg: #dfe5f2;\n  --bg-2: #ffffff;\n  --ink: #000000;\n  --ink-dim: #5b5f6b;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #16171c;             /* near-black negative surface in light mode */\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.55;\n}\n\n* { box-sizing: border-box; }\n\nhtml { scroll-behavior: auto; background: var(--bg); }\n\nbody {\n  margin: 0;\n  position: relative;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--display);\n  font-weight: 440;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n::selection { background: var(--accent); color: var(--accent-ink); }\n\n/* ============================================================\n   BACKDROP — a full-document-height iridescent field the glass\n   refracts. Not fixed (fixed/attachment:fixed only paint at the\n   document top in capture/print contexts) — it spans the whole\n   page so every section is tinted and nothing renders flat-black.\n   ============================================================ */\n\n.field {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 100%;\n  z-index: -2;\n  overflow: hidden;\n  pointer-events: none;\n  background:\n    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),\n    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),\n    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),\n    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),\n    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),\n    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),\n    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),\n    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);\n  background-repeat: no-repeat;\n  animation: fieldshift 30s ease-in-out infinite alternate;\n}\n[data-mode=\"light\"] .field { opacity: 0.55; }\n@keyframes fieldshift {\n  from { transform: translateX(0); }\n  to   { transform: translateX(-3vw); }\n}\n@media (prefers-reduced-motion: reduce) { .field { animation: none; } }\n\n.field .grid {\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);\n  background-size: 64px 64px;\n  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);\n  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);\n}\n\n.grain {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 100%;\n  z-index: -1;\n  pointer-events: none;\n  opacity: 0.4;\n  mix-blend-mode: overlay;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n/* ============================================================\n   GLASS-BRUTAL PRIMITIVE — frosted material + brutal edge\n   ============================================================ */\n\n.glass {\n  position: relative;\n  background:\n    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));\n  backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow:\n    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */\n    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */\n    inset 0 -1px 0 rgba(255,255,255,0.06),\n    inset 0 0 40px rgba(255,255,255,0.04);\n}\n/* moving sheen + cursor specular */\n.glass::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: radial-gradient(\n    180px circle at var(--mx, 50%) var(--my, 0%),\n    rgba(255,255,255,0.22), transparent 60%);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.glass:hover::before { opacity: 1; }\n.glass::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);\n  background-size: 250% 250%;\n  background-position: 100% 100%;\n  opacity: 0.7;\n}\n\n.flat {            /* brutalist flat (no glass) — for loud accent blocks */\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n\n/* ============================================================\n   TYPE\n   ============================================================ */\n\n.eyebrow {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n}\n.eyebrow::before {\n  content: \"\";\n  width: 9px; height: 9px;\n  background: var(--accent);\n  display: inline-block;\n}\n\nh1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }\n\n.section-title {\n  font-size: clamp(1.5rem, 2.8vw, 2.5rem);\n  margin: 0.25em 0 0.3em;\n}\n.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }\n\n.accent { color: var(--accent); }\n.mono { font-family: var(--mono); }\n\n/* ============================================================\n   LAYOUT\n   ============================================================ */\n\n.wrap,\n.shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }\n.sl-site-content,\n.sl-site-shell {\n  width: min(100%, var(--shell-w));\n  max-width: calc(100vw - var(--viewport-gutter));\n  margin-inline: auto;\n}\n.sl-site-body { background: var(--body-surface); }\nsection { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }\n.section-head { max-width: 70ch; margin-bottom: 1.1rem; }\n\n.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }\n.reveal.in { opacity: 1; transform: none; }\n\n@media (prefers-reduced-motion: reduce) {\n  .reveal { opacity: 1; transform: none; transition: none; }\n  html { scroll-behavior: auto; }\n}\n\n@media print {\n  .reveal { opacity: 1 !important; transform: none !important; }\n}\n",
+      "content": "/* ============================================================\n   STRUCTURED LIQUIDITY — Structured framing. Liquid motion.\n   Scientific clarity. This stylesheet IS\n   the specimen.\n   ============================================================ */\n\n:root {\n  /* ---- tunable knobs (driven by Tweaks) ---- */\n  --accent: #a388ee; /* neobrutalism.dev purple */\n  --accent-ink: #000000; /* text that sits on accent */\n  --glass-blur: 14px;\n  --glass-tint: 255 255 255; /* rgb channels for glass fill */\n  --glass-alpha: 0.72;\n  --border-w: 2px;\n  --hard-x: 5px;\n  --hard-y: 5px;\n  --radius: 0px;\n  --shell-w: 1280px;\n  --content-w: var(--shell-w);\n  --viewport-gutter: 4vw;\n  --body-surface: var(--bg);\n  --floating-ui-clearance: 96px;\n\n  /* ---- Scientific Clarity, informed by Swiss modernism and the International Typographic Style ---- */\n  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);\n  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);\n  --measure-reading: 62ch;\n  --measure-caption: 48ch;\n  --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);\n  --section-space: clamp(4rem, 9vw, 9rem);\n  --clarity-gap: clamp(1.25rem, 3vw, 3rem);\n  --rule-hairline: 1px;\n  --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);\n  --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);\n\n  /* ---- light-first paper palette ---- */\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111; /* foreground */\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0; /* neobrutalism black border (rgb) */\n  --hard-shadow: #000000;\n  --neg: #242424; /* negative / destructive surface (gray, never red) */\n  --neg-ink: #ffffff;\n\n  --display: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --body: \"Archivo\", \"Helvetica Neue\", Arial, system-ui, sans-serif;\n  --mono: \"IBM Plex Mono\", \"SFMono-Regular\", ui-monospace, monospace;\n}\n\n/* tighter rhythm — denser, less airy */\n\n[data-mode=\"light\"] {\n  --bg: #f2f0ea;\n  --bg-2: #ffffff;\n  --ink: #111111;\n  --ink-dim: #5d5d59;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #16171c; /* near-black negative surface in light mode */\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.72;\n}\n\n[data-mode=\"dark\"] {\n  --bg: #171717;\n  --bg-2: #0f0f0f;\n  --ink: #f3f1eb;\n  --ink-dim: #aaa9a4;\n  --edge: 0 0 0;\n  --hard-shadow: #000000;\n  --neg: #343434;\n  --neg-ink: #ffffff;\n  --glass-tint: 255 255 255;\n  --glass-alpha: 0.08;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: auto;\n  background: var(--bg);\n}\n\nbody {\n  margin: 0;\n  position: relative;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--display);\n  font-weight: 440;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n::selection {\n  background: var(--accent);\n  color: var(--accent-ink);\n}\n\n/* ============================================================\n   BACKDROP — a full-document-height iridescent field the glass\n   refracts. Not fixed (fixed/attachment:fixed only paint at the\n   document top in capture/print contexts) — it spans the whole\n   page so every section is tinted and nothing renders flat-black.\n   ============================================================ */\n\n.field {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: -2;\n  overflow: hidden;\n  pointer-events: none;\n  background:\n    radial-gradient(\n      36vw 26vw at 86% 4%,\n      color-mix(in srgb, var(--accent) 18%, transparent),\n      transparent 72%\n    ),\n    radial-gradient(\n      30vw 24vw at 12% 42%,\n      color-mix(in srgb, var(--accent) 10%, transparent),\n      transparent 74%\n    ),\n    linear-gradient(var(--bg), var(--bg));\n  background-repeat: no-repeat;\n  animation: fieldshift 34s ease-in-out infinite alternate;\n}\n[data-mode=\"light\"] .field {\n  opacity: 1;\n}\n[data-mode=\"dark\"] .field {\n  opacity: 0.72;\n}\n@keyframes fieldshift {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-3vw);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .field {\n    animation: none;\n  }\n}\n\n.field .grid {\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);\n  background-size: 64px 64px;\n  mask-image: linear-gradient(\n    180deg,\n    #000,\n    #000 40%,\n    rgba(0, 0, 0, 0.25) 75%,\n    transparent\n  );\n  -webkit-mask-image: linear-gradient(\n    180deg,\n    #000,\n    #000 40%,\n    rgba(0, 0, 0, 0.25) 75%,\n    transparent\n  );\n}\n\n.grain {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: -1;\n  pointer-events: none;\n  opacity: 0.08;\n  mix-blend-mode: overlay;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n/* ============================================================\n   GLASS-BRUTAL PRIMITIVE — frosted material + brutal edge\n   ============================================================ */\n\n.glass {\n  position: relative;\n  background: linear-gradient(\n    135deg,\n    rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)),\n    rgba(var(--glass-tint), var(--glass-alpha))\n  );\n  backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);\n}\n/* moving sheen + cursor specular */\n.glass::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: radial-gradient(\n    180px circle at var(--mx, 50%) var(--my, 0%),\n    rgba(255, 255, 255, 0.22),\n    transparent 60%\n  );\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.glass:hover::before {\n  opacity: 1;\n}\n.glass::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: linear-gradient(\n    115deg,\n    transparent 30%,\n    rgba(255, 255, 255, 0.1) 45%,\n    transparent 55%\n  );\n  background-size: 250% 250%;\n  background-position: 100% 100%;\n  opacity: 0.7;\n}\n\n.flat {\n  /* brutalist flat (no glass) — for loud accent blocks */\n  border: var(--border-w) solid rgb(var(--edge));\n  border-radius: var(--radius);\n  box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);\n}\n\n/* ============================================================\n   TYPE\n   ============================================================ */\n\n.eyebrow {\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ink-dim);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n}\n.eyebrow::before {\n  content: \"\";\n  width: 9px;\n  height: 9px;\n  background: var(--accent);\n  display: inline-block;\n}\n\nh1,\nh2,\nh3 {\n  font-weight: 800;\n  line-height: 0.98;\n  letter-spacing: -0.02em;\n  margin: 0;\n  text-wrap: balance;\n}\n\n.section-title {\n  font-size: clamp(2rem, 4.2vw, 4.25rem);\n  line-height: 0.93;\n  letter-spacing: -0.045em;\n  margin: 0.25em 0 0.3em;\n}\n.lead {\n  font-size: clamp(1rem, 1.3vw, 1.18rem);\n  color: var(--ink-dim);\n  max-width: 60ch;\n  text-wrap: pretty;\n}\n\n.accent {\n  color: var(--accent);\n}\n.mono {\n  font-family: var(--mono);\n}\n\n/* ============================================================\n   LAYOUT\n   ============================================================ */\n\n.wrap,\n.shell {\n  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));\n  margin-inline: auto;\n}\n.sl-site-content,\n.sl-site-shell {\n  width: min(100%, var(--shell-w));\n  max-width: calc(100vw - var(--viewport-gutter));\n  margin-inline: auto;\n}\n.sl-site-body {\n  background: var(--body-surface);\n}\nsection {\n  padding: clamp(3.5rem, 8vw, 7.5rem) 0;\n  position: relative;\n  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);\n}\n.section-head {\n  display: grid;\n  grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr);\n  column-gap: var(--grid-gutter);\n  max-width: none;\n  margin-bottom: clamp(2rem, 4vw, 4rem);\n}\n.section-head .eyebrow {\n  grid-column: 1;\n  align-self: start;\n}\n.section-head .section-title,\n.section-head .lead {\n  grid-column: 2;\n}\n.section-head .lead {\n  margin-top: 1rem;\n}\n@media (max-width: 720px) {\n  .section-head {\n    grid-template-columns: 1fr;\n  }\n  .section-head .eyebrow,\n  .section-head .section-title,\n  .section-head .lead {\n    grid-column: 1;\n  }\n  .section-head .section-title {\n    margin-top: 1.25rem;\n  }\n}\n\n.reveal {\n  opacity: 0;\n  transform: translateY(26px);\n  transition:\n    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),\n    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);\n}\n.reveal.in {\n  opacity: 1;\n  transform: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .reveal {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n  html {\n    scroll-behavior: auto;\n  }\n}\n\n@media print {\n  .reveal {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n",
       "type": "registry:file",
       "target": "styles/structured-liquidity.css"
     },
diff --git a/artifacts/structured-liquidity/public/registry.json b/artifacts/structured-liquidity/public/registry.json
index 7b3589e..3e9b435 100644
--- a/artifacts/structured-liquidity/public/registry.json
+++ b/artifacts/structured-liquidity/public/registry.json
@@ -7,13 +7,13 @@
       "name": "structured-liquidity",
       "type": "registry:style",
       "title": "Structured Liquidity",
-      "description": "The Structured Liquidity design language base: Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks, with Semantic Clarity as the quality gate. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it."
+      "description": "The Structured Liquidity design language base: Structured Framing, Liquid Motion, and Scientific Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it."
     },
     {
       "name": "structured-liquidity-agent",
       "type": "registry:item",
       "title": "Structured Liquidity Agent Bundle",
-      "description": "Install the Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks language plus its persistent local agent skill before the first UI edit."
+      "description": "Install the Structured Framing, Liquid Motion, and Scientific Clarity language plus its persistent local agent skill before the first UI edit."
     },
     {
       "name": "accordion",
diff --git a/artifacts/structured-liquidity/public/structured-liquidity.css b/artifacts/structured-liquidity/public/structured-liquidity.css
index 86db3e6..b6666e9 100644
--- a/artifacts/structured-liquidity/public/structured-liquidity.css
+++ b/artifacts/structured-liquidity/public/structured-liquidity.css
@@ -1,72 +1,89 @@
 /* ============================================================
-   STRUCTURED LIQUIDITY — Neobrutalist Structure. Liquid Glass
-   Motion. Editorial Modern Frameworks. Semantic Clarity remains the quality
-   gate across all three, not a fourth pillar. This stylesheet IS
+   STRUCTURED LIQUIDITY — Structured framing. Liquid motion.
+   Scientific clarity. This stylesheet IS
    the specimen.
    ============================================================ */
 
 :root {
   /* ---- tunable knobs (driven by Tweaks) ---- */
-  --accent: #a388ee;          /* neobrutalism.dev purple */
-  --accent-ink: #000000;      /* text that sits on accent */
-  --glass-blur: 18px;
-  --glass-tint: 255 255 255;  /* rgb channels for glass fill */
-  --glass-alpha: 0.07;
+  --accent: #a388ee; /* neobrutalism.dev purple */
+  --accent-ink: #000000; /* text that sits on accent */
+  --glass-blur: 14px;
+  --glass-tint: 255 255 255; /* rgb channels for glass fill */
+  --glass-alpha: 0.72;
   --border-w: 2px;
-  --hard-x: 7px;
-  --hard-y: 7px;
+  --hard-x: 5px;
+  --hard-y: 5px;
   --radius: 0px;
   --shell-w: 1280px;
   --content-w: var(--shell-w);
   --viewport-gutter: 4vw;
-  --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
+  --body-surface: var(--bg);
   --floating-ui-clearance: 96px;
 
-  /* ---- Editorial Modern Frameworks, informed by editorial scientific modernism ---- */
-  --text-display-xl: clamp(4.5rem, 10vw, 9rem);
-  --text-display-lg: clamp(2.8rem, 6vw, 5.5rem);
-  --measure-reading: 68ch;
+  /* ---- Scientific Clarity, informed by Swiss modernism and the International Typographic Style ---- */
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
   --measure-caption: 48ch;
   --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
   --section-space: clamp(4rem, 9vw, 9rem);
-  --editorial-gap: clamp(1.25rem, 3vw, 3rem);
+  --clarity-gap: clamp(1.25rem, 3vw, 3rem);
   --rule-hairline: 1px;
   --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);
   --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);
 
-  /* ---- fixed palette (neobrutalism.dev) ---- */
-  --bg: #272933;
-  --bg-2: #1f2028;
-  --ink: #e6e6e6;             /* foreground */
-  --ink-dim: #9da0ab;
-  --edge: 0 0 0;              /* neobrutalism black border (rgb) */
+  /* ---- light-first paper palette ---- */
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111; /* foreground */
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0; /* neobrutalism black border (rgb) */
   --hard-shadow: #000000;
-  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */
-  --neg-ink: #f0f0f2;
+  --neg: #242424; /* negative / destructive surface (gray, never red) */
+  --neg-ink: #ffffff;
 
-  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --body: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
+  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
 }
 
 /* tighter rhythm — denser, less airy */
 
 [data-mode="light"] {
-  --bg: #dfe5f2;
+  --bg: #f2f0ea;
   --bg-2: #ffffff;
-  --ink: #000000;
-  --ink-dim: #5b5f6b;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0;
+  --hard-shadow: #000000;
+  --neg: #16171c; /* near-black negative surface in light mode */
+  --neg-ink: #ffffff;
+  --glass-tint: 255 255 255;
+  --glass-alpha: 0.72;
+}
+
+[data-mode="dark"] {
+  --bg: #171717;
+  --bg-2: #0f0f0f;
+  --ink: #f3f1eb;
+  --ink-dim: #aaa9a4;
   --edge: 0 0 0;
   --hard-shadow: #000000;
-  --neg: #16171c;             /* near-black negative surface in light mode */
+  --neg: #343434;
   --neg-ink: #ffffff;
   --glass-tint: 255 255 255;
-  --glass-alpha: 0.55;
+  --glass-alpha: 0.08;
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
-html { scroll-behavior: auto; background: var(--bg); }
+html {
+  scroll-behavior: auto;
+  background: var(--bg);
+}
 
 body {
   margin: 0;
@@ -80,7 +97,10 @@ body {
   overflow-x: hidden;
 }
 
-::selection { background: var(--accent); color: var(--accent-ink); }
+::selection {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
 
 /* ============================================================
    BACKDROP — a full-document-height iridescent field the glass
@@ -91,29 +111,47 @@ body {
 
 .field {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
   background:
-    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),
-    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),
-    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),
-    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),
-    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),
-    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),
-    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),
-    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);
+    radial-gradient(
+      36vw 26vw at 86% 4%,
+      color-mix(in srgb, var(--accent) 18%, transparent),
+      transparent 72%
+    ),
+    radial-gradient(
+      30vw 24vw at 12% 42%,
+      color-mix(in srgb, var(--accent) 10%, transparent),
+      transparent 74%
+    ),
+    linear-gradient(var(--bg), var(--bg));
   background-repeat: no-repeat;
-  animation: fieldshift 30s ease-in-out infinite alternate;
+  animation: fieldshift 34s ease-in-out infinite alternate;
+}
+[data-mode="light"] .field {
+  opacity: 1;
+}
+[data-mode="dark"] .field {
+  opacity: 0.72;
 }
-[data-mode="light"] .field { opacity: 0.55; }
 @keyframes fieldshift {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-3vw); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-3vw);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .field {
+    animation: none;
+  }
 }
-@media (prefers-reduced-motion: reduce) { .field { animation: none; } }
 
 .field .grid {
   position: absolute;
@@ -122,17 +160,31 @@ body {
     linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);
   background-size: 64px 64px;
-  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
-  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
+  mask-image: linear-gradient(
+    180deg,
+    #000,
+    #000 40%,
+    rgba(0, 0, 0, 0.25) 75%,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    #000,
+    #000 40%,
+    rgba(0, 0, 0, 0.25) 75%,
+    transparent
+  );
 }
 
 .grain {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.4;
+  opacity: 0.08;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@@ -143,17 +195,16 @@ body {
 
 .glass {
   position: relative;
-  background:
-    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));
+  background: linear-gradient(
+    135deg,
+    rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)),
+    rgba(var(--glass-tint), var(--glass-alpha))
+  );
   backdrop-filter: blur(var(--glass-blur)) saturate(180%);
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
-  box-shadow:
-    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */
-    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */
-    inset 0 -1px 0 rgba(255,255,255,0.06),
-    inset 0 0 40px rgba(255,255,255,0.04);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 /* moving sheen + cursor specular */
 .glass::before {
@@ -164,24 +215,34 @@ body {
   pointer-events: none;
   background: radial-gradient(
     180px circle at var(--mx, 50%) var(--my, 0%),
-    rgba(255,255,255,0.22), transparent 60%);
+    rgba(255, 255, 255, 0.22),
+    transparent 60%
+  );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.glass:hover::before { opacity: 1; }
+.glass:hover::before {
+  opacity: 1;
+}
 .glass::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);
+  background: linear-gradient(
+    115deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.1) 45%,
+    transparent 55%
+  );
   background-size: 250% 250%;
   background-position: 100% 100%;
   opacity: 0.7;
 }
 
-.flat {            /* brutalist flat (no glass) — for loud accent blocks */
+.flat {
+  /* brutalist flat (no glass) — for loud accent blocks */
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
   box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
@@ -203,46 +264,123 @@ body {
 }
 .eyebrow::before {
   content: "";
-  width: 9px; height: 9px;
+  width: 9px;
+  height: 9px;
   background: var(--accent);
   display: inline-block;
 }
 
-h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
+h1,
+h2,
+h3 {
+  font-weight: 800;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-wrap: balance;
+}
 
 .section-title {
-  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
+  font-size: clamp(2rem, 4.2vw, 4.25rem);
+  line-height: 0.93;
+  letter-spacing: -0.045em;
   margin: 0.25em 0 0.3em;
 }
-.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }
+.lead {
+  font-size: clamp(1rem, 1.3vw, 1.18rem);
+  color: var(--ink-dim);
+  max-width: 60ch;
+  text-wrap: pretty;
+}
 
-.accent { color: var(--accent); }
-.mono { font-family: var(--mono); }
+.accent {
+  color: var(--accent);
+}
+.mono {
+  font-family: var(--mono);
+}
 
 /* ============================================================
    LAYOUT
    ============================================================ */
 
 .wrap,
-.shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }
+.shell {
+  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));
+  margin-inline: auto;
+}
 .sl-site-content,
 .sl-site-shell {
   width: min(100%, var(--shell-w));
   max-width: calc(100vw - var(--viewport-gutter));
   margin-inline: auto;
 }
-.sl-site-body { background: var(--body-surface); }
-section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }
-.section-head { max-width: 70ch; margin-bottom: 1.1rem; }
+.sl-site-body {
+  background: var(--body-surface);
+}
+section {
+  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
+  position: relative;
+  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.section-head {
+  display: grid;
+  grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr);
+  column-gap: var(--grid-gutter);
+  max-width: none;
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+.section-head .eyebrow {
+  grid-column: 1;
+  align-self: start;
+}
+.section-head .section-title,
+.section-head .lead {
+  grid-column: 2;
+}
+.section-head .lead {
+  margin-top: 1rem;
+}
+@media (max-width: 720px) {
+  .section-head {
+    grid-template-columns: 1fr;
+  }
+  .section-head .eyebrow,
+  .section-head .section-title,
+  .section-head .lead {
+    grid-column: 1;
+  }
+  .section-head .section-title {
+    margin-top: 1.25rem;
+  }
+}
 
-.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
-.reveal.in { opacity: 1; transform: none; }
+.reveal {
+  opacity: 0;
+  transform: translateY(26px);
+  transition:
+    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.reveal.in {
+  opacity: 1;
+  transform: none;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-  html { scroll-behavior: auto; }
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 @media print {
-  .reveal { opacity: 1 !important; transform: none !important; }
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
 }
diff --git a/artifacts/structured-liquidity/scripts/build-registry.mjs b/artifacts/structured-liquidity/scripts/build-registry.mjs
index 1342734..53a85eb 100644
--- a/artifacts/structured-liquidity/scripts/build-registry.mjs
+++ b/artifacts/structured-liquidity/scripts/build-registry.mjs
@@ -24,7 +24,13 @@
    window.location.origin, so the copied command always matches
    wherever the registry is being served.
    ============================================================ */
-import { readFileSync, writeFileSync, mkdirSync, readdirSync, rmSync } from "node:fs";
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  readdirSync,
+  rmSync,
+} from "node:fs";
 import { join, dirname, basename } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -41,7 +47,9 @@ const PUBLIC = join(ROOT, "public");
 const WRITE_DIR = process.env.REGISTRY_OUT_DIR || PUBLIC;
 const OUT_DIR = join(WRITE_DIR, "r");
 
-const BASE_URL = (process.env.REGISTRY_BASE_URL || "https://structured.glass").replace(/\/+$/, "");
+const BASE_URL = (
+  process.env.REGISTRY_BASE_URL || "https://structured.glass"
+).replace(/\/+$/, "");
 const itemUrl = (name) => `${BASE_URL}/r/${name}.json`;
 
 const BASE_NAME = "structured-liquidity";
@@ -99,7 +107,8 @@ for (const file of files) {
   for (const spec of specs) {
     if (spec.startsWith("@/components/ui/")) {
       const dep = spec.slice("@/components/ui/".length).split("/")[0];
-      if (componentNames.has(dep) && dep !== name) registryDependencies.add(itemUrl(dep));
+      if (componentNames.has(dep) && dep !== name)
+        registryDependencies.add(itemUrl(dep));
     } else if (spec.startsWith("@/lib/utils")) {
       registryDependencies.add("utils");
     } else if (spec.startsWith("@/") || spec.startsWith(".")) {
@@ -206,38 +215,38 @@ const JS_FILES = ["structured-liquidity-kit.js"];
 
 const cssVars = {
   theme: {
-    "accent": "#a388ee",
+    accent: "#a388ee",
     "accent-ink": "#000000",
-    "bg": "#272933",
-    "bg-2": "#1f2028",
-    "ink": "#e6e6e6",
-    "ink-dim": "#9da0ab",
-    "edge": "0 0 0",
+    bg: "#f2f0ea",
+    "bg-2": "#ffffff",
+    ink: "#111111",
+    "ink-dim": "#5d5d59",
+    edge: "0 0 0",
     "hard-shadow": "#000000",
-    "neg": "#3c3f4b",
-    "neg-ink": "#f0f0f2",
-    "glass-blur": "18px",
+    neg: "#242424",
+    "neg-ink": "#ffffff",
+    "glass-blur": "14px",
     "glass-tint": "255 255 255",
-    "glass-alpha": "0.07",
+    "glass-alpha": "0.72",
     "border-w": "2px",
-    "hard-x": "7px",
-    "hard-y": "7px",
-    "radius": "0px",
-    "display": '"Inter","Helvetica Neue",system-ui,sans-serif',
-    "body": '"Inter","Helvetica Neue",system-ui,sans-serif',
-    "mono": '"Space Mono",ui-monospace,"SFMono-Regular",monospace',
-    "text-display-xl": "clamp(4.5rem, 10vw, 9rem)",
-    "text-display-lg": "clamp(2.8rem, 6vw, 5.5rem)",
-    "measure-reading": "68ch",
+    "hard-x": "5px",
+    "hard-y": "5px",
+    radius: "0px",
+    display: '"Archivo","Helvetica Neue",Arial,system-ui,sans-serif',
+    body: '"Archivo","Helvetica Neue",Arial,system-ui,sans-serif',
+    mono: '"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace',
+    "text-display-xl": "clamp(4.2rem, 10.5vw, 9.5rem)",
+    "text-display-lg": "clamp(2.6rem, 5.5vw, 5.25rem)",
+    "measure-reading": "62ch",
     "measure-caption": "48ch",
     "grid-gutter": "clamp(1rem, 2.5vw, 2.5rem)",
     "section-space": "clamp(4rem, 9vw, 9rem)",
-    "editorial-gap": "clamp(1.25rem, 3vw, 3rem)",
+    "clarity-gap": "clamp(1.25rem, 3vw, 3rem)",
     "rule-hairline": "1px",
     "ease-liquid": "cubic-bezier(.22,1,.36,1)",
     "ease-liquid-over": "cubic-bezier(.34,1.4,.5,1)",
     "motion-fast": "160ms",
-    "motion": "340ms",
+    motion: "340ms",
     "motion-slow": "500ms",
   },
 };
@@ -263,8 +272,13 @@ const baseItem = {
   type: "registry:style",
   title: "Structured Liquidity",
   description:
-    "The Structured Liquidity design language base: Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks, with Semantic Clarity as the quality gate. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
-  dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-react"],
+    "The Structured Liquidity design language base: Structured Framing, Liquid Motion, and Scientific Clarity. Includes theme tokens, three distributable stylesheets, and the kit interaction script. Install this first — every component depends on it.",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "lucide-react",
+  ],
   registryDependencies: ["utils"],
   cssVars,
   files: baseFiles,
@@ -276,13 +290,19 @@ const agentItem = {
   type: "registry:item",
   title: "Structured Liquidity Agent Bundle",
   description:
-    "Install the Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks language plus its persistent local agent skill before the first UI edit.",
+    "Install the Structured Framing, Liquid Motion, and Scientific Clarity language plus its persistent local agent skill before the first UI edit.",
   registryDependencies: [itemUrl(BASE_NAME)],
   files: [
     {
       path: "registry/rules/structured-liquidity/SKILL.md",
       content: readFileSync(
-        join(REPO_ROOT, ".agents", "skills", "structured-liquidity", "SKILL.md"),
+        join(
+          REPO_ROOT,
+          ".agents",
+          "skills",
+          "structured-liquidity",
+          "SKILL.md",
+        ),
         "utf8",
       ),
       type: "registry:file",
@@ -296,13 +316,25 @@ const agentItem = {
 rmSync(OUT_DIR, { recursive: true, force: true });
 mkdirSync(OUT_DIR, { recursive: true });
 
-writeFileSync(join(OUT_DIR, `${BASE_NAME}.json`), JSON.stringify(baseItem, null, 2) + "\n");
-writeFileSync(join(OUT_DIR, `${agentItem.name}.json`), JSON.stringify(agentItem, null, 2) + "\n");
+writeFileSync(
+  join(OUT_DIR, `${BASE_NAME}.json`),
+  JSON.stringify(baseItem, null, 2) + "\n",
+);
+writeFileSync(
+  join(OUT_DIR, `${agentItem.name}.json`),
+  JSON.stringify(agentItem, null, 2) + "\n",
+);
 for (const { name, item } of uiItems) {
-  writeFileSync(join(OUT_DIR, `${name}.json`), JSON.stringify(item, null, 2) + "\n");
+  writeFileSync(
+    join(OUT_DIR, `${name}.json`),
+    JSON.stringify(item, null, 2) + "\n",
+  );
 }
 for (const { name, item } of templateItems) {
-  writeFileSync(join(OUT_DIR, `${name}.json`), JSON.stringify(item, null, 2) + "\n");
+  writeFileSync(
+    join(OUT_DIR, `${name}.json`),
+    JSON.stringify(item, null, 2) + "\n",
+  );
 }
 
 const registry = {
@@ -325,7 +357,10 @@ const registry = {
     ...items,
   ],
 };
-writeFileSync(join(WRITE_DIR, "registry.json"), JSON.stringify(registry, null, 2) + "\n");
+writeFileSync(
+  join(WRITE_DIR, "registry.json"),
+  JSON.stringify(registry, null, 2) + "\n",
+);
 
 console.log(
   `registry: wrote ${uiItems.length + templateItems.length + 2} items to public/r/ + public/registry.json (base ${BASE_URL})`,
diff --git a/artifacts/structured-liquidity/src/components/site/Adopt.tsx b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
index 5edcfd6..9131e7b 100644
--- a/artifacts/structured-liquidity/src/components/site/Adopt.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Adopt.tsx
@@ -18,25 +18,26 @@ npx shadcn@latest add https://structured.glass/r/structured-liquidity-agent.json
 Verify that the Structured Liquidity styles and .agents/skills/structured-liquidity/SKILL.md exist before continuing.
 Rules:
 - Square corners (border-radius: 0).
-- Flat offset shadows only: box-shadow: 7px 7px 0 0 #000, never blurred.
+- Flat offset shadows only: box-shadow: 5px 5px 0 0 #000, never blurred; reserve them for tactile affordances and intentional cutout layers.
 - Solid 2px black borders; the edge defines the object.
 - Exactly one accent (#a388ee) carries all emphasis.
-- Liquid glass = backdrop-filter blur over translucent white rgba(255,255,255,0.07).
-- Destructive surfaces are neutral gray (#3c3f4b), never red.
-- Type: Inter for headings/buttons/brand and body, Space Mono for labels and data.
+- Liquid glass = backdrop-filter blur over neutral translucent surfaces; use it to communicate state and depth, not as a default card treatment.
+- Destructive surfaces are neutral gray (#242424), never red.
+- Type: Archivo for headings/buttons/brand and body, IBM Plex Mono for labels and data.
+- Scientific Clarity: communicate meaning with a rational grid, exact alignment, measured line lengths, purposeful whitespace, evidence, and one dominant statement per view.
 - Leading icons (Lucide) on nav links and buttons.
 Use the tokens in design-tokens.json and the component markup in registry.json.
 Full spec: llms.txt.`;
 
 const ROOT_TOKENS = `:root{
   --accent:#a388ee; --accent-ink:#000000;
-  --bg:#272933; --bg-2:#1f2028; --ink:#e6e6e6; --ink-dim:#9da0ab;
-  --edge:0 0 0; --hard-shadow:#000000; --neg:#3c3f4b; --neg-ink:#f0f0f2;
-  --glass-blur:18px; --glass-tint:255 255 255; --glass-alpha:0.07;
-  --border-w:2px; --hard-x:7px; --hard-y:7px; --radius:0px;
-  --display:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --body:"Inter","Helvetica Neue",system-ui,sans-serif;
-  --mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;
+  --bg:#f2f0ea; --bg-2:#ffffff; --ink:#111111; --ink-dim:#5d5d59;
+  --edge:0 0 0; --hard-shadow:#000000; --neg:#242424; --neg-ink:#ffffff;
+  --glass-blur:14px; --glass-tint:255 255 255; --glass-alpha:0.72;
+  --border-w:2px; --hard-x:5px; --hard-y:5px; --radius:0px;
+  --display:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
+  --body:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
+  --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace;
 }`;
 
 function CopyButton({ text }: { text: string }) {
@@ -68,9 +69,9 @@ export function Adopt() {
         <span className="eyebrow">Agent-ready · adopt the language</span>
         <h2 className="section-title">Built to be read by machines.</h2>
         <p className="lead">
-          Give an agent one command before its first UI edit. It installs both the theme and a local
-          Structured Liquidity skill, so the rules stay in the project instead of being rediscovered
-          over several iterations.
+          Give an agent one command before its first UI edit. It installs both
+          the theme and a local Structured Liquidity skill, so the rules stay in
+          the project instead of being rediscovered over several iterations.
         </p>
       </div>
 
@@ -81,10 +82,16 @@ export function Adopt() {
             llms.txt
           </span>
           <p>
-            The AI-discoverable summary: the three pillars, the hard rules, the tokens, and the font
-            pairings, all in one Markdown file at the site root.
+            The AI-discoverable summary: the three pillars, the hard rules, the
+            tokens, and the font pairings, all in one Markdown file at the site
+            root.
           </p>
-          <a className="sl-btn default" href="llms.txt" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="llms.txt"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open llms.txt
           </a>
@@ -95,10 +102,15 @@ export function Adopt() {
             design-tokens.json
           </span>
           <p>
-            Every token in the W3C Design Tokens format, each carrying its exact CSS variable name.
-            Import it instead of guessing values.
+            Every token in the W3C Design Tokens format, each carrying its exact
+            CSS variable name. Import it instead of guessing values.
           </p>
-          <a className="sl-btn default" href="design-tokens.json" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="design-tokens.json"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open tokens
           </a>
@@ -109,11 +121,16 @@ export function Adopt() {
             registry.json
           </span>
           <p>
-            A shadcn-compatible registry: install the whole language or any single component with the
-            shadcn CLI — every item is a valid <code>registry-item</code> served at{" "}
-            <code>/r/*.json</code>.
+            A shadcn-compatible registry: install the whole language or any
+            single component with the shadcn CLI — every item is a valid{" "}
+            <code>registry-item</code> served at <code>/r/*.json</code>.
           </p>
-          <a className="sl-btn default" href="registry.json" target="_blank" rel="noopener">
+          <a
+            className="sl-btn default"
+            href="registry.json"
+            target="_blank"
+            rel="noopener"
+          >
             <ExternalLink />
             Open registry
           </a>
@@ -128,9 +145,10 @@ export function Adopt() {
             <CopyButton text={installCommand()} />
           </div>
           <p>
-            Run this first. It installs the full design language and writes the local agent skill
-            that tells future coding agents to use it. Individual components can then be added by
-            swapping the file name (for example, <code>/r/button.json</code>).
+            Run this first. It installs the full design language and writes the
+            local agent skill that tells future coding agents to use it.
+            Individual components can then be added by swapping the file name
+            (for example, <code>/r/button.json</code>).
           </p>
           <pre id="install-cmd" className="code-block">
             {installCommand()}
diff --git a/artifacts/structured-liquidity/src/components/site/FooterCta.tsx b/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
index 0edebf8..0331545 100644
--- a/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
+++ b/artifacts/structured-liquidity/src/components/site/FooterCta.tsx
@@ -8,7 +8,7 @@ export function FooterCta() {
     <section className="wrap">
       <div className="glass cta-panel reveal">
         <h2>
-          Build with <b>Structure</b>. Flow with <b>Liquidity</b>. Compose with <b>Intent</b>.
+          Frame with <b>Structure</b>. Move with <b>Liquidity</b>. Communicate with <b>Clarity</b>.
         </h2>
         <p className="lead" style={{ textAlign: "center" }}>
           Structured Liquidity is an open UI language: a complete kit of rigid containers and liquid
diff --git a/artifacts/structured-liquidity/src/components/site/Hero.tsx b/artifacts/structured-liquidity/src/components/site/Hero.tsx
index b03a515..becbcc2 100644
--- a/artifacts/structured-liquidity/src/components/site/Hero.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Hero.tsx
@@ -19,20 +19,23 @@ export function Hero() {
           </h1>
           <p className="lead reveal">
             <em>
-              Neobrutalist Structure. Liquid Glass Motion. Editorial Modern
-              Frameworks.
+              Structured framing. Liquid motion. Scientific clarity.
             </em>{" "}
-            Structured Liquidity is a trifecta: a physical frame with
-            load-bearing borders and hard shadows; layered glass and motion that
-            make state feel continuous and massive; and editorial systems that
-            compose hierarchy, diagrams, captions, labels, and evidence.
-            Semantic Clarity tests the complete system. This page is both
-            specimen and spec, so retheme it live as you read.
+            Framing organizes information. Motion makes the system's behavior
+            perceptible. Clarity communicates meaning through ordered,
+            unmistakable hierarchy. Three visible faces, one coherent
+            interface.
           </p>
           <div className="hero-tags reveal">
-            <span className="tag">Neobrutalist Structure</span>
-            <span className="tag">Liquid Glass Motion</span>
-            <span className="tag">Editorial Modern Frameworks</span>
+            <span className="tag">
+              <b>01</b> Structured Framing
+            </span>
+            <span className="tag">
+              <b>02</b> Liquid Motion
+            </span>
+            <span className="tag">
+              <b>03</b> Scientific Clarity
+            </span>
           </div>
           <div className="hero-cta reveal">
             <InstallButton />
@@ -54,7 +57,7 @@ export function Hero() {
         <div
           className="hero-cube-wrap"
           role="img"
-          aria-label="The Structured Liquidity trifecta shown on the cube's three visible faces: Neobrutalist Structure, Liquid Glass Motion, and Editorial Modern Frameworks."
+          aria-label="The Structured Liquidity trifecta shown on the cube's three visible faces: Structured Framing, Liquid Motion, and Scientific Clarity."
         >
           <Hypercube className="hero-cube" faceLabels={["01", "02", "03"]} />
         </div>
diff --git a/artifacts/structured-liquidity/src/components/site/Pillars.tsx b/artifacts/structured-liquidity/src/components/site/Pillars.tsx
index 26ff601..253f2d0 100644
--- a/artifacts/structured-liquidity/src/components/site/Pillars.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Pillars.tsx
@@ -3,25 +3,23 @@ export function Pillars() {
     <section id="manifesto" className="wrap">
       <div className="section-head reveal">
         <span className="eyebrow">Principles · the foundation</span>
-        <h2 className="section-title">
-          Three faces. One design language.
-        </h2>
+        <h2 className="section-title">Three faces. One design language.</h2>
         <p className="lead">
-          Neobrutalist Structure defines the physical frame. Liquid Glass Motion
-          makes state, continuity, and mass perceptible. Editorial Modern
-          Frameworks compose hierarchy and evidence. Together they form the
-          Structured Liquidity trifecta; Semantic Clarity tests the complete
-          system rather than competing as a fourth pillar.
+          Structured Framing organizes information. Liquid Motion makes the
+          system's behavior perceptible. Scientific Clarity communicates meaning
+          with disciplined hierarchy, evidence, and unmistakable legibility.
+          Together they form the three visible faces of Structured Liquidity.
         </p>
       </div>
 
       <div className="pillars">
-        <div className="glass pillar reveal">
+        <article className="pillar pillar-framing reveal">
           <span className="pnum">Pillar 01</span>
-          <h3>Neobrutalist Structure</h3>
+          <span className="psub">Frame · Affordance</span>
+          <h3>Structured Framing</h3>
           <p>
-            The physical frame: load-bearing borders, hard shadows, square
-            geometry, clear affordances, and tactile interaction.
+            Information organized through load-bearing borders, square geometry,
+            rational grids, clear affordances, and tactile interaction.
           </p>
           <ul>
             <li>
@@ -37,11 +35,12 @@ export function Pillars() {
               </div>
             </li>
           </ul>
-        </div>
+        </article>
 
-        <div className="glass pillar reveal">
+        <article className="pillar pillar-liquid reveal">
           <span className="pnum">Pillar 02</span>
-          <h3>Liquid Glass Motion</h3>
+          <span className="psub">State · Continuity</span>
+          <h3>Liquid Motion</h3>
           <p>
             Layered glass, continuity, and purposeful motion that communicate
             state and give interfaces believable mass.
@@ -62,15 +61,16 @@ export function Pillars() {
               </div>
             </li>
           </ul>
-        </div>
+        </article>
 
-        <div className="glass pillar reveal editorial-pillar">
+        <article className="pillar pillar-clarity reveal">
           <span className="pnum">Pillar 03</span>
-          <h3>Editorial Modern Frameworks</h3>
+          <span className="psub">Meaning · Legibility</span>
+          <h3>Scientific Clarity</h3>
           <p>
-            Hierarchy, refined grids, oversized typography, technical diagrams,
-            captions, labeling, and evidence, informed by editorial scientific
-            modernism.
+            Meaning communicated through disciplined hierarchy, measured
+            typography, captions, evidence, and purposeful whitespace. Swiss
+            modernism is the informing tradition.
           </p>
           <ul>
             <li>
@@ -83,19 +83,16 @@ export function Pillars() {
             </li>
             <li>
               <div>
-                <strong className="rule-h">Type and evidence agree</strong>:
-                display type creates hierarchy; mono captions label data,
-                sources, and state.
+                <strong className="rule-h">
+                  Every position is intentional
+                </strong>
+                : type, captions, data, and controls align to the same measured
+                grid.
               </div>
             </li>
           </ul>
-        </div>
+        </article>
       </div>
-      <p className="manifesto-gate reveal">
-        <strong>Quality gate · Semantic Clarity</strong>
-        Every screen must remain complete, legible, and useful without color,
-        glass, or motion.
-      </p>
     </section>
   );
 }
diff --git a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
index bee8563..fc9ca2f 100644
--- a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
+++ b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx
@@ -27,11 +27,11 @@ const DEFAULTS: Tweaks = {
   border: 2,
   shadow: 7,
   radius: 0,
-  mode: "dark",
+  mode: "light",
 };
 
 const ACCENTS = ["#a388ee", "#7c9cff", "#3dd7c8", "#ffb454", "#ff7a90"];
-const STORAGE_KEY = "sl-tweaks";
+const STORAGE_KEY = "sl-tweaks-v2";
 
 /* accent -> readable ink for text sitting on the accent fill */
 function inkFor(hex: string): string {
@@ -162,7 +162,9 @@ export function Tweaker() {
           onClick={() => set("mode", state.mode === "dark" ? "light" : "dark")}
         >
           {state.mode === "dark" ? <Moon /> : <Sun />}
-          <span className="sl-mode-lbl">{state.mode === "dark" ? "Dark" : "Light"}</span>
+          <span className="sl-mode-lbl">
+            {state.mode === "dark" ? "Dark" : "Light"}
+          </span>
         </button>
         <button
           type="button"
@@ -183,7 +185,12 @@ export function Tweaker() {
       >
         <div className="twk-hd">
           <b>Mods</b>
-          <button type="button" className="twk-x" aria-label="Close" onClick={() => setOpen(false)}>
+          <button
+            type="button"
+            className="twk-x"
+            aria-label="Close"
+            onClick={() => setOpen(false)}
+          >
             ✕
           </button>
         </div>
diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
index b7ee7d0..ea1e70e 100644
--- a/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
+++ b/artifacts/structured-liquidity/src/components/site/kit/KitContentData.tsx
@@ -73,7 +73,9 @@ export function KitContentData() {
           <Empty>
             <EmptyIcon>♪</EmptyIcon>
             <EmptyTitle>No tracks yet</EmptyTitle>
-            <EmptyDescription>Import audio to start a library.</EmptyDescription>
+            <EmptyDescription>
+              Import audio to start a library.
+            </EmptyDescription>
             <Button size="sm">Import</Button>
           </Empty>
         </div>
@@ -86,20 +88,20 @@ export function KitContentData() {
               <FontPairFonts>
                 <FontSpecimen role="header">
                   <FontRole>Header</FontRole>
-                  <FontName className="ff-inter">Inter</FontName>
+                  <FontName className="ff-archivo">Archivo</FontName>
                 </FontSpecimen>
                 <FontSpecimen role="body">
                   <FontRole>Body</FontRole>
-                  <FontName className="ff-inter">Inter</FontName>
+                  <FontName className="ff-archivo">Archivo</FontName>
                 </FontSpecimen>
                 <FontSpecimen role="detail">
                   <FontRole>Detail</FontRole>
-                  <FontName className="ff-spacemono">Space Mono</FontName>
+                  <FontName className="ff-plexmono">IBM Plex Mono</FontName>
                 </FontSpecimen>
               </FontPairFonts>
               <FontPairNote>
-                One disciplined sans across hierarchy and reading, with technical mono reserved
-                for labels, data, and code.
+                A measured grotesk carries hierarchy and reading; a precise mono
+                is reserved for labels, evidence, data, and code.
               </FontPairNote>
             </FontPair>
           </FontPairings>
@@ -144,8 +146,8 @@ export function KitContentData() {
           <Typography>
             <TypographyTitle>Structure holds it.</TypographyTitle>
             <TypographyParagraph>
-              Heavy grotesk for impact, monospace for labels, and a measured
-              body that stays legible through the glass. Inline{" "}
+              Calibrated grotesk hierarchy, monospace evidence labels, and a
+              measured body that stays legible through every layer. Inline{" "}
               <TypographyCode>--accent</TypographyCode> tokens carry the system.
             </TypographyParagraph>
             <TypographyQuote>
diff --git a/artifacts/structured-liquidity/src/styles/10-tokens-base.css b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
index 86db3e6..b6666e9 100644
--- a/artifacts/structured-liquidity/src/styles/10-tokens-base.css
+++ b/artifacts/structured-liquidity/src/styles/10-tokens-base.css
@@ -1,72 +1,89 @@
 /* ============================================================
-   STRUCTURED LIQUIDITY — Neobrutalist Structure. Liquid Glass
-   Motion. Editorial Modern Frameworks. Semantic Clarity remains the quality
-   gate across all three, not a fourth pillar. This stylesheet IS
+   STRUCTURED LIQUIDITY — Structured framing. Liquid motion.
+   Scientific clarity. This stylesheet IS
    the specimen.
    ============================================================ */
 
 :root {
   /* ---- tunable knobs (driven by Tweaks) ---- */
-  --accent: #a388ee;          /* neobrutalism.dev purple */
-  --accent-ink: #000000;      /* text that sits on accent */
-  --glass-blur: 18px;
-  --glass-tint: 255 255 255;  /* rgb channels for glass fill */
-  --glass-alpha: 0.07;
+  --accent: #a388ee; /* neobrutalism.dev purple */
+  --accent-ink: #000000; /* text that sits on accent */
+  --glass-blur: 14px;
+  --glass-tint: 255 255 255; /* rgb channels for glass fill */
+  --glass-alpha: 0.72;
   --border-w: 2px;
-  --hard-x: 7px;
-  --hard-y: 7px;
+  --hard-x: 5px;
+  --hard-y: 5px;
   --radius: 0px;
   --shell-w: 1280px;
   --content-w: var(--shell-w);
   --viewport-gutter: 4vw;
-  --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
+  --body-surface: var(--bg);
   --floating-ui-clearance: 96px;
 
-  /* ---- Editorial Modern Frameworks, informed by editorial scientific modernism ---- */
-  --text-display-xl: clamp(4.5rem, 10vw, 9rem);
-  --text-display-lg: clamp(2.8rem, 6vw, 5.5rem);
-  --measure-reading: 68ch;
+  /* ---- Scientific Clarity, informed by Swiss modernism and the International Typographic Style ---- */
+  --text-display-xl: clamp(4.2rem, 10.5vw, 9.5rem);
+  --text-display-lg: clamp(2.6rem, 5.5vw, 5.25rem);
+  --measure-reading: 62ch;
   --measure-caption: 48ch;
   --grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
   --section-space: clamp(4rem, 9vw, 9rem);
-  --editorial-gap: clamp(1.25rem, 3vw, 3rem);
+  --clarity-gap: clamp(1.25rem, 3vw, 3rem);
   --rule-hairline: 1px;
   --diagram-line: color-mix(in srgb, var(--ink) 72%, transparent);
   --diagram-muted: color-mix(in srgb, var(--ink) 42%, transparent);
 
-  /* ---- fixed palette (neobrutalism.dev) ---- */
-  --bg: #272933;
-  --bg-2: #1f2028;
-  --ink: #e6e6e6;             /* foreground */
-  --ink-dim: #9da0ab;
-  --edge: 0 0 0;              /* neobrutalism black border (rgb) */
+  /* ---- light-first paper palette ---- */
+  --bg: #f2f0ea;
+  --bg-2: #ffffff;
+  --ink: #111111; /* foreground */
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0; /* neobrutalism black border (rgb) */
   --hard-shadow: #000000;
-  --neg: #3c3f4b;             /* negative / destructive surface (gray, never red) */
-  --neg-ink: #f0f0f2;
+  --neg: #242424; /* negative / destructive surface (gray, never red) */
+  --neg-ink: #ffffff;
 
-  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --body: "Inter", "Helvetica Neue", system-ui, sans-serif;
-  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
+  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
 }
 
 /* tighter rhythm — denser, less airy */
 
 [data-mode="light"] {
-  --bg: #dfe5f2;
+  --bg: #f2f0ea;
   --bg-2: #ffffff;
-  --ink: #000000;
-  --ink-dim: #5b5f6b;
+  --ink: #111111;
+  --ink-dim: #5d5d59;
+  --edge: 0 0 0;
+  --hard-shadow: #000000;
+  --neg: #16171c; /* near-black negative surface in light mode */
+  --neg-ink: #ffffff;
+  --glass-tint: 255 255 255;
+  --glass-alpha: 0.72;
+}
+
+[data-mode="dark"] {
+  --bg: #171717;
+  --bg-2: #0f0f0f;
+  --ink: #f3f1eb;
+  --ink-dim: #aaa9a4;
   --edge: 0 0 0;
   --hard-shadow: #000000;
-  --neg: #16171c;             /* near-black negative surface in light mode */
+  --neg: #343434;
   --neg-ink: #ffffff;
   --glass-tint: 255 255 255;
-  --glass-alpha: 0.55;
+  --glass-alpha: 0.08;
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
-html { scroll-behavior: auto; background: var(--bg); }
+html {
+  scroll-behavior: auto;
+  background: var(--bg);
+}
 
 body {
   margin: 0;
@@ -80,7 +97,10 @@ body {
   overflow-x: hidden;
 }
 
-::selection { background: var(--accent); color: var(--accent-ink); }
+::selection {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
 
 /* ============================================================
    BACKDROP — a full-document-height iridescent field the glass
@@ -91,29 +111,47 @@ body {
 
 .field {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
   background:
-    radial-gradient(52vw 32vh at 12% 2%,  rgba(124, 60, 255, 0.50), transparent 70%),
-    radial-gradient(46vw 30vh at 90% 10%, rgba(176, 60, 255, 0.42), transparent 70%),
-    radial-gradient(52vw 30vh at 78% 30%, rgba(214, 70, 255, 0.30), transparent 72%),
-    radial-gradient(46vw 28vh at 16% 45%, rgba(91, 60, 255, 0.38), transparent 72%),
-    radial-gradient(50vw 28vh at 84% 60%, rgba(124, 60, 255, 0.34), transparent 72%),
-    radial-gradient(46vw 26vh at 22% 74%, rgba(176, 60, 255, 0.30), transparent 72%),
-    radial-gradient(52vw 30vh at 80% 90%, rgba(214, 70, 255, 0.26), transparent 72%),
-    radial-gradient(46vw 26vh at 18% 98%, rgba(91, 60, 255, 0.34), transparent 72%);
+    radial-gradient(
+      36vw 26vw at 86% 4%,
+      color-mix(in srgb, var(--accent) 18%, transparent),
+      transparent 72%
+    ),
+    radial-gradient(
+      30vw 24vw at 12% 42%,
+      color-mix(in srgb, var(--accent) 10%, transparent),
+      transparent 74%
+    ),
+    linear-gradient(var(--bg), var(--bg));
   background-repeat: no-repeat;
-  animation: fieldshift 30s ease-in-out infinite alternate;
+  animation: fieldshift 34s ease-in-out infinite alternate;
+}
+[data-mode="light"] .field {
+  opacity: 1;
+}
+[data-mode="dark"] .field {
+  opacity: 0.72;
 }
-[data-mode="light"] .field { opacity: 0.55; }
 @keyframes fieldshift {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-3vw); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-3vw);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .field {
+    animation: none;
+  }
 }
-@media (prefers-reduced-motion: reduce) { .field { animation: none; } }
 
 .field .grid {
   position: absolute;
@@ -122,17 +160,31 @@ body {
     linear-gradient(rgba(var(--edge), 0.045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(var(--edge), 0.045) 1px, transparent 1px);
   background-size: 64px 64px;
-  mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
-  -webkit-mask-image: linear-gradient(180deg, #000, #000 40%, rgba(0,0,0,0.25) 75%, transparent);
+  mask-image: linear-gradient(
+    180deg,
+    #000,
+    #000 40%,
+    rgba(0, 0, 0, 0.25) 75%,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    #000,
+    #000 40%,
+    rgba(0, 0, 0, 0.25) 75%,
+    transparent
+  );
 }
 
 .grain {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.4;
+  opacity: 0.08;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@@ -143,17 +195,16 @@ body {
 
 .glass {
   position: relative;
-  background:
-    linear-gradient(135deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)), rgba(var(--glass-tint), var(--glass-alpha)));
+  background: linear-gradient(
+    135deg,
+    rgba(var(--glass-tint), calc(var(--glass-alpha) + 0.06)),
+    rgba(var(--glass-tint), var(--glass-alpha))
+  );
   backdrop-filter: blur(var(--glass-blur)) saturate(180%);
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
-  box-shadow:
-    var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow),         /* the brutal hard shadow */
-    inset 0 1px 0 rgba(255,255,255,0.45),                        /* top specular */
-    inset 0 -1px 0 rgba(255,255,255,0.06),
-    inset 0 0 40px rgba(255,255,255,0.04);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 /* moving sheen + cursor specular */
 .glass::before {
@@ -164,24 +215,34 @@ body {
   pointer-events: none;
   background: radial-gradient(
     180px circle at var(--mx, 50%) var(--my, 0%),
-    rgba(255,255,255,0.22), transparent 60%);
+    rgba(255, 255, 255, 0.22),
+    transparent 60%
+  );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.glass:hover::before { opacity: 1; }
+.glass:hover::before {
+  opacity: 1;
+}
 .glass::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 55%);
+  background: linear-gradient(
+    115deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.1) 45%,
+    transparent 55%
+  );
   background-size: 250% 250%;
   background-position: 100% 100%;
   opacity: 0.7;
 }
 
-.flat {            /* brutalist flat (no glass) — for loud accent blocks */
+.flat {
+  /* brutalist flat (no glass) — for loud accent blocks */
   border: var(--border-w) solid rgb(var(--edge));
   border-radius: var(--radius);
   box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow);
@@ -203,46 +264,123 @@ body {
 }
 .eyebrow::before {
   content: "";
-  width: 9px; height: 9px;
+  width: 9px;
+  height: 9px;
   background: var(--accent);
   display: inline-block;
 }
 
-h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
+h1,
+h2,
+h3 {
+  font-weight: 800;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-wrap: balance;
+}
 
 .section-title {
-  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
+  font-size: clamp(2rem, 4.2vw, 4.25rem);
+  line-height: 0.93;
+  letter-spacing: -0.045em;
   margin: 0.25em 0 0.3em;
 }
-.lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }
+.lead {
+  font-size: clamp(1rem, 1.3vw, 1.18rem);
+  color: var(--ink-dim);
+  max-width: 60ch;
+  text-wrap: pretty;
+}
 
-.accent { color: var(--accent); }
-.mono { font-family: var(--mono); }
+.accent {
+  color: var(--accent);
+}
+.mono {
+  font-family: var(--mono);
+}
 
 /* ============================================================
    LAYOUT
    ============================================================ */
 
 .wrap,
-.shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }
+.shell {
+  width: min(var(--shell-w), calc(100vw - var(--viewport-gutter)));
+  margin-inline: auto;
+}
 .sl-site-content,
 .sl-site-shell {
   width: min(100%, var(--shell-w));
   max-width: calc(100vw - var(--viewport-gutter));
   margin-inline: auto;
 }
-.sl-site-body { background: var(--body-surface); }
-section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; }
-.section-head { max-width: 70ch; margin-bottom: 1.1rem; }
+.sl-site-body {
+  background: var(--body-surface);
+}
+section {
+  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
+  position: relative;
+  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.section-head {
+  display: grid;
+  grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr);
+  column-gap: var(--grid-gutter);
+  max-width: none;
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+.section-head .eyebrow {
+  grid-column: 1;
+  align-self: start;
+}
+.section-head .section-title,
+.section-head .lead {
+  grid-column: 2;
+}
+.section-head .lead {
+  margin-top: 1rem;
+}
+@media (max-width: 720px) {
+  .section-head {
+    grid-template-columns: 1fr;
+  }
+  .section-head .eyebrow,
+  .section-head .section-title,
+  .section-head .lead {
+    grid-column: 1;
+  }
+  .section-head .section-title {
+    margin-top: 1.25rem;
+  }
+}
 
-.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
-.reveal.in { opacity: 1; transform: none; }
+.reveal {
+  opacity: 0;
+  transform: translateY(26px);
+  transition:
+    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.reveal.in {
+  opacity: 1;
+  transform: none;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-  html { scroll-behavior: auto; }
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 @media print {
-  .reveal { opacity: 1 !important; transform: none !important; }
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
 }
diff --git a/artifacts/structured-liquidity/src/styles/40-inline.css b/artifacts/structured-liquidity/src/styles/40-inline.css
index 1e934ff..961a87b 100644
--- a/artifacts/structured-liquidity/src/styles/40-inline.css
+++ b/artifacts/structured-liquidity/src/styles/40-inline.css
@@ -188,14 +188,6 @@
   /* larger, more legible bullet copy (was 0.76rem dim mono) */
   .pillar li{font-size:0.9rem;line-height:1.55;color:color-mix(in srgb, var(--ink) 55%, var(--ink-dim));}
 
-  /* Editorial Modern Frameworks, informed by editorial scientific modernism: evidence-first hierarchy and technical figures. */
-  .manifesto-gate{display:grid;grid-template-columns:minmax(190px,.55fr) 1fr;gap:var(--editorial-gap);
-    margin:1.35rem 0 0;padding:1rem 1.1rem;border-top:var(--border-w) solid rgb(var(--edge));
-    border-bottom:var(--rule-hairline) solid var(--diagram-muted);font-size:.9rem;color:var(--ink-dim);}
-  .manifesto-gate strong{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
-    text-transform:uppercase;color:var(--ink);}
-  @media(max-width:700px){.manifesto-gate{grid-template-columns:1fr;gap:.55rem;}}
-
   /* section eyebrow labels: larger, tighter tracking, higher contrast (was 0.72rem, 0.22em, dim) */
   .eyebrow{font-size:0.84rem;letter-spacing:0.15em;color:color-mix(in srgb, var(--ink) 78%, var(--ink-dim));}
 
@@ -1058,3 +1050,373 @@
     text-transform:uppercase;letter-spacing:.06em;font-size:11px;box-shadow:2px 2px 0 0 var(--hard-shadow);
     transition:transform .12s,box-shadow .12s}
   .twk-reset:hover{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--hard-shadow)}
+  /* ============================================================
+     SCIENTIFIC CLARITY — legibility-first specimen composition
+     Swiss modernism and International Typographic Style discipline set the page grid,
+     measure, alignment, and hierarchy. Neobrutalist shadows are
+     reserved for tactile controls; liquid glass is reserved for state.
+     ============================================================ */
+body {
+  font-family: var(--body);
+  font-weight: 430;
+  letter-spacing: -0.008em;
+}
+.wrap,
+.shell,
+.nav {
+  width: min(var(--shell-w), calc(100vw - max(2rem, var(--viewport-gutter))));
+}
+
+.nav {
+  top: 0;
+  padding: 0.7rem 0;
+  border-width: 0 0 1px;
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  box-shadow: none;
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+}
+.nav .brand .name {
+  font-size: 0.92rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+.nav .brand .glyph {
+  --s: 38px;
+}
+.nav .links {
+  gap: 0.45rem;
+}
+.nav .links .nav-cta {
+  padding: 0.58rem 0.82rem;
+  font-size: 0.74rem;
+  font-weight: 650;
+  box-shadow: 3px 3px 0 var(--hard-shadow);
+}
+.nav .links .nav-cta.glassy {
+  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
+}
+
+.hero {
+  min-height: min(860px, 92vh);
+  padding-top: clamp(8rem, 15vh, 11rem);
+  padding-bottom: clamp(5rem, 10vh, 8rem);
+  border-top: 0;
+}
+.hero-grid {
+  max-width: none;
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
+  gap: var(--grid-gutter);
+  align-items: center;
+}
+.hero-grid > div:first-child {
+  max-width: 780px;
+}
+.wordmark {
+  font-size: var(--text-display-xl);
+  font-weight: 760;
+  line-height: 0.78;
+  letter-spacing: -0.075em;
+  margin: 0.25em 0 0.38em;
+}
+.wordmark .brutal {
+  color: var(--ink);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
+}
+.wordmark .glas {
+  letter-spacing: -0.06em;
+}
+.liquid-svg {
+  filter: drop-shadow(3px 3px 0 rgb(var(--edge) / 0.24));
+}
+.hero .lead {
+  max-width: 58ch;
+  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
+  line-height: 1.55;
+  color: var(--ink);
+}
+.hero .lead em {
+  display: block;
+  margin-bottom: 0.65rem;
+  font-style: normal;
+  font-weight: 680;
+  letter-spacing: -0.025em;
+}
+.hero-tags {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  margin: 2rem 0 2.3rem;
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+}
+.hero-tags .tag {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 0.8rem 0.85rem;
+  border: 0;
+  border-right: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
+  font-size: 0.64rem;
+  line-height: 1.25;
+  letter-spacing: 0.08em;
+  color: var(--ink);
+}
+.hero-tags .tag:last-child {
+  border-right: 0;
+}
+.hero-tags .tag b {
+  color: var(--accent);
+  font-size: 0.68rem;
+}
+.hero-cube-wrap {
+  position: relative;
+  top: auto;
+  right: auto;
+  transform: none;
+  justify-self: end;
+}
+.hero-cube {
+  --s: clamp(270px, 31vw, 450px);
+  opacity: 0.9;
+}
+.hero-cube.is-cube .lw-cube-innerglass {
+  fill: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.hero-cube.is-cube .lw-cube-shell {
+  stroke-width: 1.35;
+}
+.hero-cube.is-cube .lw-cube-edge {
+  stroke-width: 0.8;
+}
+
+.pillars {
+  gap: 0;
+  border-top: var(--border-w) solid rgb(var(--edge));
+  border-bottom: var(--border-w) solid rgb(var(--edge));
+}
+.pillar {
+  min-height: 430px;
+  padding: 1.35rem 1.45rem 1.6rem;
+  border-right: 1px solid rgb(var(--edge));
+  background: transparent;
+}
+.pillar:last-child {
+  border-right: 0;
+}
+.pillar .pnum {
+  font-size: 0.66rem;
+  color: var(--accent);
+}
+.pillar .psub {
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+}
+.pillar h3 {
+  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
+  line-height: 0.94;
+  letter-spacing: -0.045em;
+  margin: 2.3rem 0 0.8rem;
+}
+.pillar > p {
+  font-size: 0.94rem;
+  line-height: 1.55;
+  max-width: 34ch;
+}
+.pillar ul {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+.pillar li {
+  font-family: var(--body);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  padding: 0.7rem 0;
+}
+.pillar li::before {
+  width: 6px;
+  height: 6px;
+  margin-top: 0.48em;
+}
+.pillar-framing {
+  background: var(--bg-2);
+  box-shadow: 4px 4px 0 var(--hard-shadow);
+  z-index: 2;
+  transform: translate(-4px, -4px);
+}
+.pillar-liquid {
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--accent) 13%, transparent),
+    rgb(var(--glass-tint) / var(--glass-alpha)) 60%
+  );
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+}
+.pillar-clarity {
+  background: transparent;
+}
+#components .kit-filterbars {
+  border-top: 1px solid var(--ink);
+  padding-top: 1rem;
+}
+#components .kit-grid.gallery {
+  column-gap: 1px;
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+#components .kit-grid.gallery .kit-cell {
+  margin: 0 0 1px;
+  padding: 1.35rem 1.4rem;
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: none;
+}
+#components .kit-cap {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+}
+.kit-filter {
+  box-shadow: none;
+  background: transparent;
+  border-width: 1px;
+}
+.kit-filter:hover {
+  transform: none;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.kit-filter.active {
+  border-color: rgb(var(--edge));
+}
+
+.show-grid {
+  gap: 1px;
+  background: color-mix(in srgb, var(--ink) 24%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+}
+.show-card {
+  max-width: none;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.show-card-foot {
+  border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+}
+.show-card:hover,
+.show-card:focus-visible {
+  transform: none;
+}
+.show-card:hover .show-card-shot img,
+.show-card:focus-visible .show-card-shot img {
+  transform: scale(1.015);
+}
+
+.adopt-gallery {
+  column-gap: 1px !important;
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+}
+.adopt-gallery .kit-cell {
+  margin: 0 0 1px !important;
+  border: 0;
+  box-shadow: none;
+  background: var(--bg-2);
+}
+.cta-panel {
+  padding: clamp(3rem, 7vw, 6rem);
+  text-align: left;
+  align-items: flex-start;
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
+  box-shadow: none;
+}
+.cta-panel h2 {
+  max-width: 18ch;
+  font-size: clamp(2.6rem, 6vw, 6.2rem);
+  line-height: 0.9;
+  letter-spacing: -0.06em;
+}
+.cta-panel p {
+  max-width: 60ch;
+}
+.foot {
+  border-top: 1px solid var(--ink);
+}
+
+[data-mode="dark"] .nav {
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
+}
+[data-mode="dark"] .pillar-framing,
+[data-mode="dark"] #components .kit-grid.gallery .kit-cell,
+[data-mode="dark"] .show-card,
+[data-mode="dark"] .adopt-gallery .kit-cell {
+  background: #202020;
+}
+[data-mode="dark"] .field .grid {
+  opacity: 0.45;
+}
+
+@media (max-width: 900px) {
+  .hero {
+    min-height: auto;
+  }
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero-cube-wrap {
+    position: absolute;
+    right: -6rem;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.28;
+  }
+  .hero-grid > div:first-child {
+    max-width: 720px;
+    z-index: 1;
+  }
+}
+@media (max-width: 700px) {
+  .hero {
+    padding-top: 7rem;
+  }
+  .wordmark {
+    font-size: clamp(3.4rem, 18vw, 6rem);
+  }
+  .hero-tags {
+    grid-template-columns: 1fr;
+  }
+  .hero-tags .tag {
+    border-right: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
+  }
+  .hero-tags .tag:last-child {
+    border-bottom: 0;
+  }
+  .pillars {
+    grid-template-columns: 1fr;
+  }
+  .pillar {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgb(var(--edge));
+  }
+  .pillar:last-child {
+    border-bottom: 0;
+  }
+  .pillar ul {
+    margin-top: 2rem;
+    padding-top: 0;
+  }
+  .pillar-framing {
+    transform: none;
+  }
+  .cta-panel {
+    text-align: left;
+  }
+}
diff --git a/docs/component-audit-2026-08.md b/docs/component-audit-2026-08.md
index 71c3987..eba53c0 100644
--- a/docs/component-audit-2026-08.md
+++ b/docs/component-audit-2026-08.md
@@ -10,7 +10,7 @@ The Structured Liquidity registry was compared with the active Interspace, Obser
 | File intake and evidence upload        | Universe song and lyric upload; Observatory attachments; Exobase media forms                         | `dropzone`         |
 | Plans, packages, and subscriptions     | Interspace advisory packages; Exobase pricing display; Universe Pro and top-up cards                 | `pricing-card`     |
 
-Each addition keeps the language constraints: square containers, load-bearing black borders, neutral glass, flat zero-blur shadows, one accent, Inter for headings and body, and Space Mono for metadata.
+Each addition keeps the language constraints: square containers, load-bearing black borders, neutral glass, selective flat zero-blur shadows, one accent, Archivo for headings and body, and IBM Plex Mono for metadata.
 
 ## Covered by existing components
 
diff --git a/docs/design-ethos-v2.md b/docs/design-ethos-v2.md
index 6528df4..7ae454b 100644
--- a/docs/design-ethos-v2.md
+++ b/docs/design-ethos-v2.md
@@ -2,36 +2,36 @@
 
 ## The operating model
 
-**Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.**
+**Structured framing. Liquid motion. Scientific clarity.**
 
 Structured Liquidity is a trifecta of three orthogonal design dimensions, represented by the three visible faces of its cube:
 
-1. **Neobrutalist Structure:** The physical frame—load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction.
-2. **Liquid Glass Motion:** Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass.
-3. **Editorial Modern Frameworks:** Hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence, informed by editorial scientific modernism.
+1. **Structured Framing:** How information is organized—load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows.
+2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible.
+3. **Scientific Clarity:** How meaning is communicated—disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. It is informed by Swiss modernism and the International Typographic Style, whose purpose is to make information legible, ordered, and unmistakable.
 
-Semantic Clarity remains the quality gate across all three, not a fourth pillar: every screen must remain complete, legible, and useful without color, glass, or motion.
+Scientific Clarity includes the system's quality test: every screen remains complete, legible, and useful without color, glass, or motion.
 
 ## Decision ownership
 
-| Question                                            | Owner                 |
-| --------------------------------------------------- | --------------------- |
-| What contains this information?                     | Neobrutalist Structure       |
-| How does state change or mass become perceptible?   | Liquid Glass Motion          |
-| How is the information composed and evidenced?      | Editorial Modern Frameworks  |
-| Is the result understandable in its simplest state? | Semantic Clarity gate        |
+| Question                                                 | Owner                  |
+| -------------------------------------------------------- | ---------------------- |
+| How is the information organized?                        | Structured Framing |
+| How does the system behave?                              | Liquid Motion      |
+| How is meaning communicated?                             | Scientific Clarity |
 
 ## Expression rules
 
 - Use one accent for selection, progression, or a single key relationship. Monochrome does the explanatory work.
-- Establish one dominant typographic statement per view, then use a restrained body measure and mono evidence labels.
+- Establish one dominant typographic statement per view, then use a restrained body measure, exact baselines, and mono evidence labels.
 - Treat diagrams as explanatory figures: label them, number them when useful, and provide a caption or source state.
-- Let borders, alignment, and hierarchy convey structure before adding glass.
+- Let the grid, alignment, and hierarchy convey order before adding borders or glass.
+- Reserve hard shadows for tactile affordances and deliberately layered cutout surfaces; not every container needs one.
 - Keep the rigid frame still. Motion happens within it to explain state, continuity, or spatial relationship.
 - A reduced-motion or static rendering is a complete rendering, not a degraded fallback.
 
 ## Short language
 
-Primary phrase: **Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.**
+Primary phrase: **Structured framing. Liquid motion. Scientific clarity.**
 
 Manifesto phrase: **Three faces. One design language.**
diff --git a/replit.md b/replit.md
index 1acdddb..ccd1ae7 100644
--- a/replit.md
+++ b/replit.md
@@ -1,6 +1,6 @@
 # Structured Liquidity
 
-A live, deployable specimen + landing page for **Structured Liquidity** — **Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks.** Neobrutalist Structure is the physical frame: load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction. Liquid Glass Motion is layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass. Editorial Modern Frameworks compose hierarchy, refined grids, oversized typography, technical diagrams, captions, labeling, and evidence; they are informed by editorial scientific modernism. Together they form the Structured Liquidity trifecta, represented by the cube's three visible faces. Semantic Clarity remains the quality gate across all three, not a fourth pillar. The page is both the specimen and the documentation of the language, with a live in-page theme tweaker, and it **dogfoods its own React components**. It also publishes those components as a **shadcn-installable registry** at `/r/*.json`. Structured Liquidity is an Interspace Venture (est. 2026); the source is on GitHub at https://github.com/heyinterspace/Structured.
+A live, deployable specimen + landing page for **Structured Liquidity** — **Structured framing. Liquid motion. Scientific clarity.** Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, and selective flat shadows. Liquid Motion makes system behavior perceptible through neutral translucency, continuity, and purposeful motion. Scientific Clarity communicates meaning through disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable. Scientific Clarity includes the quality test that every screen remains complete and useful without color, glass, or motion. The three pillars form the Structured Liquidity trifecta, represented by the cube's three visible faces. The page is both the specimen and the documentation of the language, with a live in-page theme tweaker, and it **dogfoods its own React components**. It also publishes those components as a **shadcn-installable registry** at `/r/*.json`. Structured Liquidity is an Interspace Venture (est. 2026); the source is on GitHub at https://github.com/heyinterspace/Structured.
 
 ## Run & Operate
 
@@ -59,7 +59,7 @@ Cross-item URLs use `REGISTRY_BASE_URL` (default `https://structured.glass`). Th
 
 ## Product
 
-A single-page specimen + reference for the Structured Liquidity design language: it explains the trifecta in order—Neobrutalist Structure as frame, Liquid Glass Motion as state, Editorial Modern Frameworks as composition—demonstrates a full component kit, lets visitors retheme it live, and lets them install it via shadcn. The cube's three visible faces represent the trifecta. Semantic Clarity tests the complete system and is not a fourth pillar.
+A single-page specimen + reference for the Structured Liquidity design language: it explains the trifecta in order—Structured Framing as organization, Liquid Motion as behavior, Scientific Clarity as communication—demonstrates a full component kit, lets visitors retheme it live, and lets them install it via shadcn. The cube's three visible faces represent the trifecta. Scientific Clarity includes the test that the complete system remains legible without effects.
 
 ## Design language tokens (the knobs the page reads)
 
@@ -68,10 +68,10 @@ Defined in `src/styles/10-tokens-base.css` / `public/structured-liquidity.css` `
 - `--accent` (default `#a388ee`) + `--accent-ink` (luminance-derived black/white)
 - `--glass-blur` (18px), `--glass-tint` (rgb), `--glass-alpha`
 - `--border-w` (2px), `--hard-x`/`--hard-y` (7px, flat offset shadow), `--radius` (0px)
-- `--display` (Archivo, headings/buttons/brand — controlled by the live tweaker), `--mono` (Space Mono), `--body` (Outfit)
+- `--display` and `--body` (Archivo), `--mono` (IBM Plex Mono)
 - `data-mode` attribute on `<html>`: `dark` | `light`
 - Tweaker ranges: blur 0–40, radius 0–40, border 0–5, shadow 0–16; accents `#a388ee #7c9cff #3dd7c8 #ffb454 #ff7a90`; fonts Archivo / Space Grotesk / Syne
-- **Font pairings** (Header · Body · Detail): `Archivo · Outfit · Space Mono` (Canonical, default), `Syne · Inter · IBM Plex Mono` (Editorial), `Bricolage Grotesque · Plus Jakarta Sans · JetBrains Mono` (Modern). Never two header faces; never body copy in the header face; detail mono only for labels/data/code.
+- **Canonical font roles** (Header · Body · Detail): `Archivo · Archivo · IBM Plex Mono`. Use a single disciplined grotesk across hierarchy and reading; reserve mono for labels, evidence, data, and code.
 
 ## User preferences