Design Token Converter

Convert design tokens to CSS, SCSS, Tailwind, JSON, etc.

6 DESIGN TOKENS (W3C DTCG)

W3C Design Tokens JSON ($value, $type)

Multi-Platform Transformed Output

:root {
  --color-primary: #38bdf8;
  --color-background: #0f172a;
  --color-neon: #ec4899;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

$color-primary: #38bdf8;
$color-background: #0f172a;
$color-neon: #ec4899;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 2rem;

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'primary': '#38bdf8',
        'background': '#0f172a',
        'neon': '#ec4899',
      },
    },
  },
};

export const designTokens = {
  "color": {
    "primary": "#38bdf8",
    "background": "#0f172a",
    "neon": "#ec4899"
  },
  "spacing": {
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "2rem"
  }
} as const;

export type DesignTokens = typeof designTokens;