Playground

Visual QA matrix for themes, accent colors, hard shadows, and interactive states.

Toggle the canvas while checking contrast and shadow separation.

ARCADE ACCENTS

BLUE
YELLOW
PINK
GREEN
ORANGE
PURPLE

CONTROL STATES

Ready

Secondary

Disabled

Inputs

SEMANTIC TOKENS

Light

canvas
surface
surfaceRaised
text
textMuted
border
hardShadow
disabled
backdrop
focus
success
warning
danger
info
paper
paperAlt
paperBright
ink
inkSoft
pencil
accentYellow
accentBlue
accentRed
accentGreen
accentLavender

Dark

canvas
surface
surfaceRaised
text
textMuted
border
hardShadow
disabled
backdrop
focus
success
warning
danger
info
paper
paperAlt
paperBright
ink
inkSoft
pencil
accentYellow
accentBlue
accentRed
accentGreen
accentLavender