Token Types
DTCG token types fall into two categories: primitive types (single values) and composite types (structured objects combining primitives). Color tokens have their own spec module; all other types live in the format module.
Primitive Types
Section titled “Primitive Types”A color value in a given color space. Component ranges depend on the color space (e.g. sRGB uses 0—1 per channel; HSL uses 0—360 for hue and 0—100 for saturation/lightness).
{ "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0.4, 0.8], "alpha": 1 }}Supported color spaces: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, hsl, hwb, lab, lch, oklab, oklch, xyz-d50, xyz-d65. The alpha property is optional and defaults to 1. An optional hex property can provide a 6-digit CSS hex fallback (e.g. "#ff00ff"). Individual components may also be the string "none" to indicate a missing or powerless component (e.g. hue in an achromatic color).
dimension
Section titled “dimension”A numeric value with a unit. Supports px and rem.
{ "$type": "dimension", "$value": { "value": 16, "unit": "px" }}fontFamily
Section titled “fontFamily”A font family name or fallback stack.
{ "$type": "fontFamily", "$value": ["Inter", "sans-serif"]}fontWeight
Section titled “fontWeight”Font weight as a number (1—1000) or named string (e.g. thin, normal, bold, extra-bold).
{ "$type": "fontWeight", "$value": "bold"}duration
Section titled “duration”A time duration in milliseconds or seconds.
{ "$type": "duration", "$value": { "value": 200, "unit": "ms" }}cubicBezier
Section titled “cubicBezier”A cubic Bezier curve defined by four control points.
{ "$type": "cubicBezier", "$value": [0.25, 0.1, 0.25, 1]}number
Section titled “number”A plain numeric value without units.
{ "$type": "number", "$value": 1.5}Composite Types
Section titled “Composite Types”shadow
Section titled “shadow”A box shadow. Use an array for multiple shadows. The optional inset property (default false) controls whether the shadow renders inside the element as an inner shadow.
{ "$type": "shadow", "$value": { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 4, "unit": "px" }, "blur": { "value": 8, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.25 }, "inset": true }}typography
Section titled “typography”A combination of font properties.
{ "$type": "typography", "$value": { "fontFamily": ["Inter", "sans-serif"], "fontSize": { "value": 16, "unit": "px" }, "fontWeight": 600, "lineHeight": 1.5, "letterSpacing": { "value": 0.16, "unit": "rem" } }}border
Section titled “border”Border color, width, and style.
{ "$type": "border", "$value": { "color": { "colorSpace": "srgb", "components": [0, 0.4, 0.8] }, "width": { "value": 1, "unit": "px" }, "style": "solid" }}strokeStyle
Section titled “strokeStyle”Stroke configuration for vectors. Can be a string or an object with dashArray and lineCap.
{ "$type": "strokeStyle", "$value": { "dashArray": [ { "value": 4, "unit": "px" }, { "value": 2, "unit": "px" } ], "lineCap": "round" }}transition
Section titled “transition”Animation transition properties.
{ "$type": "transition", "$value": { "duration": { "value": 200, "unit": "ms" }, "delay": { "value": 0, "unit": "ms" }, "timingFunction": [0.25, 0.1, 0.25, 1] }}gradient
Section titled “gradient”A gradient defined by color stops.
{ "$type": "gradient", "$value": [ { "color": { "colorSpace": "srgb", "components": [0, 0.4, 0.8] }, "position": 0 }, { "color": { "colorSpace": "srgb", "components": [0, 0.8, 0.4] }, "position": 1 } ]}