Style Dictionary export · PRO

Export any website as Style Dictionary tokens

Design Snap extracts a website's design tokens and exports them in the standard Style Dictionary v3 format — { value, type } pairs for color, dimension, fontFamily, fontWeight, boxShadow and typography — ready to drop into a Style Dictionary build config and generate CSS, iOS, Android or any other platform output.

Add to Chrome — it's free See PRO plans

Free plan · No account · 100% local analysis

How to export a website as Style Dictionary tokens

Turning a live website into a Style Dictionary token file takes three steps with Design Snap: extract the page's design tokens, switch the export to the standard format, and feed the result into your existing Style Dictionary build.

  1. Extract

    Open the website, click the Design Snap icon and press Extract. Colors, typography, radii and shadows are ranked by real usage in about a second.

  2. Switch to the standard format

    In the export panel, pick Style Dictionary (PRO) instead of the free simplified JSON to get the official { value, type } schema.

  3. Build with Style Dictionary

    Drop the file into a Style Dictionary config as a source, then run a build to output CSS variables, SCSS, iOS Swift, Android XML or Compose.

What the Style Dictionary export looks like

Every token follows the official Style Dictionary v3 schema: a value and a standard type. Typography is composed as a best-effort structure — headings ranked by decreasing font size become heading-1, heading-2… and the smallest text block on the page becomes body.

tokens.json Style Dictionary v3PRO
{
  "color": {
    "color-01": { "value": "#6366f1", "type": "color" },
    "color-02": { "value": "#ffffff", "type": "color" }
  },
  "spacing": {
    "spacing-01": { "value": "4px", "type": "dimension" },
    "spacing-02": { "value": "8px", "type": "dimension" }
  },
  "borderRadius": {
    "radius-01": { "value": "6px", "type": "dimension" }
  },
  "fontFamily": {
    "family-1": { "value": "Inter", "type": "fontFamily" }
  },
  "fontWeight": {
    "weight-1": { "value": "600", "type": "fontWeight" }
  },
  "boxShadow": {
    "shadow-1": { "value": "0 1px 3px rgba(0,0,0,0.1)", "type": "boxShadow" }
  },
  "typography": {
    "heading-1": {
      "value": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": "600" },
      "type": "typography"
    },
    "body": {
      "value": { "fontFamily": "Inter", "fontSize": "14px", "fontWeight": "600" },
      "type": "typography"
    }
  }
}

Values above come from a real extraction. Design Snap fills the schema with the tokens of the site you analyze.

Why the standard format matters

A simplified JSON is fine to eyeball a palette. A real design-token pipeline needs a schema that tools already understand — that's what the standard Style Dictionary export gives you.

  • Drops straight into an existing Style Dictionary config — no reshaping of keys or values
  • Six standard types covered: color, dimension, fontFamily, fontWeight, boxShadow and composite typography
  • Typography tokens composed automatically: headings ranked by decreasing size, the smallest block set as body
  • One JSON file, many platforms: Style Dictionary turns it into CSS, SCSS, iOS, Android, Compose and more
  • 100% local analysis — the pages you scan are never sent anywhere

Learn more about Style Dictionary

Style Dictionary is an open-source build system for design tokens, originally created at Amazon and now community-maintained. If you're new to it, these are the best places to start:

Style Dictionary export — FAQ

The free plan exports a simplified JSON with Design Snap's own shorthand types (fontSizes, fontFamilies…), handy for a quick look at a site's tokens. The PRO Style Dictionary export follows the official Style Dictionary v3 schema — every token is a { value, type } pair using standard types (color, dimension, fontFamily, fontWeight, boxShadow, typography) — so it can be fed straight into a Style Dictionary build config without any reshaping.

Colors ranked by real usage, spacing and border-radius values as dimension tokens, font families and weights, box-shadows, and a best-effort typography composition: headings are ranked by decreasing font size (heading-1, heading-2…) and the smallest text block on the page becomes body.

The standard Style Dictionary v3 export is a PRO feature (€3.99/month, €19.99/year or €49 lifetime), alongside the shadcn/ui and Tailwind v4 exports, real dark-mode extraction, the Design DNA card and unlimited snapshots. The free plan already includes a simplified Style Dictionary JSON export. See pricing.

Yes. The output matches the { value, type } token schema Style Dictionary expects, so you can drop the file into a source array in your config and run a build to generate CSS variables, SCSS, iOS Swift, Android XML, Compose or any other platform Style Dictionary supports.

Tailwind theme generator

Get a ready-to-paste tailwind.config.js or Tailwind v4 @theme from any site.

shadcn/ui theme generator

Map any site's palette to shadcn/ui semantic color roles.

Extract CSS variables

List every CSS custom property declared on :root of any website.

vs DevTools & CSS Peeper

How Design Snap compares to Chrome DevTools and CSS Peeper.