Buttons /button
Tooltips work on hover & keyboard focus
Design system · v2.4 Aurora
CULLET a liquid-glass system
A UI kit built on real glass. Every surface refracts the canvas behind it, every component bends to a single accent, and the whole kit re-tints from one custom property: depth without noise, theming without a rebuild.
48 components
1 accent token
WCAG AA on glass
CSS vars · 0 deps
The theme engine
One property, the whole system
Pick an accent or dial in your own. CULLET derives every tint, ring, fill and even the color-mesh behind the glass from a single HSL token, and guarantees legible text on any hue.
--accent
#7B7BFA
color-scheme
--radius16px
--glass-blur18px
resolved tokens
--accent#7B7BFA
--on-accent#FFFFFF
--accent-600—
--radius16px
--glass-blur18px
themedark
Contrast for --on-accent is recomputed live from the accent's
luminance, so labels stay AA-legible on any color you choose.
The kit, alive
Components that actually work
Real states: hover, press, focus, checked, error, loading. Every element below reacts, and every one re-tints the instant you change the accent above.
Toggles & controls /switch
Frosted surfacesbackdrop-filter
Reduced motionrespects OS setting
Segmented /tabs
Selected: week. Arrow keys move focus.
Status /badge
Live
Passing
Beta
v2.4.0
Inputs /field
Enter a complete email address.
Selects & text /select
Cards /card
Studio
yearly
$0 / forever
- All 48 components
- Unlimited themes
- Figma tokens sync
Overlays /dialog · /sheet
Native focus-trapped dialogs. Esc closes, focus returns to the trigger, backdrop blurs the mesh behind.
Release /list
Aurora 2.4
Stable
Recomputed on-accent contrast, added the side sheet, and thinned every hairline.
Foundations
The tokens underneath
The primitives every component is assembled from: a modular type scale, an 8-point spacing rhythm, three elevations of glass, and one accent that ramps into tints.
Type scale Sora · 1.25 ratio
Display
Heading
Subhead
Body, legible on glass.
--token: value;
Spacing 8-point grid
space-1 · 4px
space-2 · 8px
space-3 · 16px
space-4 · 24px
space-6 · 40px
space-8 · 64px
Elevation frosted glass
elev-1
elev-2
elev-3
Layered, negative-spread shadows, soft and physical, never a hard drop.
Accent ramp derived tints
300400500600700
Five steps computed from the live accent hue. Change it above and this ramp follows.