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. 
{ "name": "color", "type": "color" }
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. 
{ "name": "space", "type": "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. 
{ "name": "radius", "type": "radius" }
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. 
{ "name": "font-size", "type": "font-size" }
Token examples: --text-sm: 0.875rem, --text-xl: 1.25rem, --text-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. 
{ "name": "font-weight", "type": "font-weight" }
Token examples: --font-normal: 400, --font-semibold: 600, --font-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. 
{ "name": "leading", "type": "line-height" }
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. 
{ "name": "shadow", "type": "shadow" }
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. 
{ "name": "easing", "type": "easing" }
Token examples: --ease-in: cubic-bezier(0.4, 0, 1, 1), --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. 
{ "name": "duration", "type": "time" }
Token examples: --duration-fast: 100ms, --duration-base: 200ms, --transition-slow: 0.5s

​
Filter

Group type: filter Reserved for CSS filter values. Currently displays no preview — the raw value is shown as text. 
{ "name": "filter", "type": "filter" }
Token examples: --blur-sm: blur(4px), --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: 
"designTokensExplorer.rootFontSize": 10