Skip to main content
TokensPlayground

Theme Playground

Tune the controls and watch the color palettes, type scale and a real component respond instantly — this runs the same token pipeline as configure(). When you're happy, copy the generated snippet at the bottom. See the Theming guide for the full API.

Start from a presetDefaultOceanForestBerryEditorialBrutalist
ControlsReset
Colors
Shape
Fonts
Preview
Light
Color palettes
Primary
50
100
200
300
400
500
600
700
800
900
Filled · on-color text
Subtle
Outlined
Secondary
50
100
200
300
400
500
600
700
800
900
Filled · on-color text
Subtle
Outlined
Typography
Type scale
4.5rem / 200Display 2XL
3.75rem / 200Display XL
3rem / 200Display LG
2.5rem / 600Heading 1
2rem / 600Heading 2
1.5rem / 600Heading 3
1.25rem / 600Heading 4
1.125rem / 600Heading 5
1rem / 600Heading 6
1.25rem / 400Lead
1rem / 400Body
0.875rem / 400Body SM
0.75rem / 400Caption
0.6875rem / 600 / uppercaseOverline
Components
Buttons
PrimarySecondaryNeutral
PrimarySecondaryNeutral
PrimarySecondaryNeutral
Badges and chips
primarysecondaryneutral
primarysecondaryneutral
Selection
Progress and slider
Inputs
TabsOverviewActivitySettingsOverviewActivitySettings
In context
Dark
Color palettes
Primary
50
100
200
300
400
500
600
700
800
900
Filled · on-color text
Subtle
Outlined
Secondary
50
100
200
300
400
500
600
700
800
900
Filled · on-color text
Subtle
Outlined
Typography
Type scale
4.5rem / 200Display 2XL
3.75rem / 200Display XL
3rem / 200Display LG
2.5rem / 600Heading 1
2rem / 600Heading 2
1.5rem / 600Heading 3
1.25rem / 600Heading 4
1.125rem / 600Heading 5
1rem / 600Heading 6
1.25rem / 400Lead
1rem / 400Body
0.875rem / 400Body SM
0.75rem / 400Caption
0.6875rem / 600 / uppercaseOverline
Components
Buttons
PrimarySecondaryNeutral
PrimarySecondaryNeutral
PrimarySecondaryNeutral
Badges and chips
primarysecondaryneutral
primarysecondaryneutral
Selection
Progress and slider
Inputs
TabsOverviewActivitySettingsOverviewActivitySettings
In context
Use this theme
ShareCopy