Theming & Design System Overview
Learn how toastory powers Apple frosted glass with 21 themes, CSS custom properties, and solid fallbacks.
toastory is built from the ground up around CSS Custom Properties prefixed with --gk-. Every component consumes these tokens scoped to [data-gk-theme=".
21 Distinct Visual Presets
1. ios-glass: Authentic Apple frosted glass with specular highlight borders and 22px physical blur. 2. liquid-glass: Fluid optical refraction with chromatic edge glows. 3. aurora: Northern lights gradient ribbons with deep translucent darks. 4. essentials: Clean, refined neutral glass suitable for enterprise SaaS dashboards. 5. showcase: Expressive highlights and deep multi-layer drop shadows. 6. classic-stack: Sonner-style minimal borders and compact elevations. 7. classic-bar: Full-bleed accent indicator bars. 8. pill: Dynamic Island capsule geometry. 9. ripple: Animated edge gradient pulses. 10. gradient-strip: Vibrant linear gradient header strip. 11. sweet: Candy pastel palettes with soft shadows. 12. material: Material Design 3 elevation and tonal containers. 13. basic: Minimalist monochrome styling. 14. minimal: Ultra-thin borders and translucent surfaces. 15. flat: High-contrast solid flat colors. 16. outline: Crisp borders with transparent background. 17. neon: Cyberpunk glowing neon borders. 18. gradient: Rich mesh gradient backdrops. 19. brutal: Neo-brutalist black borders and hard drop shadows. 20. pastel: Soft soothing muted tones. 21. dialogs: High-contrast modal theme for alerts and confirmations.
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.