From ae8fabc1610be44eda8325f0a37b3653136f5374 Mon Sep 17 00:00:00 2001 From: Samir Date: Wed, 19 Aug 2026 12:32:18 -0400 Subject: [PATCH 1/2] IV-110 make Scientific Modernism the default Renames the canonical trifecta to Structured framing, Liquid motion, and Scientific clarity; makes light mode the public default; restrains the backdrop; and regenerates the agent and shadcn registry artifacts.\n\nPrompt: use Construct's clean aesthetic as the Structured Liquidity reference and move away from cyberpunk excess. --- .agents/skills/structured-liquidity/SKILL.md | 16 +++++------ artifacts/structured-liquidity/index.html | 4 +-- .../public/design-tokens.json | 2 +- .../structured-liquidity/public/llms.txt | 12 ++++----- .../public/r/structured-liquidity-agent.json | 4 +-- .../public/r/structured-liquidity.json | 4 +-- .../structured-liquidity/public/registry.json | 4 +-- .../public/structured-liquidity.css | 19 ++++++++----- .../scripts/build-registry.mjs | 4 +-- .../src/components/site/Hero.tsx | 26 ++++++++---------- .../src/components/site/Pillars.tsx | 27 +++++++++---------- .../src/components/site/Tweaker.tsx | 2 +- artifacts/structured-liquidity/src/index.css | 4 +-- .../src/styles/10-tokens-base.css | 19 ++++++++----- .../src/styles/40-inline.css | 2 +- 15 files changed, 77 insertions(+), 72 deletions(-) diff --git a/.agents/skills/structured-liquidity/SKILL.md b/.agents/skills/structured-liquidity/SKILL.md index f1a73c6..c9c0cf7 100644 --- a/.agents/skills/structured-liquidity/SKILL.md +++ b/.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, clear hierarchy, clear affordances, and tactile interaction. +2. **Liquid motion:** Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass. +3. **Scientific clarity:** Scientific Modernism applied to interfaces through refined grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint. -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. Legibility remains the quality floor across all three: the aesthetic never outranks the information. The living specimen, machine-readable tokens, and component registry are served by the `structured-liquidity` artifact. ## The non-negotiable rules @@ -28,11 +28,11 @@ 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. +12. **Protect the legibility floor.** 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 { diff --git a/artifacts/structured-liquidity/index.html b/artifacts/structured-liquidity/index.html index 0bca87b..f5cdae0 100644 --- a/artifacts/structured-liquidity/index.html +++ b/artifacts/structured-liquidity/index.html @@ -1,5 +1,5 @@ - + @@ -7,7 +7,7 @@ - + diff --git a/artifacts/structured-liquidity/public/design-tokens.json b/artifacts/structured-liquidity/public/design-tokens.json index a421cf1..c1be13c 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. 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": { diff --git a/artifacts/structured-liquidity/public/llms.txt b/artifacts/structured-liquidity/public/llms.txt index 880b5fa..3a00fbf 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. Legibility remains the quality floor across all three: the aesthetic never outranks the information. This file makes the language machine-readable so an AI agent can adopt it faithfully. ## Install before editing UI @@ -12,11 +12,11 @@ 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 · Frame**: The physical and informational frame—load-bearing borders, square geometry, clear hierarchy, clear affordances, and tactile interaction. +2. **Liquid motion · State**: Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass. +3. **Scientific clarity · Composition**: Scientific Modernism applied through refined grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint. -**Semantic Clarity gate**: every screen remains complete, legible, and useful without color, glass, or motion. It is not a fourth pillar. +**Legibility floor**: every screen remains complete, legible, and useful without color, glass, or motion. ## Hard rules (follow these literally to stay on-brand) @@ -84,4 +84,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 diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json b/artifacts/structured-liquidity/public/r/structured-liquidity-agent.json index f5ce747..6d0bc7c 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 `` 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
\n Title\n

Body copy inside a rigid container holding liquid glass.

\n
\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:** The physical and informational frame—load-bearing borders, square geometry, clear hierarchy, clear affordances, and tactile interaction.\n2. **Liquid motion:** Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass.\n3. **Scientific clarity:** Scientific Modernism applied to interfaces through refined grids, decisive typography, technical diagrams, captions, labels, evidence, and restraint.\n\nTogether they form the Structured Liquidity trifecta, represented by the three visible faces of the cube. Legibility remains the quality floor across all three: the aesthetic never outranks the information. 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. **Protect the legibility floor.** 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`. Public editorial surfaces should default to light mode; dark mode remains available for interfaces that benefit from it:\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 `` 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
\n Title\n

Body copy inside a rigid container holding liquid glass.

\n
\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", "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..f84c233 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", @@ -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 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 /* ---- Scientific clarity, informed by 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 {\n opacity: 1;\n background:\n radial-gradient(38vw 24vh at 84% 4%, rgba(163, 136, 238, 0.24), transparent 72%),\n radial-gradient(34vw 22vh at 10% 58%, rgba(163, 136, 238, 0.12), transparent 74%),\n linear-gradient(#dfe5f2, #e7ebf4);\n animation-duration: 46s;\n}\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.16;\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", "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..f848d31 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..4bc32c0 100644 --- a/artifacts/structured-liquidity/public/structured-liquidity.css +++ b/artifacts/structured-liquidity/public/structured-liquidity.css @@ -1,8 +1,6 @@ /* ============================================================ - 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 - the specimen. + STRUCTURED LIQUIDITY — Structured framing. Liquid motion. + Scientific clarity. This stylesheet IS the specimen. ============================================================ */ :root { @@ -22,7 +20,7 @@ --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%); --floating-ui-clearance: 96px; - /* ---- Editorial Modern Frameworks, informed by editorial scientific modernism ---- */ + /* ---- Scientific clarity, informed by Scientific Modernism ---- */ --text-display-xl: clamp(4.5rem, 10vw, 9rem); --text-display-lg: clamp(2.8rem, 6vw, 5.5rem); --measure-reading: 68ch; @@ -108,7 +106,14 @@ body { background-repeat: no-repeat; animation: fieldshift 30s ease-in-out infinite alternate; } -[data-mode="light"] .field { opacity: 0.55; } +[data-mode="light"] .field { + opacity: 1; + background: + radial-gradient(38vw 24vh at 84% 4%, rgba(163, 136, 238, 0.24), transparent 72%), + radial-gradient(34vw 22vh at 10% 58%, rgba(163, 136, 238, 0.12), transparent 74%), + linear-gradient(#dfe5f2, #e7ebf4); + animation-duration: 46s; +} @keyframes fieldshift { from { transform: translateX(0); } to { transform: translateX(-3vw); } @@ -132,7 +137,7 @@ body { height: 100%; z-index: -1; pointer-events: none; - opacity: 0.4; + opacity: 0.16; 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"); } diff --git a/artifacts/structured-liquidity/scripts/build-registry.mjs b/artifacts/structured-liquidity/scripts/build-registry.mjs index 1342734..8c81081 100644 --- a/artifacts/structured-liquidity/scripts/build-registry.mjs +++ b/artifacts/structured-liquidity/scripts/build-registry.mjs @@ -263,7 +263,7 @@ 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.", + "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, @@ -276,7 +276,7 @@ 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: [ { diff --git a/artifacts/structured-liquidity/src/components/site/Hero.tsx b/artifacts/structured-liquidity/src/components/site/Hero.tsx index b03a515..e8c751a 100644 --- a/artifacts/structured-liquidity/src/components/site/Hero.tsx +++ b/artifacts/structured-liquidity/src/components/site/Hero.tsx @@ -2,7 +2,7 @@ import { Sparkles, Github } from "lucide-react"; import { LiquidWord, Hypercube } from "./liquid"; import { InstallButton } from "./InstallButton"; -const GITHUB = "https://github.com/heyinterspace/Structured"; +const GITHUB = "https://github.com/Interspace-Ventures/Structured"; export function Hero() { return ( @@ -18,21 +18,17 @@ export function Hero() {

- - Neobrutalist Structure. Liquid Glass Motion. Editorial Modern - Frameworks. - {" "} - 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. + Structured framing. Liquid motion. Scientific clarity.{" "} + Structured Liquidity gives digital interfaces a rigorous frame, + movement that explains state, and an evidence-first editorial + system. The result is precise without feeling sterile and expressive + without becoming visual noise. This page is both specimen and spec, + so retheme it live as you read.

- Neobrutalist Structure - Liquid Glass Motion - Editorial Modern Frameworks + Structured framing + Liquid motion + Scientific clarity
@@ -54,7 +50,7 @@ export function Hero() {
diff --git a/artifacts/structured-liquidity/src/components/site/Pillars.tsx b/artifacts/structured-liquidity/src/components/site/Pillars.tsx index 26ff601..17e5f12 100644 --- a/artifacts/structured-liquidity/src/components/site/Pillars.tsx +++ b/artifacts/structured-liquidity/src/components/site/Pillars.tsx @@ -7,18 +7,17 @@ export function Pillars() { Three faces. One design language.

- 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 makes hierarchy and action unmistakable. Liquid + motion makes state and continuity perceptible. Scientific clarity + turns hierarchy, labels, diagrams, and evidence into one legible + system. Together they form the Structured Liquidity trifecta.

Pillar 01 -

Neobrutalist Structure

+

Structured framing

The physical frame: load-bearing borders, hard shadows, square geometry, clear affordances, and tactile interaction. @@ -41,7 +40,7 @@ export function Pillars() {

Pillar 02 -

Liquid Glass Motion

+

Liquid motion

Layered glass, continuity, and purposeful motion that communicate state and give interfaces believable mass. @@ -66,11 +65,11 @@ export function Pillars() {

Pillar 03 -

Editorial Modern Frameworks

+

Scientific clarity

- Hierarchy, refined grids, oversized typography, technical diagrams, - captions, labeling, and evidence, informed by editorial scientific - modernism. + Scientific Modernism applied to interfaces: refined grids, + decisive typography, technical diagrams, captions, labels, and + evidence.

  • @@ -92,9 +91,9 @@ export function Pillars() {

- Quality gate · Semantic Clarity - Every screen must remain complete, legible, and useful without color, - glass, or motion. + Quality floor · legibility + Every screen remains complete and useful without color, glass, or + motion. The aesthetic never outranks the information.

); diff --git a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx index bee8563..fc47806 100644 --- a/artifacts/structured-liquidity/src/components/site/Tweaker.tsx +++ b/artifacts/structured-liquidity/src/components/site/Tweaker.tsx @@ -27,7 +27,7 @@ const DEFAULTS: Tweaks = { border: 2, shadow: 7, radius: 0, - mode: "dark", + mode: "light", }; const ACCENTS = ["#a388ee", "#7c9cff", "#3dd7c8", "#ffb454", "#ff7a90"]; diff --git a/artifacts/structured-liquidity/src/index.css b/artifacts/structured-liquidity/src/index.css index deab317..32133da 100644 --- a/artifacts/structured-liquidity/src/index.css +++ b/artifacts/structured-liquidity/src/index.css @@ -10,8 +10,8 @@ @import "./styles/30-kit.css"; @import "./styles/40-inline.css"; -/* dark is the default (data-mode="dark" on ); expose the variant so - `dark:` utilities resolve against the same switch the tweaker writes. */ +/* Expose the optional dark variant against the same switch the tweaker writes. + Public editorial surfaces default to light mode. */ @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); /* Map the live SL custom properties onto Tailwind theme tokens with `inline` diff --git a/artifacts/structured-liquidity/src/styles/10-tokens-base.css b/artifacts/structured-liquidity/src/styles/10-tokens-base.css index 86db3e6..4bc32c0 100644 --- a/artifacts/structured-liquidity/src/styles/10-tokens-base.css +++ b/artifacts/structured-liquidity/src/styles/10-tokens-base.css @@ -1,8 +1,6 @@ /* ============================================================ - 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 - the specimen. + STRUCTURED LIQUIDITY — Structured framing. Liquid motion. + Scientific clarity. This stylesheet IS the specimen. ============================================================ */ :root { @@ -22,7 +20,7 @@ --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%); --floating-ui-clearance: 96px; - /* ---- Editorial Modern Frameworks, informed by editorial scientific modernism ---- */ + /* ---- Scientific clarity, informed by Scientific Modernism ---- */ --text-display-xl: clamp(4.5rem, 10vw, 9rem); --text-display-lg: clamp(2.8rem, 6vw, 5.5rem); --measure-reading: 68ch; @@ -108,7 +106,14 @@ body { background-repeat: no-repeat; animation: fieldshift 30s ease-in-out infinite alternate; } -[data-mode="light"] .field { opacity: 0.55; } +[data-mode="light"] .field { + opacity: 1; + background: + radial-gradient(38vw 24vh at 84% 4%, rgba(163, 136, 238, 0.24), transparent 72%), + radial-gradient(34vw 22vh at 10% 58%, rgba(163, 136, 238, 0.12), transparent 74%), + linear-gradient(#dfe5f2, #e7ebf4); + animation-duration: 46s; +} @keyframes fieldshift { from { transform: translateX(0); } to { transform: translateX(-3vw); } @@ -132,7 +137,7 @@ body { height: 100%; z-index: -1; pointer-events: none; - opacity: 0.4; + opacity: 0.16; 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"); } diff --git a/artifacts/structured-liquidity/src/styles/40-inline.css b/artifacts/structured-liquidity/src/styles/40-inline.css index 1e934ff..af6f093 100644 --- a/artifacts/structured-liquidity/src/styles/40-inline.css +++ b/artifacts/structured-liquidity/src/styles/40-inline.css @@ -188,7 +188,7 @@ /* 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. */ + /* Scientific clarity: 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);} From 9966dd6b2015196fff9967b63a64a8373fd63297 Mon Sep 17 00:00:00 2001 From: Samir Date: Thu, 20 Aug 2026 09:21:12 -0400 Subject: [PATCH 2/2] Refine Structured Liquidity around three tenets Prompt: Let's kill semantic clarity and make sure that the tenets are captured in the other pillars (which we should call tenets) --- .agents/memory/structured-liquidity.md | 4 +- .agents/skills/structured-liquidity/SKILL.md | 9 ++--- .../structured-liquidity/public/llms.txt | 12 +++--- .../public/r/structured-liquidity-agent.json | 2 +- artifacts/structured-liquidity/src/App.tsx | 4 +- .../structured-liquidity/src/adopters.json | 16 ++++---- .../src/components/site/Adopt.tsx | 2 +- .../src/components/site/FooterCta.tsx | 2 +- .../site/{Pillars.tsx => Tenets.tsx} | 37 +++++++++---------- .../src/styles/20-components.css | 22 +++++------ .../src/styles/40-inline.css | 22 ++++------- docs/design-ethos-v2.md | 25 ++++++------- replit.md | 6 +-- 13 files changed, 75 insertions(+), 88 deletions(-) rename artifacts/structured-liquidity/src/components/site/{Pillars.tsx => Tenets.tsx} (72%) diff --git a/.agents/memory/structured-liquidity.md b/.agents/memory/structured-liquidity.md index 22c3008..cf58824 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 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 `