Theme Playground

Two live design references and shared controls. Explore both themes and screen sizes.

Home reference

Find your tools.Get back to work.

JSON, text and color tools. Right in your browser.

Explore all tools
JSON Formatter 
{
  "project": "onDevTools",
  "ready": true
}

Quick access

JSON FormatterPassword GeneratorGradient Generator

Tool reference

JSON Formatter

Format and validate your JSON.

Output

{
  "project": "onDevTools",
  "ready": true
}

Valid JSON

Advanced options

Control states

Examples of primary, secondary, destructive and disabled controls.

Brand Primary (HSL)

Typography Scale

Text XS

Text SM

Text Base

Text MD

Text LG

Text XL

Text 2XL

Text 3XL

Colors

PrimarySuccessWarningDanger

Elevation

1
2
3
4
5