From 781c18e1e7950904391f597459d878c74cd73e39 Mon Sep 17 00:00:00 2001 From: Samir Date: Wed, 12 Aug 2026 22:26:01 -0400 Subject: [PATCH 01/14] Align Structured site shell and body surface Prompt: Okay one meta-change. I changed my mind on the width of the navbar compared to the width of body content. Let's make it the same, but let's have a body content container that lines up to the navbar but is separate. That would sit on top of the background. For now they can be nearly the same color. Let's make this change across all exobase websites. --- artifacts/structured-liquidity/public/llms.txt | 4 ++-- .../structured-liquidity/public/r/site-shell.json | 2 +- .../public/r/structured-liquidity.json | 2 +- .../public/structured-liquidity.css | 6 ++++-- .../src/components/site/kit/KitPatterns.tsx | 4 ++-- .../src/components/ui/site-shell.tsx | 13 ++++++------- .../src/styles/10-tokens-base.css | 6 ++++-- .../structured-liquidity/src/styles/40-inline.css | 2 +- replit.md | 2 +- 9 files changed, 22 insertions(+), 19 deletions(-) diff --git a/artifacts/structured-liquidity/public/llms.txt b/artifacts/structured-liquidity/public/llms.txt index 75afdb8..dc7f017 100644 --- a/artifacts/structured-liquidity/public/llms.txt +++ b/artifacts/structured-liquidity/public/llms.txt @@ -27,7 +27,7 @@ This installs the theme and `.agents/skills/structured-liquidity/SKILL.md`. Veri - Type roles are fixed: **display** = headings/buttons/brand (`--display`), **mono** = labels, captions, data, eyebrows (`--mono`), **body** = paragraph/reading copy (`--body`). - Leading icons are the default for nav links and buttons (Lucide). Put the icon first, then the label. - Press/hover feedback nudges the element toward its shadow (translate by ~1px and grow the offset). Motion proves mass. -- Navigation and footer chrome use `--shell-w` and are slightly wider than page content, which uses `--content-w`. The two widths must not be inverted. +- Navigation, body surface, and footer chrome use the same `--shell-w`. The body is an independent near-background surface; narrower reading measures belong inside it. - Public websites using Structured Liquidity must include a visible footer attribution linking to `https://structured.glass`. Immersive apps may put it in a persistent information panel. ## Tokens (source of truth) @@ -44,7 +44,7 @@ Core defaults: - `--glass-blur` `18px`, `--glass-tint` `255 255 255`, `--glass-alpha` `0.07` - `--border-w` `2px`, `--hard-x` / `--hard-y` `7px`, `--radius` `0px` - `--display` Inter, `--body` Inter, `--mono` Space Mono -- `--content-w` `1200px`, `--shell-w` `1280px`, `--viewport-gutter` `4vw` +- `--content-w` aliases `--shell-w`, `--shell-w` `1280px`, `--viewport-gutter` `4vw`, `--body-surface` near-background opaque surface - Light mode: set `data-mode="light"` on `` (flips `--bg`, `--ink`, `--ink-dim`, `--glass-alpha`, etc.) ## Recommended font pairings diff --git a/artifacts/structured-liquidity/public/r/site-shell.json b/artifacts/structured-liquidity/public/r/site-shell.json index 4b3e81d..62f63f8 100644 --- a/artifacts/structured-liquidity/public/r/site-shell.json +++ b/artifacts/structured-liquidity/public/r/site-shell.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/ui/site-shell.tsx", - "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Shared outer chrome width for navigation and footers.\n * It is deliberately wider than SiteContent, so the chrome frames the page.\n */\nexport const SiteShell = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nSiteShell.displayName = \"SiteShell\";\n\n/** The narrower reading and application-content column. */\nexport const SiteContent = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nSiteContent.displayName = \"SiteContent\";\n\n", + "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Shared width and responsive gutters for navigation, body, and footer chrome. */\nexport const SiteShell = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nSiteShell.displayName = \"SiteShell\";\n\n/**\n * An independent body surface aligned to SiteShell. Tenant layouts may add\n * their own internal reading measure without changing the outer frame.\n */\nexport const SiteContent = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nSiteContent.displayName = \"SiteContent\";\n", "type": "registry:ui", "target": "components/ui/site-shell.tsx" } diff --git a/artifacts/structured-liquidity/public/r/structured-liquidity.json b/artifacts/structured-liquidity/public/r/structured-liquidity.json index e1b6b94..6cff59b 100644 --- a/artifacts/structured-liquidity/public/r/structured-liquidity.json +++ b/artifacts/structured-liquidity/public/r/structured-liquidity.json @@ -40,7 +40,7 @@ "files": [ { "path": "registry/styles/structured-liquidity.css", - "content": "/* ============================================================\n STRUCTURED LIQUIDITY — a design language built on three\n pillars: Rigid Containment (sharp 90° corners, flat blurless\n shadows, grid discipline), Viscous Depth (semi-transparent\n liquid glass that reflects light), and Semantic Clarity\n (strict text + icon pairings). 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 --content-w: 1200px;\n --shell-w: 1280px;\n --viewport-gutter: 4vw;\n --floating-ui-clearance: 96px;\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.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; }\n.shell,\n.sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }\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 — a design language built on three\n pillars: Rigid Containment (sharp 90° corners, flat blurless\n shadows, grid discipline), Viscous Depth (semi-transparent\n liquid glass that reflects light), and Semantic Clarity\n (strict text + icon pairings). 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 /* ---- 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.sl-site-content,\n.shell,\n.sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; }\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/structured-liquidity.css b/artifacts/structured-liquidity/public/structured-liquidity.css index 280c6f2..7bde470 100644 --- a/artifacts/structured-liquidity/public/structured-liquidity.css +++ b/artifacts/structured-liquidity/public/structured-liquidity.css @@ -17,9 +17,10 @@ --hard-x: 7px; --hard-y: 7px; --radius: 0px; - --content-w: 1200px; --shell-w: 1280px; + --content-w: var(--shell-w); --viewport-gutter: 4vw; + --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%); --floating-ui-clearance: 96px; /* ---- fixed palette (neobrutalism.dev) ---- */ @@ -212,9 +213,10 @@ h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margi ============================================================ */ .wrap, -.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; } +.sl-site-content, .shell, .sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; } +.sl-site-body { background: var(--body-surface); } section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; } .section-head { max-width: 70ch; margin-bottom: 1.1rem; } diff --git a/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx b/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx index 9e16f22..1fc7c01 100644 --- a/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx +++ b/artifacts/structured-liquidity/src/components/site/kit/KitPatterns.tsx @@ -77,8 +77,8 @@ export function KitPatterns() {
Site shell
- Navigation and footer share this wider frame - Page content stays deliberately narrower + Navigation and footer use the shared site frame + Body surface aligns to the same frame
diff --git a/artifacts/structured-liquidity/src/components/ui/site-shell.tsx b/artifacts/structured-liquidity/src/components/ui/site-shell.tsx index 354b029..c387edb 100644 --- a/artifacts/structured-liquidity/src/components/ui/site-shell.tsx +++ b/artifacts/structured-liquidity/src/components/ui/site-shell.tsx @@ -1,10 +1,7 @@ import * as React from "react"; import { cn } from "@/lib/utils"; -/** - * Shared outer chrome width for navigation and footers. - * It is deliberately wider than SiteContent, so the chrome frames the page. - */ +/** Shared width and responsive gutters for navigation, body, and footer chrome. */ export const SiteShell = React.forwardRef>( ({ className, ...props }, ref) => (
@@ -12,11 +9,13 @@ export const SiteShell = React.forwardRef>( ({ className, ...props }, ref) => ( -
+
), ); SiteContent.displayName = "SiteContent"; - diff --git a/artifacts/structured-liquidity/src/styles/10-tokens-base.css b/artifacts/structured-liquidity/src/styles/10-tokens-base.css index 280c6f2..7bde470 100644 --- a/artifacts/structured-liquidity/src/styles/10-tokens-base.css +++ b/artifacts/structured-liquidity/src/styles/10-tokens-base.css @@ -17,9 +17,10 @@ --hard-x: 7px; --hard-y: 7px; --radius: 0px; - --content-w: 1200px; --shell-w: 1280px; + --content-w: var(--shell-w); --viewport-gutter: 4vw; + --body-surface: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%); --floating-ui-clearance: 96px; /* ---- fixed palette (neobrutalism.dev) ---- */ @@ -212,9 +213,10 @@ h1, h2, h3 { font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margi ============================================================ */ .wrap, -.sl-site-content { width: min(var(--content-w), calc(100vw - (var(--viewport-gutter) * 2))); margin-inline: auto; } +.sl-site-content, .shell, .sl-site-shell { width: min(var(--shell-w), calc(100vw - var(--viewport-gutter))); margin-inline: auto; } +.sl-site-body { background: var(--body-surface); } section { padding: clamp(1.5rem, 3.4vh, 2.7rem) 0; position: relative; } .section-head { max-width: 70ch; margin-bottom: 1.1rem; } diff --git a/artifacts/structured-liquidity/src/styles/40-inline.css b/artifacts/structured-liquidity/src/styles/40-inline.css index a387c18..20edb77 100644 --- a/artifacts/structured-liquidity/src/styles/40-inline.css +++ b/artifacts/structured-liquidity/src/styles/40-inline.css @@ -145,7 +145,7 @@ .sl-shell-demo{display:grid;gap:.65rem;width:100%;font-family:var(--mono);font-size:.72rem;text-align:center;} .sl-shell-demo .sl-site-shell,.sl-shell-demo .sl-site-content{border:1px solid rgb(var(--edge));padding:.75rem;} .sl-shell-demo .sl-site-shell{background:rgb(var(--glass-tint)/.08);} - .sl-shell-demo .sl-site-content{background:rgb(var(--glass-tint)/.04);color:var(--ink-dim);} + .sl-shell-demo .sl-site-content{color:var(--ink-dim);} @media(max-width:720px){.template-grid{grid-template-columns:1fr;}} /* Big hero hypercube — container-less, oversized, sitting behind the hero diff --git a/replit.md b/replit.md index 0cad2f0..6bc2044 100644 --- a/replit.md +++ b/replit.md @@ -55,7 +55,7 @@ Cross-item URLs use `REGISTRY_BASE_URL` (default `https://structured.glass`). Th - **Showcase is a scalable product-card grid** (`.show-grid` of `.show-card`): each card is a clickable `` with a real screenshot from `public/`; description + Visit CTA reveal on hover/focus (persistent bottom panel on touch). Add a product = one `.show-card` + its screenshot. - Asset references are relative; the artifact is served at base `/`. - Public sites built with the framework must include a visible footer attribution to `https://structured.glass`; use `FrameworkAttribution` or the plain HTML recipe in `ATTRIBUTION.md`. Immersive full-viewport apps may put it in a persistent information panel. -- Navigation and footer chrome use `--shell-w` and remain slightly wider than the `--content-w` reading/application column. +- Navigation, body surface, and footer chrome share `--shell-w`. The body remains an independent near-background surface, while tenant layouts may set a narrower internal reading measure. ## Product From 4138cc5289bb1da9284ed9f3a854fcdd45e80ab1 Mon Sep 17 00:00:00 2001 From: Samir Date: Sun, 16 Aug 2026 15:54:55 -0400 Subject: [PATCH 02/14] Evolve Structured Liquidity design ethos User request: Keep Structured neobrutalism and liquid animations, add editorial scientific modernism, and make the trifecta the primary design language across apps. Linear: IV-96 --- .agents/memory/structured-liquidity.md | 33 +++++--- .agents/skills/structured-liquidity/SKILL.md | 63 +++++++++----- .../public/design-tokens.json | 84 +++++++++++++++++-- .../structured-liquidity/public/llms.txt | 15 +++- .../public/r/structured-liquidity-agent.json | 2 +- .../public/r/structured-liquidity.json | 19 ++++- .../structured-liquidity-components.css | 2 +- .../public/structured-liquidity.css | 21 +++-- .../scripts/build-registry.mjs | 13 +++ artifacts/structured-liquidity/src/App.tsx | 2 + .../src/components/site/EthosFigure.tsx | 70 ++++++++++++++++ .../src/components/site/Hero.tsx | 25 ++++-- .../src/components/site/Pillars.tsx | 66 +++++++++------ .../src/styles/10-tokens-base.css | 21 +++-- .../src/styles/20-components.css | 2 +- .../src/styles/40-inline.css | 42 ++++++++++ docs/design-ethos-v2.md | 37 ++++++++ replit.md | 4 +- 18 files changed, 431 insertions(+), 90 deletions(-) create mode 100644 artifacts/structured-liquidity/src/components/site/EthosFigure.tsx create mode 100644 docs/design-ethos-v2.md diff --git a/.agents/memory/structured-liquidity.md b/.agents/memory/structured-liquidity.md index f5d64ec..0fe05dd 100644 --- a/.agents/memory/structured-liquidity.md +++ b/.agents/memory/structured-liquidity.md @@ -5,9 +5,10 @@ description: The durable decisions behind the SL specimen port — what it is, a # Structured Liquidity -An open UI design language ("rigid containment + viscous glass + semantic clarity") shipped as a live specimen at `artifacts/structured-liquidity`. Token reference, file map, and pillars are documented in `replit.md` — don't duplicate them; read there. +An open UI design language ("tactile structure + editorial intelligence + liquid depth") shipped as a live specimen at `artifacts/structured-liquidity`. Structured neobrutalism owns the frame, editorial scientific modernism owns composition, and liquid depth owns behavior. Semantic clarity is the cross-cutting quality gate. 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) + The original framework's "live tweaks" panel and its `` showcase element were **React/Babel components coupled to a proprietary in-editor "omelette" host bridge** (`window.parent.postMessage` + `__edit_mode_*` / `__activate_edit_mode`). That host **does not exist in a deployment**, so a verbatim copy yields an invisible tweaks panel and an empty "drop a screenshot" slot in production. **Decision:** keep the plain CSS/JS verbatim in `public/`, but rebuild the tweaker in vanilla TS (`src/main.ts`) and replace the image-slot with a static CSS visual. @@ -19,24 +20,27 @@ The original framework's "live tweaks" panel and its `` showcase ele **Verbatim-public guard covers BINARIES too, not just `*.css`/`*.js`:** `public/opengraph.jpg` has silently drifted (tooling/editor re-encoded it). When verifying the constraint, check the WHOLE `public/` dir (`git --no-optional-locks status --porcelain public/`), and restore any unintended change — including binaries — with `git --no-optional-locks show HEAD: > ` (checkout/restore are sandbox-blocked). ## Overriding `liquid-word.js` without editing it -The hero "Liquidity" wordmark is driven by a richer JS renderer in `src/main.ts` (multi-wave, non-repeating, bubbles) that *takes the hero away from* the verbatim `liquid-word.js`. -**The trick:** `liquid-word.js` claims `.glas[data-liquid]` from a `DOMContentLoaded` handler; a `type=module` script's top-level code runs *after parse but before* `DOMContentLoaded`. So `main.ts` removes the `data-liquid` attribute at module top-level → the original skips the hero (still renders the `.glyph` logo cube). Because the `.glas[data-liquid].is-liquid` stylesheet rule no longer matches, re-apply that look via inline styles (`color:transparent`, no text-stroke/bg/shadow) and add the `is-liquid` class. +The hero "Liquidity" wordmark is driven by a richer JS renderer in `src/main.ts` (multi-wave, non-repeating, bubbles) that _takes the hero away from_ the verbatim `liquid-word.js`. + +**The trick:** `liquid-word.js` claims `.glas[data-liquid]` from a `DOMContentLoaded` handler; a `type=module` script's top-level code runs _after parse but before_ `DOMContentLoaded`. So `main.ts` removes the `data-liquid` attribute at module top-level → the original skips the hero (still renders the `.glyph` logo cube). Because the `.glas[data-liquid].is-liquid` stylesheet rule no longer matches, re-apply that look via inline styles (`color:transparent`, no text-stroke/bg/shadow) and add the `is-liquid` class. **Why:** lets us evolve one specific behavior while keeping `public/*.js` byte-for-byte verbatim and avoiding duplicate SVGs / timer races. -**How to apply:** reuse the same CSS classes (`lw-glass`, `lw-wave-back/front`, `lw-shine`, `lw-outline`) so theming keeps flowing from `--accent`/`--edge`; keep the glass rect *inside* the clip group (clipped to letters, not a full rectangle); silence the CSS keyframes on JS-animated paths via inline `animation:none`; rebuild on `fonts.ready`/resize/font-tweak and cancel the rAF on `pagehide`. +**How to apply:** reuse the same CSS classes (`lw-glass`, `lw-wave-back/front`, `lw-shine`, `lw-outline`) so theming keeps flowing from `--accent`/`--edge`; keep the glass rect _inside_ the clip group (clipped to letters, not a full rectangle); silence the CSS keyframes on JS-animated paths via inline `animation:none`; rebuild on `fonts.ready`/resize/font-tweak and cancel the rAF on `pagehide`. ## Screenshotting reveal-gated content deep in the page + Deep-linking to a hash (`/#anchor`) and screenshotting lands on blank space for content far down the page: the scroll-reveal keeps `.reveal{opacity:0}` and the deep-anchor jump doesn't reliably trigger the IntersectionObserver before capture (there is a ~1800ms fallback that reveals all, but screenshots fire sooner). -**The trick (temp inline `