System Tokens

At this level, a specific collection of tokens is organized and selected from the options defined in the Global Tokens. Each token in this layer receives a unique name that identifies it and integrates it within the design system, facilitating reuse and consistency.

Tokens categories

In this layer, you will find the following tokens:

Colors

A selection of colors derived from the global tokens and named with an "Alias" for identification throughout the system. They are divided into categories as follows:

• Primary

  • Principal, subtle, off, high

• Complementary

  • Principal, subtle, off, high

• Neutral

  • Principal, subtle, off, high

• Info

  • High, low

• Succes

  • High, low

• Warning

  • High, low

• Danger

  • High, low

• Backgrounds

  • principal, secondary, tertiary, subtle, contrast, neutral

• Foregrounds

  • principal, secondary, tertiary, neutral, contrast, disabled

• Typography

  • Heading, paragraph, highlight, alternative, contrast, link, disabled.

• Borders

  • strong, neutral, disabled, alternative

• Transparency

  • primary, complementary, light, dark

Sizes

A selection of sizes derived from the global tokens, named using a standard sizing system similar to shirt sizes (xxs, xs, sm, md, ml, lg, xl, xxl), with xxs being the smallest and xxl the largest. These sizes are generally used for icons and graphic elements that require a fixed size

Spacing

A selection of sizes derived from the global tokens, named using a standard sizing system similar to shirt sizes (xxs, xs, sm, md, lm, ml, lg, xl, xxl, xxxl), with xxs being the smallest and xxxl the largest. These are used to define and generate the spaces between elements.

Border radius

A selection of sizes for the corners of rectangular elements, derived from the global tokens and named using a standard sizing system similar to shirt sizes (flat, xs, sm, md, lm, lg, xl, xxl, full), with "flat" being the least rounded and "full" representing a completely rounded corner.

Elevations

Shadows defined and configured to maintain a subtle and refined interface. They are named according to their intensity (soft, medium, high, extreme), with "soft" being the least intense and "extreme" the most intense.