Design Token Reference

Complete reference of CSS custom properties prefixed with --gk- governing surfaces, blur, typography, and tones.

On this page:

All toastory components are styled using CSS Custom Properties prefixed with --gk-:

Token	Purpose	Example Value
`--gk-bg`	Translucent background surface color	`rgba(255, 255, 255, 0.72)`
`--gk-bg-solid`	Fallback background for older browsers	`#ffffff`
`--gk-fg`	Primary foreground text color	`#0a0a0c`
`--gk-muted`	Secondary subtitle text color	`#64748b`
`--gk-border`	Border color and divider lines	`rgba(255, 255, 255, 0.45)`
`--gk-radius`	Corner border radius	`20px`
`--gk-blur`	CSS backdrop-filter blur radius	`22px`
`--gk-saturate`	CSS backdrop-filter saturation multiplier	`180%`
`--gk-shadow`	Multi-layer drop shadow and inner highlights	`0 8px 32px rgba(0,0,0,0.12)`
`--gk-accent`	Primary action and button background	`#2563eb`
`--gk-accent-fg`	Text on top of accent background	`#ffffff`
`--gk-success`	Success badge and status tone	`#10b981`
`--gk-error`	Error badge and danger button background	`#ef4444`
`--gk-warning`	Caution and warning tone	`#f59e0b`
`--gk-info`	Informational tone	`#3b82f6`
`--gk-duration`	Spring transition duration	`0.38s`
`--gk-ease`	Spring cubic-bezier easing curve	`cubic-bezier(0.22, 1, 0.36, 1)`

Launch the interactive playground to experiment with themes, positions, and live generators.