Building the Glass Design System

Glassmorphism is easy to do badly. A few backdrop-filter: blur(20px) calls on the wrong elements and your scroll performance tanks on anything slower than a desktop.

The constraints

We wanted: every card to have a frosted-glass look, smooth 60fps scrolling on mid-range mobile, and zero layout shift during page load.

The approach

Two CSS utility classes do all the heavy lifting:

• .glass-panel — 65% white, 20px blur, for large backgrounds
• .glass-card — 75% white, 24px blur, for content cards

Both are defined once in globals.cssand applied via Tailwind classes. We've banned inline backdrop-filter values — they fragment into dozens of unique computed styles, forcing the browser to allocate extra compositing layers.

Performance tradeoffs

backdrop-filter is expensive. We mitigate with three techniques:

• will-change: transform on animated cards promotes them to their own layer
• The animated background (3D tiles) is GPU-accelerated via transform: translateZ(0)
• @media (prefers-reduced-motion: reduce) kills all animations globally

Color tokens

Tailwind v4's @theme inline directive lets us declare tokens in CSS and reference them from Tailwind classes:

--color-bg: #fff1f2 becomes bg-bg in JSX. This keeps the design system in one file and means a token rename is a one-line change.