Documentation
Token Types
This page is a reference for every token type the editor supports. For each type you will find the type identifier string, the valid value format or units, and a concrete example. Use this as a lookup when authoring tokens in JSON or reviewing what the editor accepts.
Most types hold a single scalar value: a color string, a number, a dimension with a unit. Four types (font-family, font-weight, line-height, letter-spacing) are primitive-only: they are valid in Base and Custom sections but cannot stand alone as a token set, because they only make sense as building blocks inside a typography token. Two types (border and typography) are compound: their value is an object composed of named sub-fields rather than a single string or number.
Color
colorFormats: hex, rgb, hsl, oklch — default: hexA color value in any of the four supported formats: hex, rgb(), hsl(), or oklch(). The default format in the editor is hex. All four formats resolve to the same output at publish time.
{
"color-brand": {
"$value": "#0066FF",
"$type": "color"
}
}Dimension
dimensionUnits: px, rem, em, %, vw, vh, ch, dvh, svh, lvh — default: pxA numeric value paired with a CSS length unit. Use this for spacing, sizing, and any layout value that takes a unit. Valid units: px, rem, em, %, vw, vh, ch, dvh, svh, lvh. Default unit is px.
{
"spacing-md": {
"$value": "16px",
"$type": "dimension"
}
}Number
numberNo unitA bare numeric value with no unit. Use this for scale multipliers, grid column counts, or any property that takes a plain number rather than a CSS length.
{
"grid-columns": {
"$value": 4,
"$type": "number"
}
}String
stringFree-form stringAn arbitrary text value. Use this for values that do not fit a more specific type, such as a CSS cursor keyword, a content string, or a named transition property.
{
"cursor-interactive": {
"$value": "pointer",
"$type": "string"
}
}Duration
durationUnits: ms, s — default: msA time value for animations and transitions. Valid units: ms, s. Default unit is ms.
{
"motion-fast": {
"$value": "200ms",
"$type": "duration"
}
}Cubic Bezier
cubic-bezierArray of four numbers: x1, y1, x2, y2An easing curve defined by four numbers: the x and y coordinates of the two control points (x1, y1, x2, y2). All four values must be present. The x values must be between 0 and 1.
{
"easing-standard": {
"$value": [0.4, 0, 0.2, 1],
"$type": "cubic-bezier"
}
}Shadow
shadowCSS box-shadow stringA CSS box-shadow string. To layer multiple shadows, separate them with commas inside a single string value.
{
"shadow-card": {
"$value": "0 2px 8px rgba(0,0,0,0.12)",
"$type": "shadow"
}
}Gradient
gradientCSS gradient stringA CSS gradient string. Accepts linear-gradient(), radial-gradient(), and conic-gradient() with any valid CSS gradient syntax.
{
"gradient-brand": {
"$value": "linear-gradient(135deg, #0066FF 0%, #00CCFF 100%)",
"$type": "gradient"
}
}Border Radius
border-radiusUnits: px, rem, em, % — default: pxA corner radius value with a unit. Valid units: px, rem, em, %. Default unit is px.
{
"radius-card": {
"$value": "8px",
"$type": "border-radius"
}
}Opacity
opacityNumber between 0 and 1A transparency value between 0 and 1. 0 is fully transparent, 1 is fully opaque.
{
"opacity-disabled": {
"$value": 0.5,
"$type": "opacity"
}
}Breakpoint
breakpointUnits: px, rem, em — default: pxA responsive viewport width. Valid units: px, rem, em. Default unit is px.
{
"breakpoint-md": {
"$value": "768px",
"$type": "breakpoint"
}
}Z-Index
z-indexInteger, no range enforcedA stacking order value. Use positive or negative integers. The editor does not enforce a range.
{
"layer-modal": {
"$value": 100,
"$type": "z-index"
}
}Aspect Ratio
aspect-ratioString in w/h formatA width-to-height ratio expressed as a string in the form w/h, for example 16/9 or 1/1.
{
"ratio-video": {
"$value": "16/9",
"$type": "aspect-ratio"
}
}Font Family
font-familyPrimitive onlyA CSS font-family value: a single typeface name or a comma-separated fallback stack. Primitive only -- valid in Base and Custom sections, but not as a standalone token set. Use inside a typography token for composing complete text styles.
{
"font-sans": {
"$value": "Inter, system-ui, sans-serif",
"$type": "font-family"
}
}Font Weight
font-weightPrimitive onlyA numeric font weight between 100 and 900. Primitive only -- use as a building block inside a typography token, or as a standalone base token for reference by alias.
{
"font-weight-semibold": {
"$value": 600,
"$type": "font-weight"
}
}Line Height
line-heightPrimitive onlyA line height value. Unitless values (such as 1.5) are preferred because they scale with the font size. You may also use a dimension string (such as 24px). Primitive only.
{
"line-height-body": {
"$value": 1.5,
"$type": "line-height"
}
}Letter Spacing
letter-spacingPrimitive onlyUnits: em, rem, px — default: emA character spacing value. Valid units: em, rem, px. Default unit is em. Primitive only.
{
"tracking-wide": {
"$value": "0.02em",
"$type": "letter-spacing"
}
}Border
borderCompoundA compound type composed of three required sub-fields: color (a color string), width (a dimension string), and style (a CSS border-style keyword such as solid or dashed). All three sub-fields must be present.
{
"border-focus": {
"$value": {
"color": "#0066FF",
"width": "2px",
"style": "solid"
},
"$type": "border"
}
}Typography
typographyCompoundA compound type that defines a complete text style. Five sub-fields are required: fontFamily (string), fontSize (dimension string), fontWeight (number), lineHeight (number or dimension string), and letterSpacing (dimension string). All five must be present. Alias any sub-field to a primitive token of the matching type to keep them in sync.
{
"text-body": {
"$value": {
"fontFamily": "Inter",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0em"
},
"$type": "typography"
}
}