Token types — SXL Studio Docs

Overview

SXL Studio supports 37 token types:

23 simple types (single value: color, number, string, boolean);
14 composite types (object/array value: typography, effects, fill, composition).

All types are declared via $type and normalized to canonical keys (DTCG + SXL aliases are supported).

Group map

Group	Types
Styles	`color`, `gradient`, `img`, `fill`, `opacity`
Dimension	`dimension`, `number`, `spacing`, `sizing`
Borders	`border`, `borderWidth`, `borderRadius`, `strokeStyle`
Typography	`typography`, `fontFamily`, `fontWeight`, `fontStyle`, `fontSize`, `lineHeight`, `letterSpacing`, `paragraphSpacing`, `paragraphIndent`, `textCase`, `textDecoration`
Effects	`shadow`, `backdrop-blur`, `blur`, `glass`, `effects`
Animation	`transition`, `duration`, `cubicBezier`
Other	`grid`, `boolean`, `text`, `template`, `composition`

Export channels

How to read:

Variable: exported by Export Variables.
Style: exported by Export Styles.
Internal only: used by Apply/Generate/Code workflows, not exported as a standalone Variable or Style.

`$type`	Export channel
`color`	Variable (`COLOR`)
`opacity`, `dimension`, `number`, `spacing`, `sizing`, `borderWidth`, `borderRadius`, `fontSize`, `lineHeight`, `letterSpacing`, `paragraphSpacing`, `paragraphIndent`	Variable (`FLOAT`)
`text`, `fontFamily`, `fontWeight`	Variable (`STRING`)
`boolean`	Variable (`BOOLEAN`)
`gradient`, `img`, `fill`	Paint Style
`shadow`, `blur`, `backdrop-blur`, `glass`, `effects`	Effect Style
`typography`	Text Style
`grid`	Grid Style
`border`, `strokeStyle`, `fontStyle`, `textCase`, `textDecoration`, `transition`, `duration`, `cubicBezier`, `template`, `composition`	Internal only

Full type map

`$type`	`$value` shape	Typical usage
`color`	CSS color string or `{ r, g, b, a? }`	UI colors
`gradient`	CSS gradient string, alias, or object with `stops`	Gradient fills
`img`	URL string/`url(...)`/image object	Image fills
`fill`	color/gradient/image string, object, or layers array	Multi-layer fills
`opacity`	number, `%`, alias	Layer opacity
`dimension`	number or unit string	Generic dimensions
`number`	number or numeric string	Generic numeric values
`spacing`	number or unit string	gap / padding spacing
`sizing`	number or unit string	width / height sizing
`border`	composite object (color/width/style/etc.)	Full stroke contract
`borderWidth`	number or unit string	Stroke thickness
`borderRadius`	number or unit string	Corner radius
`strokeStyle`	string/alias/object	Dash pattern + caps + joins
`shadow`	object/array/alias	Drop/inner shadows
`backdrop-blur`	number/unit/object	Background blur
`blur`	number/unit/object	Layer blur
`glass`	glass-effect object	Glass effect
`effects`	object/array/alias	Mixed effects style
`typography`	typography object or alias	Full text style
`fontFamily`	string	Font family
`fontWeight`	number/string	Font weight
`fontStyle`	string	Bold/italic/decoration semantic style
`fontSize`	number or unit string	Font size
`lineHeight`	number, `%`, unit string, alias	Line height
`letterSpacing`	number, `%`, unit string, alias	Letter spacing
`paragraphSpacing`	number or unit string	Paragraph spacing
`paragraphIndent`	number or unit string	Paragraph indent
`textCase`	string	Text transform
`textDecoration`	string	Underline/strikethrough
`transition`	shorthand string, object, or alias	Motion contract
`duration`	number/ms/s/alias	Timing duration
`cubicBezier`	string, array `[x1,y1,x2,y2]`, alias	Easing curve
`grid`	object/array/alias	Layout grids
`boolean`	boolean/string literal/alias	Visibility/flags
`text`	string	Text constants
`template`	template definition object	Style presets for Apply Template
`composition`	composition definition object	Component generation

Simple vs composite

Simple types (23)

color, dimension, sizing, spacing, borderRadius, borderWidth, opacity, number, fontFamily, fontWeight, fontStyle, fontSize, lineHeight, letterSpacing, paragraphSpacing, paragraphIndent, text, boolean, duration, cubicBezier, strokeStyle, textCase, textDecoration.

Composite types (14)

typography, shadow, blur, backdrop-blur, effects, glass, gradient, fill, img, grid, border, transition, template, composition.

Default scopes (simple types)

Type	Default scopes
`color`	`ALL_FILLS`, `STROKE_COLOR`, `EFFECT_COLOR`
`dimension`, `number`, `text`, `boolean`	`ALL_SCOPES`
`sizing`	`WIDTH_HEIGHT`
`spacing`	`GAP`
`borderRadius`	`CORNER_RADIUS`
`borderWidth`	`STROKE_FLOAT`
`opacity`	`OPACITY`
`fontFamily`	`FONT_FAMILY`
`fontWeight`	`FONT_STYLE`
`fontSize`	`FONT_SIZE`
`lineHeight`	`LINE_HEIGHT`
`letterSpacing`	`LETTER_SPACING`
`paragraphSpacing`	`PARAGRAPH_SPACING`
`paragraphIndent`	`PARAGRAPH_INDENT`

For full scope behavior and filtering rules, see Scopes & Code Syntax.

`$type` inheritance and aliases

Group inheritance

JSON
{
  "spacing": {
    "$type": "spacing",
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" }
  }
}

Common alias normalization

Raw `$type`	Canonical `$type`
`string`	`text`
`size`	`sizing`
`space`	`spacing`
`fontSizes`	`fontSize`
`fontWeights`	`fontWeight`
`boxShadow`	`shadow`
`backgroundBlur`, `backdropBlur`, `background-blur`	`backdrop-blur`
`layerBlur`	`blur`

Use canonical names in production token files.

Overview: Tokens overview
JSON format: Token JSON format
Styles: Color, Gradient, Image, Fill, Opacity
Dimension: Dimension, Number, Sizing, Spacing
Borders: Border, Border Width, Border Radius, Stroke Style
Typography: Typography and text tokens
Effects: Shadow, Blur, Glass, Effects
Animation: Duration, Cubic Bezier, Transition
Other: String, Boolean, Grid, Template
Composition: Composition — structure, props, styles

#Overview

#Group map

#Export channels

#Full type map

#Simple vs composite

#Simple types (23)

#Composite types (14)

#Default scopes (simple types)

#$type inheritance and aliases

#Group inheritance

#Common alias normalization

#Related pages