IV-107 Reframe Structured Liquidity around Scientific Clarity

.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

.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.
 

.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);