Design System
CSS Variable Playground
Customize every design token in real time. Changes apply instantly across the entire site. Export your customized theme as CSS variables.
Primary Colors
Primary
#000a1e
Primary Container
#002147
On Primary
#ffffff
On Primary Container
#708ab5
Secondary Colors
Secondary
#bb0020
Secondary Container
#e32132
On Secondary
#ffffff
Surface Colors
Surface
#f8f9ff
Container Lowest
#ffffff
Container Low
#eef4ff
Container
#e5eeff
Container High
#dbe9ff
Container Highest
#d6e4f9
Surface Dim
#cddbf1
Text Colors
On Surface
#0e1c2c
On Surface Variant
#44474e
Utility Colors
Outline
#74777f
Outline Variant
#c4c6cf
Error
#ba1a1a
Inverse Surface
#243142
Typography
Headline Font
Body Font
Border Radius
XL (buttons/cards)
0.5rem
2XL (large cards)
0.75rem
3XL (sections)
1rem
Live Preview
CAS
AboutBlog
CTA
Dark Card
Primary container background with appropriate text colors.
ActionButtons
Chips
SelectedUnselectedFilter
Surface Hierarchy
Lowest
Low
Base
High
Highest