Export color themes and design tokens

1. Choose an output for your source

Generated color system

CSS, Tailwind, shadcn/ui, JavaScript, or Tokens. Choose Full color system to include Light and Dark roles, or Base palette only for a single shade group.

Imported CSS theme

Original CSS with targeted color edits. Keep your framework setup and other stylesheet rules in your project.

Imported SwatchSpring JSON

Original JSON with targeted edits to literal $value fields. Aliases, metadata, and unedited values are retained.

Figma swatches

SVG swatches from a generated palette. Drag the downloaded SVG into Figma and ungroup it to edit the vectors. This does not create native variables or variable modes.

Imported themes do not offer automatic conversion to the other framework formats. An original-source export and a generated framework snippet serve different workflows.

2. Preview and download

1. Open the editor and choose Export.
2. For a generated palette, choose the export scope, format tab, and color notation. Review the code before copying or downloading.
3. Choose Download theme for a file, or use the copy action for the displayed code. For SVG, choose Download SVG.
4. Check the result in your application. A snippet does not install a framework, wire up a theme provider, or replace your project’s complete configuration.

Use Full color system when you need both modes. A base-palette export cannot reconstruct semantic roles, state overrides, locks, or the workspace’s generator settings.

What is SwatchSpring token JSON?

The supported system shape uses themes.light and/or themes.dark, with optional palettes groups. Each editable color leaf has "$type": "color" and a supported string $value. A single base-palette group is also supported.

{
  "palettes": {
    "brand": {
      "500": { "$type": "color", "$value": "#234567" }
    }
  },
  "themes": {
    "light": {
      "primary": { "$type": "color", "$value": "{palettes.brand.500}" },
      "background": { "$type": "color", "$value": "#ffffff" },
      "text": { "$type": "color", "$value": "#222222" }
    }
  }
}

References such as {palettes.brand.500} point to an absolute source path. They do not mean “the current mode.” Edit the source literal to change an alias. Missing targets and circular references are rejected.

This is SwatchSpring’s bounded color-token format, not a universal importer for DTCG or Tokens Studio files. Structured color objects and inherited group types are not editable in this format. Missing modes use labeled preview defaults rather than adding new tokens to the export.

What survives an import and export?

Imported source is retained with targeted edits. JSON edits replace only edited literal value ranges with HEX strings. CSS edits keep names and aliases, with legacy HSL channel notation preserved. Unedited content stays in the source; text entered through a browser textarea may have normalized line endings.

Source exports do not include editor locks, version history, or all workspace settings. Use saved projects to revisit the workspace. If you reimport an exported file, inspect the mappings and locks again before running contrast repairs.