Free Design Tokens Previewer
Paste or open a tokens JSON file to see colours, sizes and type, resolve aliases, and copy CSS or Sass.
What is a Design Tokens Previewer?
This design tokens previewer reads a tokens JSON file and shows its colours as swatches, sizes as bars, shadows on cards and fonts as type samples. It resolves aliases between tokens and exports the set as CSS custom properties, Sass variables or a flat JSON map.
It reads the Design Tokens Community Group format, with $value, $type inherited from groups, {group.token} aliases and object colours and dimensions, as well as Style Dictionary files and plain nested JSON. The check finds missing and circular aliases, values that don’t match their type, and names that collide once flattened.
Key Features
Visual Preview
Swatches, size bars, shadows and font samples, grouped by type.
Alias Resolution
{group.token} references followed to their final value.
CSS and Sass Export
Custom properties or Sass variables, with aliases kept as references.
Three File Shapes
Community Group format, Style Dictionary and plain JSON.
Token Checks
Broken aliases, wrong values and clashing names.
Perfect for everyone
- Design system teams
- Front-end developers
- Product designers and anyone handing tokens between design and code
How to Use the Design Tokens Previewer
Paste a tokens file or open one exported from a design tool or a token pipeline. The preview, exports and check all update together, so you can fix a value in the JSON and watch the swatch, the CSS and the check change at once.
Paste or Open
A tokens .json file in any of the three shapes.
Look Over the Preview
Colours, sizes, shadows and fonts drawn by type.
Export the Code
Copy CSS variables, Sass or flat JSON.
Run the Check
Fix broken aliases and mistyped values.
Token Files, Read
Each row is a token file of the kind design systems keep, from a full brand palette to files with broken aliases and a stray comma. Each answer is this tool’s CSS, Sass, flat JSON or check, aliases followed to their final values.
“{ "color": { "$type": "color", "blue": { "100": { "$value": "#dbeafe" }, "500": { "$value": "#3b82f6" }, "700": { "$value": "#1d4ed8" } }, "gray": { "50": { "$value": "#f9fafb" }, "900": { "$value": "#111827" } }, "text": { "$value": "{color.gray.900}", "$description": "Body text" }, "accent": { "$value": "{color.blue.500}" }, "shadow": { "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.15 } } }, "font": { "family": { "$type": "fontFamily", "sans": { "$value": [ "Inter", "system-ui", "sans-serif" ] } }, "weight": { "$type": "fontWeight", "regular": { "$value": 400 }, "bold": { "$value": "bold" } }, "size": { "$type": "dimension", "body": { "$value": { "value": 16, "unit": "px" } }, "heading": { "$value": { "value": 2, "unit": "rem" } } } }, "space": { "$type": "dimension", "sm": { "$value": "8px" }, "md": { "$value": "16px" }, "lg": { "$value": "32px" } }, "shadow": { "card": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px", "color": "{color.shadow}" } } }, "motion": { "ease": { "$type": "cubicBezier", "$value": [ 0.4, 0, 0.2, 1 ] }, "fast": { "$type": "duration", "$value": { "value": 150, "unit": "ms" } } } }”
“{ "color": { "base": { "red": { "value": "#e11d48", "type": "color" }, "white": { "value": "#ffffff", "type": "color" } }, "button": { "background": { "value": "{color.base.red}", "type": "color" }, "text": { "value": "{color.base.white}", "type": "color" } } }, "radius": { "button": { "value": "6px", "type": "dimension" } } }”
“{ "color": { "$type": "color", "ink": { "$value": "#1f2937" }, "paper": { "$value": "#ffffff" }, "text": { "$value": "{color.ink}" }, "background": { "$value": "{color.paper}" } } }”
“{ "spacing": { "xs": 4, "sm": "8px", "md": "16px" }, "brandColor": "#7c3aed", "borderRadius": "6px" }”
“{ "color": { "base": { "red": { "value": "#e11d48", "type": "color" }, "white": { "value": "#ffffff", "type": "color" } }, "button": { "background": { "value": "{color.base.red}", "type": "color" }, "text": { "value": "{color.base.white}", "type": "color" } } }, "radius": { "button": { "value": "6px", "type": "dimension" } } }”
“{ "text": { "$type": "typography", "heading": { "$value": { "fontFamily": [ "Inter", "sans-serif" ], "fontSize": { "value": 1.5, "unit": "rem" }, "fontWeight": "semi-bold", "lineHeight": 1.25, "letterSpacing": "0px" } }, "body": { "$value": { "fontFamily": "Georgia", "fontSize": "16px", "fontWeight": 400, "lineHeight": 1.6, "letterSpacing": "0px" } } } }”
“{ "color": { "$type": "color", "teal": { "$value": { "colorSpace": "oklch", "components": [ 0.7, 0.12, 190 ] } }, "scrim": { "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.5 } }, "white": { "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "hex": "#ffffff" } } } }”
“{ "color": { "$type": "color", "brand": { "$value": "#12345" }, "link": { "$value": "{color.primary}" }, "a": { "$value": "{color.b}" }, "b": { "$value": "{color.a}" } }, "spacing": { "small": { "$value": "4px" } } }”
“{ "color": { "brand": { "$value": "#0ea5e9", "$type": "color" }, } }”
“{ "fontSize": { "$type": "dimension", "body": { "$value": "16px" } }, "font-size": { "body": { "$type": "dimension", "$value": "18px" } } }”
Token Types
The $type on a token, or on any group above it, says what kind of value it holds and how it turns into CSS. These are the types the format defines, from single values to composites built from several parts.
color
A hex string or a colour object with a colour space and components.
“What does a colour object need?”
dimension
A size with a unit, as a string or an object such as value 16, unit px.
“Which units does it allow?”
fontFamily
One family name or a list of fallbacks.
“How is a list written in CSS?”
fontWeight
A number from 1 to 1000, or a name such as bold.
“What number is bold?”
duration
A time, such as 150 ms.
“Which type holds animation timing?”
cubicBezier
Four numbers for an easing curve.
“How many numbers?”
shadow
Offsets, blur, spread and colour, one shadow or a list.
“Can a shadow’s colour be an alias?”
typography
Family, size, weight, line height and letter spacing together.
“Which CSS property does it become?”
How Aliases Work
An alias is a token whose value is another token’s path in braces. Aliases are what make a token set maintainable: change a primitive once and every semantic token that points at it follows, in the preview and in the exported code.
Primitive Tokens
Raw values such as color.blue.500, named for what they are.
Semantic Tokens
Names for a purpose, such as color.text, pointing at a primitive.
Chains
An alias can point at another alias; the tool follows the chain to the end.
References in Exports
CSS uses var() and Sass uses $variables, so the link survives.
Resolved Values
Flat JSON swaps every alias for its final value.
The Three File Shapes
Token files come in a few shapes depending on the tool that wrote them, and this previewer reads all three without being told which one it’s looking at. The check’s first line says which shape it found, which helps when a file mixes styles after a partial migration.
Community Group Format
Tokens are objects with $value, and $type can sit on a group so every token inside inherits it. Keys starting with $ are metadata, never tokens.
Style Dictionary
The older shape uses value and type without the dollar sign, often with a comment field for descriptions.
Plain Nested JSON
Any string or number at the end of a path is a token, the quickest way to sketch a palette before adopting a format.
Token File Tips
Habits that keep a token file easy to read, review and export, whichever tool writes it and whichever team consumes it.
Set Types on Groups
A $type on a group applies to every token inside it.
Primitives, Then Semantics
Keep raw values in one group and purposes in another.
Name by Purpose
color.text outlasts color.dark-gray when the palette changes.
Describe the Odd Ones
$description explains tokens whose purpose isn’t obvious.
Check Before Merging
Run the check on every change to catch broken aliases.
Choosing an Export
Each export suits a different place in a codebase, and all of them come from the same tokens, so switching later costs nothing. Names are the token’s path in kebab case, which matches what most token pipelines produce.
CSS Custom Properties
One :root block, aliases kept as var() so a theme can override a single primitive at run time.
Sass Variables
One $variable per token for projects that compile styles, with aliases kept as Sass references.
Flat JSON
Every alias swapped for its final value, ready to import into JavaScript, a chart library or a native app.
Who Previews Tokens
Anyone handing design decisions between a design tool and code, or reviewing a change to them before it ships. A token diff is hard to judge as JSON, and much easier as a row of swatches.
Design System Reviews
See a pull request’s token changes as swatches.
Handoff
Turn exported tokens into CSS variables for developers.
Migrations
Move from Style Dictionary’s format to the newer one.
Theming
Check a dark theme’s aliases all point somewhere.
Documentation
Show a palette without building a docs site.
Token File Pitfalls
The mistakes that break a build or quietly ship the wrong colour, and how the check surfaces them. Most come from renaming or moving tokens by hand, so run the check after any reorganisation.
Renamed Targets
Renaming a token breaks every alias that pointed at it.
Alias Loops
Two tokens pointing at each other never get a value.
Name Collisions
fontSize and font-size both become --font-size.
Missing Types
Untyped tokens can’t be validated or exported reliably.
JSON Slips
Trailing commas and comments aren’t allowed in JSON.