SXL Studio
Tokens

Typography

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

Overview

typography is a composite that exports as a Figma text style. The rest are its individual parts — some export as variables, some are applied directly.

$typeExports asDefault scope
typographyText style—
fontFamilyVariable (STRING)FONT_FAMILY
fontWeightVariable (STRING)FONT_STYLE
fontSizeVariable (FLOAT)FONT_SIZE
lineHeightVariable (FLOAT)LINE_HEIGHT
letterSpacingVariable (FLOAT)LETTER_SPACING
paragraphSpacingVariable (FLOAT)PARAGRAPH_SPACING
paragraphIndentVariable (FLOAT)PARAGRAPH_INDENT
fontStyleInternal (applied)—
textCaseInternal (applied)—
textDecorationInternal (applied)—

Typography

A composite object; every key is optional and may be a literal or an alias to a matching token.

KeyType / values
fontFamilystring / alias
fontWeightstring or number / alias
fontStyleregular, italic, bold, bold italic, …
fontSizenumber / unit string / alias
lineHeightnumber / unit string / % / alias
letterSpacingnumber / unit string / % / alias
paragraphSpacingnumber / unit string / alias
paragraphIndentnumber / unit string / alias
textCasenone, uppercase, lowercase, capitalize, small-caps
textDecorationnone, underline, line-through
leadingTrim / verticalTrimCAP_HEIGHT, NONE
JSON
{
  "$type": "typography",
  "$value": {
    "fontFamily": "{fontFamily.sans}",
    "fontWeight": "{fontWeight.medium}",
    "fontSize": "{fontSize.body}",
    "lineHeight": "24px",
    "letterSpacing": "0px"
  }
}

Font Family

Exported as a STRING variable. Default scope FONT_FAMILY.

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

Font Weight

Exported as a STRING variable. Default scope FONT_STYLE. Accepts a numeric weight or a name.

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

Font Size

Exported as a FLOAT variable. Default scope FONT_SIZE.

JSON
{ "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } } }

Line Height

Exported as a FLOAT variable. Default scope LINE_HEIGHT. Accepts a length or a percentage.

JSON
{ "lineHeight": { "$type": "lineHeight", "tight": { "$value": "20px" }, "normal": { "$value": "150%" } } }

Letter Spacing

Exported as a FLOAT variable. Default scope LETTER_SPACING.

JSON
{ "letterSpacing": { "$type": "letterSpacing", "tight": { "$value": "-0.2px" }, "wide": { "$value": "0.5px" } } }

Paragraph Spacing

Exported as a FLOAT variable. Default scope PARAGRAPH_SPACING.

JSON
{ "paragraphSpacing": { "$type": "paragraphSpacing", "md": { "$value": "12px" } } }

Paragraph Indent

Exported as a FLOAT variable. Default scope PARAGRAPH_INDENT.

JSON
{ "paragraphIndent": { "$type": "paragraphIndent", "md": { "$value": "8px" } } }

Font Style

Applied directly (not exported as a variable/style). Combines emphasis and decoration.

Values: regular, italic, bold, bold italic, underline, line-through, none.

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

Text Case

Applied directly. Values: none, uppercase, lowercase, capitalize, small-caps.

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

Text Decoration

Applied directly. Values: none, underline, line-through.

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

Full example

JSON
{
  "fontFamily": { "$type": "fontFamily", "sans": { "$value": "Inter" } },
  "fontWeight": { "$type": "fontWeight", "regular": { "$value": 400 }, "medium": { "$value": 500 } },
  "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } },
  "typography": {
    "$type": "typography",
    "body": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.regular}", "fontSize": "{fontSize.body}", "lineHeight": "24px" }
    },
    "h1": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.medium}", "fontSize": "{fontSize.h1}", "lineHeight": "40px", "letterSpacing": "-0.5px" }
    }
  }
}