Skip to main content
Design Tokens Explorer renders a visual preview next to every token value in the sidebar. Previews are controlled by the type field of each group in your source configuration.

​
How previews work

When a token is loaded, it is assigned to a group based on name prefix. The group’s type determines which renderer is used. All rendering happens inline in the sidebar — no external services are called and no images are fetched. All CSS values are sanitized before rendering to prevent injection.

​
Preview types

​
Color

Group type: color Renders a filled square swatch using the token value as a CSS background-color. Accepts any valid CSS color: hex, rgb, hsl, named colors, oklch, color(), and CSS variables.
Token examples: --color-primary: #7C3AED, --color-surface: hsl(0 0% 98%)

​
Size / Spacing

Group type: size Renders a horizontal bar whose width is proportional to the token value. Values in rem are converted to px using rootFontSize before rendering, so the bar accurately reflects physical screen size.
Token examples: --space-4: 1rem, --space-8: 2rem, --gap-sm: 8px

​
Border Radius

Group type: radius Renders a small square with the token value applied as border-radius. Shows the visual rounding effect for px, rem, %, and other valid radius values.
Token examples: --radius-sm: 0.25rem, --radius-full: 9999px, --radius-pill: 50%

​
Font Size

Group type: font-size Renders a short text sample scaled to the token value. Values larger than a threshold are capped to prevent layout overflow in the sidebar.
Token examples: --font-size-sm: 0.875rem, --font-size-xl: 1.25rem, --font-size-4xl: 2.25rem

​
Font Weight

Group type: font-weight Renders a text sample at the token weight, helping you distinguish numerical weights like 400, 500, 600, 700, or 900 and named values like bold, light.
Token examples: --font-weight-normal: 400, --font-weight-semibold: 600, --font-weight-bold: 700

​
Line Height

Group type: line-height Renders two lines of sample text with the token value as line-height. Unitless multipliers (1.5), px, rem, and % values are all rendered correctly.
Token examples: --leading-tight: 1.25, --leading-normal: 1.5, --leading-relaxed: 1.75

​
Shadow

Group type: shadow Renders a small element with box-shadow applied, showing the blur, spread, color, and offset visually.
Token examples: --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1)

​
Easing

Group type: easing Renders an SVG cubic-bezier curve that visualizes the easing function. The curve is drawn from the control points extracted from the cubic-bezier(x1, y1, x2, y2) value.
Token examples: --easing-ease-in: cubic-bezier(0.4, 0, 1, 1), --easing-ease-out: cubic-bezier(0, 0, 0.2, 1), --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
Only cubic-bezier(...) values produce a curve. Other values like ease, linear, or steps() display as plain text.

​
Time / Duration

Group type: time Displays the duration value as plain text. No graphical preview — this keeps the value visible for tokens like --duration-fast: 150ms.
Token examples: --duration-fast: 100ms, --duration-base: 200ms, --duration-slow: 0.5s

​
Filter

Group type: filter Reserved for CSS filter values. Currently displays no preview — the raw value is shown as text.
Token examples: --filter-blur-sm: blur(4px), --filter-brightness-muted: brightness(0.9)

​
Configuring rem conversion

The size, radius, and font-size renderers convert rem values to pixels using designTokensExplorer.rootFontSize. The default is 16, matching the browser default. If your project uses a different base (e.g. 10px with html { font-size: 62.5% }), update the setting: