glassThe glass design system
Polished interfaces, readable by default.
Glass is a small, practical design system for building calm, modern product interfaces. You get frosted chrome, a full library of components, light and dark modes, and a set of themes — all sharing one tidy set of design tokens so everything feels like it belongs together. Text stays easy to read on every theme, because contrast is built in rather than hoped for.
How it looks on the theme you're viewing
Where to next
Built and used across Zeno · Weft · Vantage · ShieldAI · Textify · HealthFlow · Smart Rephraser · AI Detector — open source under MIT. github.com/abheet19/glass
Library
No components match "".
Color scale
The neutral steps and accent colors this theme is built from, sampled live from the page. Switch theme or mode and they update instantly.
Contrast, checked live
Every important text-on-background and icon-on-background pairing, measured right now on the theme you're viewing. Anything that doesn't clear the WCAG minimum shows as a fail — and on every theme that ships, nothing does.
| Pair | Role | Measured | Minimum | Result |
|---|
Type & corners
The type scale and corner radii every screen here is drawn from.
The themes
Every theme is just a different accent laid over the same neutral scale, so they all stay consistent and readable. Here they are in light and dark side by side — click any row to try it on.
Workspace shell
A full three-pane app layout assembled from glass parts: collapsible side panels, file and tool tabs, a resizable split view, a file tree, a command box and a status bar. It's the shell real products dock their own tools into — resize it, switch tabs and type into the composer below.
:root {
--r-2: 12px;
--blur: 14px;
}
.btn-primary {
background: var(--accent);
}
.glass {
background: var(--gl-fill);
backdrop-filter: var(--gl-blur);
border: 1px solid var(--gl-edge);
}
.field:focus {
border-color: var(--accent);
outline: none;
}
Preview
One shared set of tokens behind every screen.
Settings
Appearance, accessibility, the products built with glass, and how to add it to your own.
How strict the readability check should be. AA is the standard bar most products aim for; AAA is stricter, for text that has to be legible in tough conditions. Icons and focus rings use the same minimum on both.
on the current theme, mode and contrast target — measured live
The products built with glass — what each one does and the theme it uses. Every link goes to its real repository on GitHub.
| Project | Role | Hue |
|---|
Glass is plain CSS with no build step — drop the files in and start using them. Here's how to add it to a project.
git clone https://github.com/abheet19/glass.git
node glass/scripts/contrast.mjs # confirm every theme is readable
git submodule add https://github.com/abheet19/glass.git vendor/glass
<link rel="stylesheet" href="src/tokens.css"> <link rel="stylesheet" href="src/themes/weft.css"> <link rel="stylesheet" href="src/primitives.css"> <html data-glass="weft"> # hue <html data-glass="weft" data-theme="light"> <html data-glass="weft" data-flat="1"> # no blur
node scripts/contrast.mjs --verbose # show every pair node scripts/contrast.mjs --theme weft # just one theme node scripts/contrast.mjs --emit-json # refresh tokens.json
built with glass
Project
Role
The glass pieces this product uses
Each piece above is a real glass component in this product's theme — pick another product in the sidebar and the whole set changes color to match.
Everything at once
A long, scrolling page with a frosted toolbar pinned to the top — a quick stress test of the whole system together. It also shows the one rule glass keeps: the floating chrome is frosted, while anything you actually read sits on a solid panel, never behind the blur.
Headline numbers, on solid tiles
A data table, scrolling inside its own frame
| Theme | Origin | ink / raised | accent / glass | Status |
|---|---|---|---|---|
| weft | CRDT editor | 14.21:1 | 5.40:1 | |
| vantage | analytics | 13.88:1 | 5.12:1 | |
| zeno | agent suite | 14.19:1 | 4.85:1 | |
| health | clinical | 13.90:1 | 5.02:1 |
Lowercase, no spaces.
colors, spacing, motioncore
buttons, cards, inputs7
toasts, dialogs, tooltips4
Long-form text, always on a solid card
Scroll the page and watch the toolbar above: it stays pinned and frosted, with the content sliding softly underneath it. That's the one place a blur belongs — the floating chrome, the overlays, the navigation.
Everything you're reading right now sits on a solid panel, because text behind a blur is text you can't be sure is readable. Keeping content off the glass is what lets the contrast checks mean something — and it's the habit that keeps a glassy interface from tipping into a pretty mess.