Design tokens

Design system

Glass design tokens

Every glass surface in the app reads from these CSS variables. Change one value here and the whole product re-themes — no per-page tweaks.

Utility classes

Centralized utilities that consume these tokens

.glass.glass-strong.bento-tile.eyebrow-pill.cta-primary.cta-secondary.field-glass

Surface & border colors

--glass-bg

Default glass surface tint (alpha-on-white).

glassbento-tile

--glass-strong-bg

Strong glass surface tint for elevated cards.

glass-strong

--glass-border

Base glass border at rest.

glassbento-tilefield-glass

--glass-border-strong

Stronger glass border for the elevated variant.

glass-strong

--glass-border-hover

Brand-tinted border applied on hover.

glassbento-tile

Backdrop blur

--blur-glass

Backdrop blur radius for standard glass.

glassbento-tilefield-glasscta-secondary

--blur-glass-strong

Backdrop blur radius for elevated glass.

glass-strong

Shadows

--shadow-glass

Resting shadow for glass surfaces.

glassbento-tile

--shadow-glass-strong

Resting shadow for elevated glass.

glass-strong

--shadow-glass-hover

Brand-tinted hover shadow on glass.

glass

--shadow-bento-hover

Hover shadow on bento tiles (deeper lift).

bento-tile

--shadow-brand-cta

Glow shadow under primary brand CTA buttons.

cta-primary

Radii

--radius-bento

Corner radius for bento tiles.

bento-tile

--radius-tile

Corner radius for small glass tiles.

glassglass-strong

--radius-pill

Pill radius for eyebrow chips.

eyebrow-pill

Spacing

--space-section-y

Vertical padding for a Section block.

Section

--space-section-y-md

Vertical padding for Section on md+ breakpoints.

Section

--space-shell-x

Horizontal padding for the page shell container.

SectionSiteShell

--space-bento-gap

Gap between bento tiles at base breakpoint.

Bento grids

--space-bento-gap-lg

Gap between bento tiles at lg+ breakpoint.

Bento grids

Want to preview changes before editing tokens?

Open the floating settings button in the bottom-right corner.

Back to home