Skip to main content

Tokens

Design tokens are a set of values for building and maintaining a design system, such as spacing, color, typography, component styles, and even animation. They can be used to represent various design elements, such as a HEX value for a color, a number for opacity, or Bezier coordinates for an animation ease. By using design tokens instead of hard-coded values, it ensures consistency and flexibility across all product experiences. Semantic design tokens are a powerful tool within Chameleon that enables us to bridge the gap when the already existing components cannot fulfill a specific design requirement. To ensure clarity and maintain a cohesive system, we follow a consistent naming convention for our semantic tokens. The naming convention accurately portrays the value and purpose of each token, making it easy to understand and use across different platforms. By naming tokens thoughtfully, we emphasize their purpose and facilitate their adoption in the design process.

Semantic colors​

Surface format

On top of all of our foundation tokens, Chameleon includes a set of semantic color tokens that employ the following naming scheme:

semantic-[surface]-[variant]-[state]-[modifier]-fill

This layer adds a semantic meaning, leading to a more effective use of color throughout your design.

A. Surfaces​

Our semantic color tokens define surfaces (highlighted in white in the examples below) that provide a specific assignment location for each token. A background color token refers to a value that is represented as an area behind the main content. The foreground token refers to any element at the front of a design. This can include elements such as typography and icons. Borders have their own specific semantic token.

B. Variants​

Surface variants refer to different visual styles applied to the user interface. The base variant typically adopts a mostly neutral color scheme. In contrast, the brand variant showcases the primary color associated with a particular brand, aiming to reinforce brand recognition and identity. The accent variant focuses on a highlighted scheme. Lastly, feedback colors are used to convey information or responses to user actions, such as success, warning or error messages. Surface variants utilise distinct foreground.on[Variant] tokens to meet contrast requirements efficiently (e.g. foreground.onAccent).

Variants

C. States​

Tokens can have two distinct surface states: adaptive and static.

  • static tokens hold a visual continuity by maintaining a consistent color.
  • adaptive tokens have the ability to shift between different color modes, allowing them to adapt to the contrast requirements of light and dark modes. This dynamic background token enables seamless color changes based on the specific needs of the environment.

States

D. Modifiers​

Surface modifiers play a crucial role in enhancing the versatility of surface variables by introducing a wider spectrum of shades. They effectively broaden the range of possibilities within a given set, offering options such as soft shades that closely resemble the default background color, muted shades with darker undertones, and even inverted variations.

Modifiers

Semantic typography​

Typography format

Analogic to our semantic color tokens, we employ the same principle for our semantic typography tokens. The naming scheme here is:

semantic-[type]-[?family]-[size]-[?weight]-typography

This layer adds a semantic meaning, leading to a more effective use of typography throughout your design.

A. Types​

From a point of hierarchy we defined 4 different types: display, headline, paragraph and caption.

  • display is used for the page title.
  • headline for every other title (h1 to h6).
  • paragraph is self-explanatory.
  • captions for smaller text.

B. Families​

In the types paragraph and caption, you can differentiate the font-family: the default (mainly used) or an alt (alternative). A display or headline token doesn't have this differentiation.

C. Sizes​

For headline tokens, there are 6 different sizes, going from 2xl (extra-extra-large) to xs (extra-small). In contrast, paragraph and caption tokens can only be lg (large) or sm (small).

D. Weights​

Text can be set in two different weights: default and strong (where strong means it’s bolder than the default weight).

Token Reference​