Design Playground
Live token reference for the ContentGlowz design system. All values sourced from Layout.astro :root.
Color Tokens
Brand
--color-primary#3b82f6
--color-primary-dark#2563eb
--color-secondary#8b5cf6
--color-accent#06b6d4
Neutral
--color-dark#0f172a
--color-gray#64748b
--color-light-gray#f1f5f9
--color-light-blue#dbeafe
--color-white#ffffff
Support
--color-badge-bg#fef3c7
--color-code-text#e2e8f0
Gradient preview
Typography Scale
--text-h1 fluid Heading 1
--text-h2 fluid Heading 2
--text-h3 · 1.5rem Heading 3
--text-lg · 1.25rem Lead / section subtitle
--text-base · 1rem Body text — readable and comfortable at this size.
--text-sm · 0.875rem Meta, small body, captions
--text-xs · 0.75rem LABEL / BADGE
Spacing Scale
--space-1 0.25rem · 4px --space-2 0.5rem · 8px --space-3 0.75rem · 12px --space-4 1rem · 16px --space-5 1.25rem · 20px --space-6 1.5rem · 24px --space-8 2rem · 32px --space-10 2.5rem · 40px --space-12 3rem · 48px --space-16 4rem · 64px --space-20 5rem · 80px --space-24 6rem · 96px Border Radius
sm8px
md12px
lg16px
xl20px
2xl28px
pill9999px
Shadows / Elevation
shadow-sm
shadow-card
shadow-card-hover
shadow-card-lg
shadow-primary
shadow-primary-hover
Motion
Hover me
--duration-instant · 0.12s Hover me
--duration-fast · 0.15s Hover me
--duration-base · 0.2s Hover me
--duration-slow · 0.3s Easing
ease-standard
ease-out
ease-spring