Design Tokens

The Rewards Design System is based on consistent palettes of colour, typography, layout or spacing units, and other discrete elements of style we call design tokens.

Introducing Design Tokens

Anything we see on a website or web app is built from elements of style: elements like colour, spacing, typography, line height, elevation (use of shadows) and more. The CSS rules associated with these elements can accept a broad continuum of values — in the case of colour, there are over 16 million separate colors in the RGB color space. Font size, line height, spacing, and others can accept a similarly wide range of values.

This degree of choice can slow down design work and make communication between designer and developer unnecessarily granular. The Rewards Design System seeks to maximise design efficiency and improve communication with design tokens: the discrete palettes of values from which we base all our visual design.

Design tokens are a limited set of discrete options, just like a scale of musical notes is drawn from the spectrum of all possible frequencies. Or like the presets on a car radio — not every option, just a specific selection.