Design tokens

Design token overview

Design tokens are platform and technology agnostic variables. Tokens unify style across Print, Design tools, Web apps, Desktop apps, and Mobile apps. This is especially important in Pega, as many apps blend Native mobile elements with Web ones.

There are 4 types Design tokens.

  • Basic: Basic tokens are the raw design elements such as 'red', spacing scale (e.g. 8 pixel multiples), text sizes, or speed of an animation.
  • Meaningful: Meaningful tokens tie purpose to Basic tokens. A good example is “heading-2”, which uses both the Basic token of “font-size-l” and “font-weight-semibold”. Or "color-error" which relates back to the Basic token "red".
  • Component: Repeated component parts rely on Component tokens. Examples include: “input-border” or “button-border-radius”. They often use both Meaningful & Basic tokens.
  • Specific: All components have a set of specific tokens that define every element of styling from spacing to layout. They may use a combination of Basic, Meaningful, or Component tokens. Examples include "checkbox-border-radius" that may be be mapped to an existing Component token or use a fixed value.

Finally, some tokens are editable when customizing your apps, to allow for custom branding. Examples may include Meaningful tokens such as ‘brand-primary-color’ or changing Basic tokens, such as the default 'red' family.

Design token examples are coming soon.

Last updated: May 2020