Rigid containers with sharp, uncompromising edges. Inside them, a liquid glass that reflects light and lends every surface tactile depth. Structured Liquidity is the discipline of the grid married to the delight of the material — a complete UI language, not a single product's skin.
Most systems pick a side — flat utility or glossy depth. Structured Liquidity refuses the choice: a rigid, unambiguous grid holding a fluid, living material. Three pillars, each with the working rules that keep it honest.
Sharp 90° corners, flat unblurred shadows, a strict grid. Boundaries are never ambiguous.
Inside the rigid boxes, a tactile glass — organic, translucent, light-reflecting, alive.
Liquidity delights, but never at the expense of reading. Function leads.
Every primitive you'd expect from a modern component kit — buttons, forms, overlays, navigation, data display — each one a rigid container holding liquid glass. All live: click, type, toggle, open.
Heavy grotesk for impact, monospace for labels, and a measured body that stays legible through the glass. Inline --accent tokens carry the system.
Liquidity is for depth, never at the expense of clarity.
Heads up
Tokens sync every deploy.
Build failed
Border weight must be ≥ 1px.
Real-time spectral display with glass overlays.
| Token | Value | Surface | Status |
|---|---|---|---|
| --accent | #a388ee | Solid | Live |
| --glass-alpha | 0.07 | Glass | Live |
| --hard-x | 7px | Shadow | Draft |
| --radius | 0px | Edge | Live |
A hairline at full border weight — horizontal or vertical.
A blocking confirm for destructive actions.
A panel that rises from the bottom edge.
A UI language pairing rigid grids and flat shadows with liquid glass surfaces.
No — universe.audio is one example. The system is product-agnostic.
Yes. One accent token drives every emphasis across the kit.
A modal that settles into its shadow on open.
A side panel that slides in from the edge.
The system is product-agnostic — the same rigid grid and liquid glass that document the language run unchanged in shipping work. universe.audio is the first product built on it, here in production rather than in a spec sheet.
Structured Liquidity ships its rules, tokens, and components in formats an AI agent can read directly — so the language travels into new products without losing its grammar. Point any AI tool at the files below, or paste the prompt into your assistant.
The AI-discoverable summary: the three pillars, the hard rules, the tokens, and the font pairings — one Markdown file at the site root.
Open llms.txtEvery token in the W3C Design Tokens format, each carrying its exact CSS variable name. Import it instead of guessing values.
Open tokensCopy-paste recipes for the kit — class names, variants, and ready-to-paste HTML for the core components.
Open registryYou are designing in the Structured Liquidity UI language. Rules: - Square corners (border-radius: 0). - Flat offset shadows only: box-shadow: 7px 7px 0 0 #000 — never blurred. - Solid 2px black borders; the edge defines the object. - Exactly one accent (#a388ee) carries all emphasis. - Liquid glass = backdrop-filter blur over translucent white rgba(255,255,255,0.07). - Destructive surfaces are neutral gray (#3c3f4b), never red. - Type: Archivo for headings/buttons/brand, Outfit for body, Space Mono for labels and data. - Leading icons (Lucide) on nav links and buttons. Use the tokens in design-tokens.json and the component markup in registry.json. Full spec: llms.txt.
:root{
--accent:#a388ee; --accent-ink:#000000;
--bg:#272933; --bg-2:#1f2028; --ink:#e6e6e6; --ink-dim:#9da0ab;
--edge:0 0 0; --hard-shadow:#000000; --neg:#3c3f4b; --neg-ink:#f0f0f2;
--glass-blur:18px; --glass-tint:255 255 255; --glass-alpha:0.07;
--border-w:2px; --hard-x:7px; --hard-y:7px; --radius:0px;
--display:"Archivo","Helvetica Neue",system-ui,sans-serif;
--body:"Outfit","Helvetica Neue",system-ui,sans-serif;
--mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;
}
Structured Liquidity is an open UI language — a complete kit of rigid containers and liquid glass. Take the three pillars, theme the accent, and build something rigorous, tactile, and unmistakably clear.