Design Playground
Live token reference for the ContentGlows 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 fluidHeading 1
--text-h2 fluidHeading 2
--text-h3 · 1.5remHeading 3
--text-lg · 1.25remLead / section subtitle
--text-base · 1remBody text — readable and comfortable at this size.
--text-sm · 0.875remMeta, small body, captions
--text-xs · 0.75remLABEL / BADGE
Spacing Scale
--space-10.25rem · 4px--space-20.5rem · 8px--space-30.75rem · 12px--space-41rem · 16px--space-51.25rem · 20px--space-61.5rem · 24px--space-82rem · 32px--space-102.5rem · 40px--space-123rem · 48px--space-164rem · 64px--space-205rem · 80px--space-246rem · 96pxBorder 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.12sHover me
--duration-fast · 0.15sHover me
--duration-base · 0.2sHover me
--duration-slow · 0.3sEasing
ease-standard
ease-out
ease-spring