Design System 2.0

Crafted with
Liquid Glass

A next-generation design system built on glassmorphism principles — translucent surfaces, aurora gradients, and fluid interactions.

glassmorphism aurora-bg backdrop-filter css-variables live-controls

01 — Typography

Type Scale

Plus Jakarta Sans for display and body text. JetBrains Mono for code and labels.

9xl
800

Glass

--text-9xl

5xl
700

Frosted Light

--text-5xl

3xl
700

Aurora Gradient

--text-3xl

xl
600

Translucent Surface

--text-xl

base
400

The quick brown fox jumps over the lazy dog. Glassmorphism brings depth and clarity.

--text-base

sm
400

Small body text — used for captions, labels, and supporting information.

--text-sm

mono
400

const glass = { blur: 20, opacity: 0.08 };

--font-mono

Plus Jakarta Sans weights

Light 300

Regular 400

Medium 500

SemiBold 600

Bold 700

ExtraBold 800

JetBrains Mono samples

import { glass } from 'liquid'

// backdrop-filter: blur(20px)

const fx = glass.create({

blur: 20,

opacity: 0.08

})

02 — Buttons

Interactive Elements

Three button variants with glass effects, gradient fills, and fluid hover states.

Primary — Gradient fill

Outline — Glass border

Ghost — Transparent

State variants

03 — Cards

Surface Variants

Glass, frosted, and accent card surfaces with layered depth and interactive hover states.

Glass Card

Standard glass surface with backdrop blur and subtle white tint. Perfect for primary content containers.

glass • 20px blur default

Frosted Card

Heavy blur with saturation boost creates an icy frosted glass effect. Great for overlays and modals.

frosted • 40px blur frosted

Accent Card

Gradient-tinted glass surface with purple-to-pink accent. Use for featured or highlighted content.

accent • gradient featured

Feature cards

Aurora Background

Multi-color gradient mesh with animated blob elements.

Backdrop Filter

CSS blur and saturation applied to transparent layers.

CSS Variables

All design tokens controlled via live CSS custom properties.

Fluid Motion

Smooth transitions on all interactive elements with spring easing.

Layered Depth

Multiple elevation levels through opacity and blur stacking.

05 — Forms

Input Elements

Glass-styled inputs with focus glow, validation states, and smooth transitions.

Full Name

Email Address Valid email address

Password Password must be at least 8 characters

Framework

Message // max 500 characters

Enable glass effect globally

Reduce motion (accessibility)

Aurora background animation

High-performance blur (GPU)

06 — Colors

Palette & Gradients

Aurora-inspired color system with glass transparency levels and gradient combinations.

Core palette

Violet

#8B5CF6

Pink

#EC4899

Cyan

#06B6D4

Emerald

#10B981

Amber

#F59E0B

Red

#EF4444

Gradients

Aurora — Violet → Pink

Ocean — Cyan → Violet

Mint — Emerald → Cyan

Sunset — Amber → Red

Glass opacity scale

12%

18%

07 — Icons

Icon System

20 SVG icons with glass backgrounds. Hover for accent glow effect.

home

user

plus

bell

chat

heart

star

radio

monitor

layers

edit

trash

settings

map-pin

lock

log-out

upload

download