This level serves as the foundation of the system, containing all available element and value options. These tokens represent the most fundamental configurations that can be applied anywhere within the design system.
Tokens categories
In this layer, you will find the following types of tokens:
Colors
Color schemes are organized into two tonal palettes, each ranging from 100 to 600, where 100 is the lightest tone and 600 the darkest. This means that each palette contains six tones. The goal is to promote consistency in the design system by limiting the number of options
Additionally, there are four supplementary palettes designed for neutral and generic use cases.
Sizes
A series of universally standardized sizes, defined as multiples of 2, increasing in scale from 0 to 240. These values determine dimensions and spacing within the design system.
Border radius
A series of universally standardized sizes, defined as multiples of 2, increasing in scale from 0 to 100. These values determine the corner rounding of each rectangular element in the design system.
Font families
16 carefully selected complete font-families to ensure readability and variation. The recommendation is to use a maximum of two families—one for headings and another for body text. However, ideally, a single family should be used for the entire system.
Font variations
A series of options for typography variations, such as size, weight, and line spacing. To configure the size, we recommend using the Base and Scale methodology explained in the documentation.
