Interactive Demo

Design Token Playground

Tweak the tokens on the left. The preview on the right rethemes in real time using CSS custom properties — the same architecture pattern used in Dimension (SVB) and Blocks (CBRE). Copy the generated CSS when you're done.

COLOR

--color-brand-primary

#3d7aed

--color-brand-accent

#88ccca

RADIUS

--radius-sm

4px

--radius-md

8px

--radius-lg

12px

SPACING

--space-2

8px

--space-4

16px

TYPE

--font-scale

1×

Live token preview

Every element below is styled with your token values. Tweak the controls and watch the result in real time.

Badge

Card component

Demonstrates spacing, radius, and color tokens together.

Generated CSS

This is the exact CSS custom property block produced by your current settings. Drop it into your :root and every component consuming these tokens will pick up the new values.

:root {
  /* color */
  --color-brand-primary:  #3d7aed;
  --color-brand-accent:   #88ccca;

  /* radius (4pt grid) */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* spacing */
  --space-2:    8px;
  --space-4:    16px;

  /* type scale multiplier */
  --font-scale: 1;
}

Why this playground exists

Design token systems are easy to draw in slides and hard to intuit in practice. A live playground like this makes the relationship between tokens and UI immediately visible — which is one of the fastest ways to align designers and engineers on why tokens matter. Pattern borrowed from the Dimension documentation approach.