Nutter Tools
Nutter Tools

A free toolbox that runs in your browser. A tool for every job.

Your files never leave your device

Images

  • Convert images
  • Compress images
  • Resize images
  • Crop
  • Watermark

PDF & files

  • Merge PDFs
  • Split a PDF
  • Images to PDF
  • PDF to images
  • Remove photo location

Video & audio

  • Compress video
  • Convert video
  • Video to GIF
  • Convert audio
  • Trim audio

Everyday

  • QR codes
  • Passwords
  • Time zones
  • Unit converter
  • Word count
  • Webcam test

Developer

  • JSON formatter
  • Base64
  • Regex tester
  • Hashes
  • JWT decoder

Site

  • About
  • Contact
  • Settings
  • Privacy
  • Terms
  • Site map
  • llms.txt

Everyday

  • Images
  • Video
  • Audio
  • PDF & files
  • Text
  • QR codes
  • Units & math
  • Time & dates
  • Color
  • Passwords & IDs
  • Device tests
  • Sun & moon

For developers

  • JSON
  • Encoding
  • Regex & cron
  • Web & auth
  • Hashing & encryption
  • Config files
  • Network
  • Browser
  • AI
  • Fake data
© Nutter Toolsnutter.tools
  1. Home
  2. Regex & cron
  3. Design Token Converter
Your files stay on your device

Design Token Converter

Read DTCG design tokens or CSS and SCSS variables and write them as CSS custom properties, SCSS, JS or TS objects, a Tailwind theme, or resolved DTCG JSON.

This tool is in beta

Still being tested. If a result looks wrong, tell us.

Report a problem

Paste tokens to convert them.

Alias references resolve recursively with cycle detection, and $type inherits from enclosing groups, with a token's own $type winning. The alias toggle applies to the CSS and SCSS outputs only; JS, TS, Tailwind and DTCG outputs are always resolved. Composite values (typography, shadows) become JSON text in CSS and SCSS, because those languages cannot express them directly. The Tailwind target buckets tokens by type into theme namespaces; an untyped token has no namespace and is reported instead of guessed. CSS and SCSS inputs carry no type, so the DTCG and Tailwind targets infer one from the value shape and say so in the report. SCSS references written as $other inside a value are left untouched; only DTCG-style{alias} references resolve.

Conversion

Convert toAlias references resolve into every target
DTCG JSON, CSS custom properties, or SCSS variables
CSS and SCSS outputs
Wraps the custom properties
Emit var(--x) instead of the resolved value
More settings▾

Up to 100,000 characters and 2,000 tokens per run. The prefix is a name segment, so it must start with a letter. The selector cannot contain semicolons or braces.

More regex & cron tools

  • JSON converter
  • Color converter & contrast
  • JSON formatter
All regex & cron tools

Was this tool useful?