Skip to main content
dubinity

Design & Accessibility

Design Token Generator

Build a small design-token set - colours, type scale, spacing, radii and shadows - and export CSS variables, DTCG JSON or Tailwind.

  • Runs in your browser
  • Works on mobile
  • In: HEX, RGB, HSL, OKLCH
  • Out: CSS, JSON, Tailwind config
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Design Token Generator

Name your colours (or paste a list of hex codes), optionally expand each into a 50-950 scale, and add a type scale, a spacing scale, corner radii and a basic shadow set. The same tokens export as CSS custom properties, W3C Design Tokens Community Group JSON (the 2025.10 stable format or the older string format), a Tailwind v3 config or a Tailwind v4 @theme block.

It is a starter generator for a small system, not a token manager: there are no aliases, themes or modes. Your work is saved in this browser.

How to use it

  1. 1Add and name your colours, or paste a list to import them.
  2. 2Turn on the type scale, spacing, radii and shadows you need.
  3. 3Choose units, a variable prefix and the output format.
  4. 4Copy or download the tokens.

Questions

Was this tool helpful?

Related tools

All design tools

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Type Scale Generator

    Build a modular type scale from a base size and ratio, preview every step and export CSS, design tokens or Tailwind config.

    Base size · RATIO
    Runs in your browserOpen tool

  • Spacing Scale Generator

    Generate a spacing scale on a 4px or 8px grid, linear or geometric, with names and exports for CSS, tokens and Tailwind.

    Base unit
    Runs in your browserOpen tool

  • WCAG Palette Contrast Grid

    Paste up to 12 colours and see the WCAG contrast ratio of every pair in one grid, filtered by AA or AAA.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool