Color tokens
Each named color becomes its own entry under the color group, ready to map to CSS variables or platform-specific colors.
Add named colors, generate a spacing scale and a font-size scale, then export it all as a single design tokens JSON file.
Every token is written as an object with a value field, following a common convention used by design token pipelines, so the file stays easy to extend with extra metadata like descriptions later.
Each named color becomes its own entry under the color group, ready to map to CSS variables or platform-specific colors.
A linear scale numbered 1 upward, generated from your base pixel value and step count.
A geometric scale built from a base size and ratio, plus your chosen font family.
Plain JSON output means it can be consumed by build tools, style dictionaries, or read directly by your app.
Each token is written as an object with a value property, a common convention used by design token tools so extra metadata can be added later without breaking the structure.
Yes, use the add color row to create as many named color tokens as your project needs, and remove any you don't want.
It multiplies your base spacing value by 1, 2, 3 and so on up to your chosen step count, producing a simple linear scale.
It multiplies your base font size by your chosen ratio at each step, producing a geometric type scale.
Many design token pipelines can consume this JSON shape directly or with light transformation; check your specific tool's expected format if it differs.
More handy tools from My Panda Toolbox.