About dimension tokens
Dimensions represent an amount of distance in a single dimension in the UI, such as a position, width, height, radius, or thickness. Rather than specifying these tokens separately, we use the single $type: “dimension“ string instead. When doing so, we also need to add unit of measurement inside the token value, f.e. “px” or “rem”.
We use a single dimension token type to represent distances in a UI element. This can include properties like position, width, height, radius, or thickness.
To specify these dimensions, you simply need to provide the value along with its unit of measurement (e.g., px for pixels or rem for relative units).
Default unit of measurement
To ensure flexibility across different operating systems and modern web browsers, we define all dimension tokens using relative units (rem). This approach allows our designs to adapt to various environments.
When exporting design tokens to other tools, values may be converted from rem to pixels based on the density and breakpoint being used. To make token names more readable, we've adopted a naming convention that incorporates the base density value. For example, spacing.8 would translate to 8px in default mode.