Get Started

Theming

Every surface reads from CSS variables. Swap five tokens to retheme the whole system — and use the live Tweaks panel to preview theme, accent, glass depth, background and specular.

Accent
Core tokens
:root {
  --accent: 76 184 128;     /* mellow green */
  --glass-bg: rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.14);
  --glass-hi: rgba(255,255,255,.32);
  --glass-depth: medium;        /* subtle | medium | strong */
}

Glass depth controls blur, refraction scale and dispersion spread together. Specular can be toggled per surface with specular={false}.

Live Tweaks
24px