SXL Studio
Tokens

Typography

Typography group token types: typography, font, spacing, and text-format tokens — keys, values, and examples.

Typography tokens control text family, weight, metrics, and formatting.

Typography (composite)

typography bundles multiple text properties into one token.

Export: Text Style.

Typography object keys

KeyTypeNotes
fontFamilystringliteral or alias
fontWeightnumber/stringliteral or alias
fontStylestringoptional italic/style hint
fontSizenumber/stringpx/rem/em/%/alias
lineHeightnumber/stringsupports %, auto, normal, aliases
letterSpacingnumber/stringsupports % and aliases
paragraphSpacingnumber/stringparagraph spacing
paragraphIndentnumber/stringfirst-line indent
textCasestringnone, uppercase, lowercase, capitalize, small-caps
textDecorationstringnone, underline, line-through
verticalTrim / leadingTrimstringcap-height/CAP_HEIGHT or none/NONE

All keys are optional. Include only what you need.

Composite example

JSON
{
  "typography": {
    "heading-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.sans}",
        "fontWeight": "{fontWeight.bold}",
        "fontSize": "40px",
        "lineHeight": "120%",
        "letterSpacing": "-1%",
        "paragraphSpacing": "0px",
        "textCase": "none",
        "textDecoration": "none",
        "verticalTrim": "cap-height"
      }
    }
  }
}

Notes:

  • lineHeight: "auto" and lineHeight: "normal" map to Figma AUTO line-height.
  • % line-height/letter-spacing is preserved as PERCENT when applied to text nodes.
  • In composite typography, omitting paragraphSpacing/paragraphIndent resets them to 0 on apply.

Font Family

fontFamily stores the family name.

Export: Variable (STRING), scope FONT_FAMILY.

JSON
{
  "fontFamily": {
    "$type": "fontFamily",
    "sans": { "$value": "Inter" },
    "serif": { "$value": "Merriweather" },
    "mono": { "$value": "JetBrains Mono" }
  }
}

Font Weight

fontWeight stores weight semantics.

Export: Variable (STRING), scope FONT_STYLE.

JSON
{
  "fontWeight": {
    "$type": "fontWeight",
    "regular": { "$value": 400 },
    "medium": { "$value": 500 },
    "semibold": { "$value": 600 },
    "bold": { "$value": "700" },
    "bold-italic": { "$value": "700 italic" }
  }
}

Normalization:

  • numeric values are normalized to canonical names (600 -> Semi Bold),
  • aliases/casing variations are normalized (semiBold, Semi-Bold, semibold),
  • italic suffix is preserved when supported by the resolved font family.

Font Size

Export: Variable (FLOAT), scope FONT_SIZE.

JSON
{
  "fontSize": {
    "$type": "fontSize",
    "xs": { "$value": "12px" },
    "sm": { "$value": "14px" },
    "md": { "$value": "16px" },
    "lg": { "$value": "20px" }
  }
}

Line Height

Export: Variable (FLOAT), scope LINE_HEIGHT.

JSON
{
  "lineHeight": {
    "$type": "lineHeight",
    "tight": { "$value": "120%" },
    "normal": { "$value": "140%" },
    "loose": { "$value": "28px" },
    "auto": { "$value": "auto" }
  }
}

Letter Spacing

Export: Variable (FLOAT), scope LETTER_SPACING.

JSON
{
  "letterSpacing": {
    "$type": "letterSpacing",
    "tight": { "$value": "-1%" },
    "normal": { "$value": "0px" },
    "wide": { "$value": "0.4px" }
  }
}

Paragraph Spacing

Export: Variable (FLOAT), scope PARAGRAPH_SPACING.

JSON
{
  "paragraphSpacing": {
    "$type": "paragraphSpacing",
    "none": { "$value": "0px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" }
  }
}

Paragraph Indent

Export: Variable (FLOAT), scope PARAGRAPH_INDENT.

JSON
{
  "paragraphIndent": {
    "$type": "paragraphIndent",
    "none": { "$value": "0px" },
    "md": { "$value": "24px" }
  }
}

Font Style (apply-only)

fontStyle is an apply-only text-format token (not exported as Variable/Style).

Common values: regular, italic, bold, bold italic, underline, line-through, none.

JSON
{
  "fontStyle": {
    "$type": "fontStyle",
    "reset": { "$value": "none" },
    "emphasis": { "$value": "bold italic" },
    "link": { "$value": "underline" }
  }
}

Note: standalone fontStyle behavior can vary depending on the plugin version.

Text Case (apply-only)

textCase is apply-only (direct apply).

JSON
{
  "textCase": {
    "$type": "textCase",
    "none": { "$value": "none" },
    "upper": { "$value": "uppercase" },
    "lower": { "$value": "lowercase" },
    "title": { "$value": "capitalize" }
  }
}

Text Decoration (apply-only)

textDecoration is apply-only (direct apply).

JSON
{
  "textDecoration": {
    "$type": "textDecoration",
    "none": { "$value": "none" },
    "underline": { "$value": "underline" },
    "strike": { "$value": "line-through" }
  }
}

Full example

JSON
{
  "fontFamily": {
    "$type": "fontFamily",
    "sans": { "$value": "Inter" },
    "mono": { "$value": "JetBrains Mono" }
  },
  "fontWeight": {
    "$type": "fontWeight",
    "regular": { "$value": 400 },
    "semibold": { "$value": 600 },
    "bold": { "$value": 700 }
  },
  "fontSize": {
    "$type": "fontSize",
    "sm": { "$value": "14px" },
    "md": { "$value": "16px" },
    "xl": { "$value": "24px" }
  },
  "lineHeight": {
    "$type": "lineHeight",
    "body": { "$value": "140%" },
    "display": { "$value": "120%" }
  },
  "typography": {
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.sans}",
        "fontWeight": "{fontWeight.regular}",
        "fontSize": "{fontSize.md}",
        "lineHeight": "{lineHeight.body}",
        "letterSpacing": "0px"
      }
    },
    "code": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.mono}",
        "fontWeight": "{fontWeight.regular}",
        "fontSize": "{fontSize.sm}",
        "lineHeight": "140%"
      }
    }
  }
}