IV-110 Make Scientific Modernism the Structured default

.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 is the neobrutalist physical and informational frame: load-bearing borders, hard shadows, square geometry, unmistakable hierarchy, clear affordances, and tactile interaction. Liquid Motion uses layered glass, continuity, and purposeful movement to communicate state while preserving a complete reduced-motion experience. Scientific Clarity applies rational grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint so information remains complete and legible without relying on decoration. Together these three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Each tenet carries its own clarity responsibility; there is no separate fourth gate. Token reference, file map, and tenets are documented in `replit.md` — don't duplicate them; read there.
 
 ## The non-obvious trap (why the port isn't a verbatim copy)
 
@@ -104,7 +104,7 @@ 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 tenets (content decision), always in this order:** Structured Framing (physical and informational frame), Liquid Motion (state and continuity), and Scientific Clarity (composition and evidence). The cube's three visible faces represent the trifecta. Each tenet carries its own clarity obligation: structure makes hierarchy and action understandable before decoration, motion never becomes the only carrier of meaning and has a complete reduced-motion state, and scientific composition keeps information complete and legible without color, glass, or motion. There is no separate fourth gate. Keep the hero, manifesto, figure, docs, guidance, CSS comments, and generated registry in lockstep. **Why:** each tenet answers a different implementation question and owns the clarity of that answer.
 
 ## Showcase = product-card grid (mode-aware overlay gotcha)
 

.agents/skills/structured-liquidity/SKILL.md

@@ -1,17 +1,17 @@
 ---
 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:** The physical and informational frame—load-bearing borders, square geometry, unmistakable hierarchy, clear affordances, and tactile interaction. Content and action must remain understandable before decoration is added.
+2. **Liquid motion:** Layered glass, continuity, and purposeful motion communicate state and give interfaces believable mass without becoming the only carrier of meaning. Every interaction needs a complete reduced-motion state.
+3. **Scientific clarity:** Scientific Modernism applied to interfaces through refined grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint. Information must remain complete, legible, and useful without relying on color, glass, or motion.
 
-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 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
 
@@ -28,11 +28,10 @@ Follow these literally — they are what keep generated output on-brand:
 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.
 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.
 
 ## Tokens
 
-Apply these as CSS custom properties on `:root` (dark-mode defaults):
+Apply these as CSS custom properties on `:root`. Public editorial surfaces should default to light mode; dark mode remains available for interfaces that benefit from it:
 
 ```css
 :root {

artifacts/structured-liquidity/index.html

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en" data-mode="dark" class="sl-js">
+<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="Neobrutalist Structure. Liquid Glass Motion. Editorial Modern Frameworks. The three-part Structured Liquidity 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 />

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. Legibility remains the quality floor across all three. 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": {

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.** These three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Each tenet carries its own responsibility for making the interface understandable. This file makes the language machine-readable so an AI agent can adopt it faithfully.
 
 ## Install before editing UI
 
@@ -10,13 +10,11 @@ Run this as the first implementation step, before recreating tokens or writing c
 
 This installs the theme and `.agents/skills/structured-liquidity/SKILL.md`. Verify both landed, read the installed skill, and only then start UI work. For theme files without the agent skill, install `https://structured.glass/r/structured-liquidity.json`.
 
-## The three pillars
+## The three tenets
 
-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.
-
-**Semantic Clarity gate**: every screen remains complete, legible, and useful without color, glass, or motion. It is not a fourth pillar.
+1. **Structured framing · Frame**: The physical and informational frame—load-bearing borders, square geometry, unmistakable hierarchy, clear affordances, and tactile interaction. Content and action must remain understandable before decoration is added.
+2. **Liquid motion · State**: Layered glass, continuity, and purposeful motion communicate state and give interfaces believable mass without becoming the only carrier of meaning. Every interaction needs a complete reduced-motion state.
+3. **Scientific clarity · Composition**: Scientific Modernism applied through refined grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint. Information must remain complete, legible, and useful without relying on color, glass, or motion.
 
 ## Hard rules (follow these literally to stay on-brand)
 
@@ -84,4 +82,4 @@ To adopt the kit, include the three stylesheets and the kit script, then use the
 
 ## Source
 
-The full source (this specimen page, the three stylesheets, the kit script, and these machine-readable files) is on GitHub: https://github.com/heyinterspace/Structured
+The full source (this specimen page, the three stylesheets, the kit script, and these machine-readable files) is on GitHub: https://github.com/Interspace-Ventures/Structured