IV-110 Release: Scientific Modernism and three-tenet design contract

.agents/memory/structured-liquidity-motion.md

@@ -5,11 +5,11 @@ description: How the tactile "liquid glass" interaction motion is built on the S
 
 # Liquid motion layer
 
-Tactile interaction motion (press ripples, liquid toggles/switch sheen, flowing tab marker, settling menus/dialogs/accordion, hover refraction) lives entirely in `index.html`'s inline `<style>` (gated under `@media (prefers-reduced-motion: no-preference)`) + three `mount*()` fns in `src/main.ts` (`mountRipples`, `mountTabFlow`, `mountRefraction`, each early-returns under `prefers-reduced-motion: reduce`). The verbatim `public/*` stays untouched — see the verbatim-public rule in `structured-liquidity.md`.
+Tactile interaction motion includes press feedback, flowing navbar/tab/filter markers, scroll continuity, settling menus/dialogs/accordions, and stateful toggles. Flat information surfaces do not refract on hover. Motion styles live in the layered source stylesheets and React/behavior hooks, with complete reduced-motion fallbacks; regenerate the distributable `public/*` files and registry after changes.
 
 ## 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 "Liquid Glass" both break "structured containment"; the frame must stay firm or the language loses its identity.
+**Why:** generic bouncy UI or Apple's blurry-blob treatment both break Neobrutalism; 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/skills/structured-liquidity/SKILL.md

@@ -1,50 +1,80 @@
 ---
 name: structured-liquidity
-description: Apply the Structured Liquidity UI design language — rigid containers (sharp 90° corners, flat blurless offset shadows, solid load-bearing borders) holding semi-transparent liquid glass, with one accent and strict type roles. 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 — Neobrutalist structure, Liquid Motion, and Scientific Modern 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
 
-An open UI design language: **rigid containment** + **liquid depth** + **semantic clarity**. The living specimen, the machine-readable token set, and the component registry are served by the `structured-liquidity` artifact. This skill is the short version an agent needs to produce on-brand output.
+**Neobrutalist structure. Liquid motion. Scientific modern clarity.**
+
+1. **Neobrutalist structure:** How the interface is physically framed—buttons, borders, navigation, footers, body containers, panels, square geometry, and selective flat shadows. It makes boundaries and actions tangible before effects are added.
+2. **Liquid Motion:** How the system behaves—continuity, layered neutral glass, and purposeful motion that make state and believable mass perceptible without becoming the only carrier of meaning. Every interaction has a complete reduced-motion state.
+3. **Scientific Modern Clarity:** How information is organized and meaning is communicated—rational grids, 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. Every screen remains complete and useful without relying on color, glass, or motion.
+
+Together these three tenets form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Each tenet owns the clarity of its part of the interface. 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.
-6. **Destructive is gray, not red.** Destructive *containers* use `--neg`. Error *text* may warn in color.
+5. **Liquid is movement, not a gradient treatment.** Default information surfaces are flat. Express liquidity through moving selection markers, menu and popover settling, tab changes, scroll continuity, and transitions between areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries such as navigation, menus, and overlays—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.
 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. **Communicate with scientific modern 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.
 
 ## 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;
-  --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;
+:root {
+  --accent: #a388ee;
+  --accent-ink: #000000;
+  --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: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --mono: "Space 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 has one color-responsive atmospheric palette; there is no separate black mode. Set `data-mode="dark"` on `<html>` and derive `--bg:color-mix(in srgb,var(--accent) 8%,#0d0a11)` plus `--bg-2:color-mix(in srgb,var(--accent) 14%,#100d14)`, with `--ink:#f6f2f8; --ink-dim:#b9b0bf; --neg:#343434; --neg-ink:#fff; --glass-alpha:0.08`. Changing the single accent must retune the dark page field automatically: purple becomes deep aubergine, green becomes deep green, yellow becomes deep ochre. Tactile components may remain charcoal or near-black above that field.
 
 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 weight and scale for hierarchy. Use Space Mono only for labels, data, code, captions, and eyebrows.
+Three roles — header / body / detail (display / body / mono). Inter carries both sans-serif roles; use scale, weight, measure, and alignment 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.
+
+## Motion contract
+
+The rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Prefer a shared marker that visibly travels between menu options, tabs, filters, navbar actions, and page areas over per-item gradient fills or decorative sheen. 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.
 
 ## Components
 
@@ -69,24 +99,34 @@ 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`.
 
+### Portfolio-grid default
+
+Use the installable `portfolio-card` component for company, investment, and venture grids. Its information hierarchy is persistent: logo or identity mark, company name, one concise description, state or category tags, and the primary action are visible without hover. Hover and press may reinforce tactility, but must never reveal information that is otherwise unavailable, especially on touch devices.
+
+```bash
+npx shadcn@latest add https://structured.glass/r/portfolio-card.json
+```
+
+Use `PortfolioGrid` with `PortfolioCard` and its anatomy exports. Put `PortfolioCardTags` inside `PortfolioCardMedia` so state and category labels overlay the image plate instead of changing the body height. Keep card bodies aligned within the grid, use a consistent media plate for logo normalization, and use the action only when the destination is real. Unavailable or pre-launch companies render as non-link cards with their status exposed.
+
 **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`.
 
-## 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{
-  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);
-  background:rgba(var(--glass-tint),var(--glass-alpha));
-  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
+/* 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);
+  background: rgba(var(--glass-tint), var(--glass-alpha));
+  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
 }
 ```

.github/managed-repository.json

@@ -0,0 +1,35 @@
+{
+  "version": 1,
+  "repository": "Interspace-Ventures/Structured",
+  "linear": {
+    "workspaceSlug": "interspaceventures",
+    "teamKey": "IV",
+    "projectURL": "https://linear.app/interspaceventures/project/structured-liquidity-ad5a3c32c2be",
+    "issueRequired": true
+  },
+  "designSystem": {
+    "name": "Structured Liquidity",
+    "componentSystem": "shadcn",
+    "registry": "https://structured.glass/r/structured-liquidity-agent.json",
+    "configs": [
+      "artifacts/structured-liquidity/components.json"
+    ],
+    "primitiveRoots": [
+      "artifacts/structured-liquidity/src/components/ui"
+    ],
+    "tokenSources": [
+      "artifacts/structured-liquidity/src/index.css"
+    ]
+  },
+  "delivery": {
+    "promotionOrder": [
+      "preview",
+      "staging",
+      "release-candidate",
+      "production"
+    ],
+    "releaseRecordRequired": true,
+    "securityReviewRequired": true,
+    "explicitProductionApprovalRequired": true
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [staging, release, main]
+
+jobs:
+  validate:
+    uses: ./.github/workflows/managed-repository.yml
+    with:
+      package-manager: pnpm
+      package-manager-version: "9.15.9"
+      install-command: pnpm install --frozen-lockfile
+      typecheck-command: pnpm run typecheck
+      build-command: pnpm railway:build
+      ui-command: pnpm --filter @workspace/structured-liquidity run registry:check && pnpm --filter @workspace/structured-liquidity run adopters:check