Light Mode ยท Color Sandbox
Change your 8 CSS variables once and see the entire page update. This page uses a light background to stress-test contrast and hierarchy.
This is a link
and here is some more text to check line height.
Buttons
Primary Button
Secondary Button
Ghost Button
Cards
Neutral
Surface Card
Use this to verify borders, surface color, and body text legibility.
Learn more
Accent
Accent Emphasis
Check accent usage and balance. Make sure it doesn't overpower the primary color.
Call to action
Typography
H1 Heading
Body text with
a link
to check link color and underline style.
H2 Heading
Muted text uses
--color-text-light
. Tweak just one variable to adjust all secondary text.
H3 Heading
Ensure readable contrast on
Background
and on
Surface
.
Footer Contrast Test
Inverse Section
Simulates dark-on-light inversion (e.g., a dark footer). Check button clarity.
Ghost on Dark