Three export formats for brand tokens -- JSON, CSS custom properties, and Figma Token Studio v2

Token Exports

Brand Studio exports resolved tokens in three formats via pure functions in token-export.ts. All functions take a TokenWithInheritance[] array and a brand slug string, and return a download-ready string with no side effects.

import { toJSONTokens, toCSSVars, toFigmaTokensV2 } from "@/lib/token-export";
 
const json  = toJSONTokens(resolved, "prt");
const css   = toCSSVars(resolved, "prt");
const figma = toFigmaTokensV2(resolved, "prt");

JSON Tokens

toJSONTokens(resolved, brandSlug) produces a flat JSON object with metadata and a tokens map. Each token entry includes type-specific fields plus a type discriminator.

Output Structure

{
  "_brand": "prt",
  "_generated": "2026-04-18T12:00:00.000Z",
  "_total": 54,
  "tokens": {
    "brand_green": {
      "hex": "#548235",
      "rgb_r": 84,
      "rgb_g": 130,
      "rgb_b": 53,
      "type": "color"
    },
    "cap_natural": {
      "hex": "#548235",
      "rgb_r": 84,
      "rgb_g": 130,
      "rgb_b": 53,
      "type": "color"
    },
    "text_primary": {
      "hex": "#262626",
      "rgb_r": 38,
      "rgb_g": 38,
      "rgb_b": 38,
      "type": "color"
    },
    "heading_1": {
      "font_family": "Calibri Light",
      "font_size_pt": 20,
      "font_weight": 700,
      "context": "document",
      "type": "typography"
    },
    "body": {
      "font_family": "Calibri",
      "font_size_pt": 11,
      "font_weight": 400,
      "context": "document",
      "type": "typography"
    },
    "spacing-4": {
      "value_px": 16,
      "context": "default",
      "type": "spacing"
    },
    "page_margin_top": {
      "value_px": 72,
      "context": "page",
      "type": "spacing"
    }
  }
}

Token Entry Shapes by Type

Token Type	Fields
`color`	`hex`, `rgb_r`, `rgb_g`, `rgb_b`, `type`
`typography`	`font_family`, `font_size_pt`, `font_weight`, `context`, `type`
`spacing`	`value_px`, `context`, `type`

The resolvedValue is used for every token -- if a brand overrides a token, the override value appears; otherwise the global value appears. There is no indication in the JSON output of whether a token is overridden or inherited.

CSS Custom Properties

toCSSVars(resolved, brandSlug) produces a :root CSS block. Overridden tokens include a trailing /* overridden */ comment.

Output Structure

/* Brand: prt */
/* Generated: 2026-04-18T12:00:00.000Z */
/* Total tokens: 54 */
 
:root {
  --brand_amber: #C55A11;
  --brand_green: #548235;
  --brand_navy: #002060;
  --bright_green: #70AD47;
  --cap_built: #4472C4;
  --cap_financial: #C5192D;
  --cap_natural: #548235;
  --dark_teal: #063035;
  --gold: #DDA63A;
  --prt_green: #3F7E44; /* overridden */
  --text_primary: #262626;
  --surface_light: #F1F5F5;
  --unit_a: #548235;
  --unit_b: #C55A11;
  --unit_c: #002060;
  --body-family: "Calibri";
  --body-size: 11pt;
  --body-weight: 400;
  --heading_1-family: "Calibri Light";
  --heading_1-size: 20pt;
  --heading_1-weight: 700;
  --display-family: "F37 Jan";
  --display-size: 36pt;
  --display-weight: 700;
  --spacing-1: 4px;
  --spacing-4: 16px;
  --spacing-8: 32px;
  --page_margin_top: 72px;
  --table_cell_pad_lr: 8px;
}

Variable Naming Rules

The cssVarName() helper from @regen/design-tokens converts token names to CSS custom property names by prepending --. Underscores are preserved, not converted to dashes.

import { cssVarName } from "@regen/design-tokens";
 
cssVarName("brand_green");    // "--brand_green"
cssVarName("spacing-4");      // "--spacing-4"
cssVarName("heading_1");      // "--heading_1"

Type-Specific CSS Property Mapping

Token Type	CSS Properties Generated
Color	`--{token_name}: {hex};`
Typography	`--{token_name}-family: "{font_family}";` `--{token_name}-size: {font_size_pt}pt;` `--{token_name}-weight: {font_weight};`
Spacing	`--{token_name}: {value_px}px;`

Typography tokens expand into up to three CSS properties (family, size, weight). Properties with null or undefined values are omitted.

The /* overridden */ comment appears only on the first property for typography tokens (the -family line).

Figma Token Studio v2

toFigmaTokensV2(resolved, brandSlug) produces output compatible with the Token Studio Figma plugin (v2 format).

Output Structure

{
  "global": {
    "brand_green": {
      "$value": "#548235",
      "$type": "color"
    },
    "brand_amber": {
      "$value": "#C55A11",
      "$type": "color"
    },
    "cap_natural": {
      "$value": "#548235",
      "$type": "color"
    },
    "text_primary": {
      "$value": "#262626",
      "$type": "color"
    },
    "surface_light": {
      "$value": "#F1F5F5",
      "$type": "color"
    },
    "unit_a": {
      "$value": "#548235",
      "$type": "color"
    },
    "body": {
      "$value": "Calibri",
      "$type": "fontFamily"
    },
    "heading_1": {
      "$value": "Calibri Light",
      "$type": "fontFamily"
    },
    "display": {
      "$value": "F37 Jan",
      "$type": "fontFamily"
    },
    "spacing-1": {
      "$value": "4",
      "$type": "spacing"
    },
    "spacing-4": {
      "$value": "16",
      "$type": "spacing"
    },
    "spacing-24": {
      "$value": "96",
      "$type": "spacing"
    },
    "page_margin_top": {
      "$value": "72",
      "$type": "spacing"
    }
  }
}

Type Mapping

Brand Studio Type	Figma Token Studio `$type`	`$value` Format
`color`	`color`	Hex string (`#548235`)
`typography`	`fontFamily`	Font family name only (`Calibri Light`)
`spacing`	`spacing`	Numeric string without units (`16`)

Typography tokens export only the font family. Token Studio handles font size and weight as separate token types, so font_size_pt and font_weight are not included in this format.

Tokens with null or undefined critical fields (no hex for colors, no font_family for typography) are omitted from the output.

Download Pattern

The export page at /brands/[id]/export uses this browser download pattern for all three formats:

function downloadFile(content: string, filename: string, mimeType: string) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}
 
// Usage
downloadFile(toJSONTokens(resolved, slug), `${slug}-tokens.json`, "application/json");
downloadFile(toCSSVars(resolved, slug), `${slug}-tokens.css`, "text/css");
downloadFile(toFigmaTokensV2(resolved, slug), `${slug}-figma-tokens.json`, "application/json");

Full TypeScript Import Reference

// Export functions
import { toJSONTokens, toCSSVars, toFigmaTokensV2 } from "@/lib/token-export";
 
// CSS variable naming helper
import { cssVarName } from "@regen/design-tokens";
 
// Types used by export functions
import type {
  TokenWithInheritance,
  TokenColorValue,
  TokenTypographyValue,
  TokenSpacingValue,
} from "@regen/design-tokens";

Token Exports

On this page