Global scale
We use a spacing scale that builds upon a 4px baseline grid, with increments adjusting to larger values mid-scale. This approach helps minimize unnecessary decision-making when designing spatial relationships between elements.
Each platform can define its own semantic tokens while referencing one of our global values for features like density and breakpoint scaling. This ensures seamless integration with other design systems and frameworks used in the company.
Base tokens
Every spacing value is defined as combination of base, factor and a multiplier. These global primitives allow us to support multiple densities and store the scale formula inside each spacing token.
"density": {
"spacing": {
"2": {
"$type": "dimension",
"$value": "({density.spacing.base} * {density.spacing.factor}) * 0.125"
}
}
}