An open design language · est. 2026

Structured
Liquidity

Rigid containers with sharp, uncompromising edges. Inside them, a liquid glass that reflects light and gives every surface tactile depth. Structured Liquidity marries the discipline of the grid to the delight of the material: a complete, open UI language any product can speak, not the look of just one. This page is both the specimen and the spec, so retheme it live as you read.

Structured containment Liquid depth Semantic clarity
Install Showcase
Principles · the foundation

Structure holds it. Liquidity fills it.

Most systems pick a side: flat utility or glossy depth. Structured Liquidity refuses the choice and holds both at once, a rigid, unambiguous grid containing a fluid, living material. It stands on three pillars, each with the working rules that keep it honest.

Pillar 01

Structured Containment

Sharp 90° corners, flat unblurred shadows, a strict grid. Boundaries are never ambiguous.

  • Shadows stay flat: offset, solid, hard-edged. A structural fact, not a mood.
  • Borders carry weight: 2–3px, never decorative. The edge defines the object.
Pillar 02

Liquid Depth

Inside the rigid boxes lives a tactile glass that is organic, translucent, light-reflecting, and alive.

  • Depth through layers: stack translucent surfaces, each with a real border and flat shadow.
  • Motion proves mass: press a surface and it settles into its own shadow.
Pillar 03

Semantic Clarity

Liquidity delights, but never at the expense of reading. Function leads.

  • One accent, clearly: a single accent carries emphasis; glass stays neutral so it lands.
  • Type with intent: heavy grotesk for impact, monospace for labels and data.
Components · the toolkit

A complete library,
in the language.

More than sixty primitives, from buttons and forms to overlays, navigation, and data display, each one a rigid container holding liquid glass. None of it is a static mockup: click, type, toggle, and open, and every piece reskins from the same live tokens.

ActionsBadge · Button · Dropdown · Toggle
Badge
Default Secondary Outline
Live Error
Button · variants & sizes
Dropdown menu
My account
Profile⌘P
Settings⌘,
Invite team
Sign out
Menubar
Toggle & toggle group
Toolbar
Content & dataCarousel · Chart · Collapsible · Empty · Fonts · Item · Typography
Carousel
01
02
03
04
Chart
Collapsible
Theme tokens
Accent, blur, border weight, corner radius, and flat-shadow offset: every knob behind the language.
Empty
♪ No tracks yet Import audio to start a library.
Fonts
Set 01 · Canonical
HeaderArchivo BodyOutfit DetailSpace Mono
Confident grotesque header, warm body, technical mono: the default.
Set 02 · Editorial
HeaderSyne BodyInter DetailIBM Plex Mono
Expressive display over a neutral workhorse: marketing and brand surfaces.
Set 03 · Modern
HeaderBricolage Grotesque BodyPlus Jakarta Sans DetailJetBrains Mono
Quirky contemporary grotesque with a clean body and developer mono.
Item
U
universe.audio
Audio platform · Live
SL
Structured Liquidity
Design language
Typography

Structure holds it.

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.
Data displayAlert · Avatar · Calendar · Card · Media player · Stat · Table · Waveform
Stat · metric display
100+Languages
1M+Songs
2.7KWords translated
200+Operators in syndicate
60%Scaled 0–100 FTEs
Alert

Heads up

Tokens sync every deploy.

Build failed

Border weight must be ≥ 1px.

Avatar
SL JD
ABC+5
Tooltip · hover card
Flat offset shadow
U
universe.audio
Built on SL
Calendar / date picker
June 2026
SMTWTFS 31123456 78910111213 14151617181920 21222324252627
Card

Field Notes

A rigid container holding glass: a cover, supporting copy, and one clear action.

Waveform
Media player · now playing
Now playing Gracias a la Vida Violeta Parra
Live
1:48 4:38
Table / data table
Token Value Surface Status
--accent#a388eeSolidLive
--glass-alpha0.07GlassLive
--hard-x7pxShadowDraft
--radius0pxEdgeLive
Meter
Storage72 / 100 GB
API quota93%
Fields & controlsButton group · Field · Input group · Kbd · Native select · Spinner
Button group
Field
Already taken, try another.
Shown on your public profile.
Input group
https://
⌘K
Kbd
Command ⌘ K
Save ⌘ S
Native select
Spinner
Forms & inputsAutocomplete · Checkbox · Form · Input · OTP · Select · Switch
Autocomplete
--accent
--accent-ink
--glass-blur
--glass-alpha
--glass-tint
--radius
--border-w
--hard-x
--display
No matches
Checkbox group
Glass
Solid
Liquid
Pick one or more surface treatments.
Form
I agree to the terms
Label
Checkbox
Liquid glass surfaces
Flat shadows
Sharp 90° corners
Input OTP
Input · label · textarea
Progress · skeleton
Skeleton · card
Skeleton · text
Skeleton · list
Radio group
Dark mode
Light mode
System
Select
Glass
Hybrid
Solid
Flat
Command / combobox
Suggestions
New file
Open project
Toggle theme
Export tokens
Copy CSS variables
Switch · slider
Notifications
Reduced motion
60%
Number field
Steppers or ↑ ↓ arrow keys
Fieldset
Billing address
Layout & structureAspect ratio · Keycap · Profile · Resizable · Scroll area · Section header · Separator · Sidebar
Section header
Section 02

Purpose

By operators. For operators.

Profile header
SL
Hey, I'm Samir I drive impact at startups
Keycap tiles
L I Q U I D
Aspect ratio
16 / 9
Resizable
Drag the corner →
Liquid fills the rest
Scroll area
Track 01 · Aurora
Track 02 · Meniscus
Track 03 · Offset
Track 04 · Specular
Track 05 · Viscosity
Track 06 · Containment
Track 07 · Refraction
Separator
Docs API Tokens

A hairline at full border weight, horizontal or vertical.

Sidebar
A structural rail: rigid border, glass fill, one accent for the active route.
Menus & overlaysAlert dialog · Context menu · Drawer · Navigation menu
Alert dialog

A blocking confirm for destructive actions.

Context menu
Right-click surface
Play↵
Add to queue⌘Q
Share
Remove
Drawer

A panel that rises from the bottom edge.

Navigation menu Hover an item for its flyout.
NavigationMarquee · Menubar · Navbar
Marquee
Navigation bar
universe.audio
Discover Library Radio
Catalog
New releases
Genres
Languages
U
Navigation & disclosureAccordion · Breadcrumb · Pagination · Tabs
Accordion
What is Structured Liquidity?

It is an open UI design language that pairs rigid grids and flat offset shadows with liquid, light-reflecting glass, shipped with tokens and a full component kit.

Is it tied to one product?

No. universe.audio is only one example; the language is product-agnostic and travels from product to product by its tokens.

Can I theme the accent?

Yes. A single accent token drives every emphasis across the kit, so changing one value retunes the entire interface.

Breadcrumb
Pagination
Tabs
A glass surface in a rigid frame, what you see in the preview pane.
Copy-paste markup with utility classes, ready to drop in.
Every value exposed as a CSS custom property you can theme.
Overlays & feedbackDialog · Popover · Sheet · Toast
Dialog

A modal that settles into its shadow on open.

Popover
Dimensions

Set the container width and radius.

Sheet

A side panel that slides in from the edge.

Toast / sonner
Stacks bottom-right, auto-dismisses.
Showcase · the prototypes

From Principles
to Practice.

The language is product-agnostic, so the same rigid grid and liquid glass that document it here run unchanged in shipping work. These are real products in production, built on Structured Liquidity rather than described by it.

universe.audio
Screenshot of the universe.audio homepage, an interface built on Structured Liquidity

A music platform built around spectral mixing and streaming, where every surface is a rigid container holding liquid glass, all tuned to its own accent.

Visit universe.audio
universe.audio favicon
universe.audio Audio platform
Live
samir.xyz
Screenshot of samir.xyz, a personal site built on Structured Liquidity

The personal site of a strategic-finance operator, where profile, advisory work, and ventures sit in rigid containers with flat offset shadows on the signature purple accent.

Visit samir.xyz
samir.xyz favicon
samir.xyz Personal site
Live
2daysearly.xyz
Screenshot of 2daysearly.xyz, a venture-fund site built on Structured Liquidity

A fund for operator-led investing in early-stage fintech, running the same rigid grid and offset shadows retuned to a green accent: proof that the language travels by token.

Visit 2daysearly.xyz
2daysearly.xyz favicon
2daysearly.xyz Venture fund
Live
Agent-ready · adopt the language

Built to be read by machines.

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.

llms.txt

The AI-discoverable summary: the three pillars, the hard rules, the tokens, and the font pairings, all in one Markdown file at the site root.

Open llms.txt
design-tokens.json

Every token in the W3C Design Tokens format, each carrying its exact CSS variable name. Import it instead of guessing values.

Open tokens
registry.json

Copy-paste recipes for the kit: class names, variants, and ready-to-paste HTML for the core components.

Open registry
Paste into your AI 
You 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 tokens 
: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;
}

Build with Structure. Flow with Liquidity.

Structured Liquidity is an open UI language: a complete kit of rigid containers and liquid glass, free to take and make your own. Adopt the three pillars, set your accent, and build something rigorous, tactile, and unmistakably clear.

Install Components

Reset to defaults?

This restores every token to the Structured Liquidity baseline: accent, blur, border weight, and shadow offset. This can't be undone.

Theme settings

Side panels slide in from the structural edge and carry their own border + shadow.

Glass blur
Flat shadows

Delete project?

This permanently removes universe.audio and all of its tokens, surfaces, and history. This action cannot be undone.

Now playing

Drawers rise from the structural edge: full-width, with their own top border and flat shadow.