Scale

A curated set of values made to work together. These are typically primtive tokens found in a single tier with a similar schema. Scale could also act as a level within a schema.

Example

color.red.100 = #FFCDD2
color.red.200 = #EF9A9A
color.red.300 = #E57373
color.red.400 = #EF5350
color.red.500 = #F44336
color.red.600 = #E53935
color.red.700 = #D32F2F
color.red.800 = #C62828
color.red.900 = #B71C1C

The above example expects a collection of red colors meant to be used within the organization. Each value assigned would be selected by a stakeholder with interest in the appropriate colors to be used within the organization. The final level increases in scale from 100 to 900 indicating the color’s darkness.

How the scale is made can also be programmtic through the use of an algorithm. For example, a font size scale can be created in the following way using CSS:

.text {
    font-size: calc(1rem * pow(1.125, var(--step)));
}

Where the custom property --step provides the step within the scale. With a --step: 2 would provide a final size of 1.27rem or 20.32px. In this example, the --step is the same as a person selecting which token of a scale to use without explicitly choosing a value. In other words, this would be similar to a person choosing a token named text.fontSize.2 which was assigned a value of 1.27rem.