Design Tokens

Design Tokens#

What are Design Tokens?#

Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application.

By defining style properties as tokens, we can transform the styles into various implementations compatible with different platforms or formats (e.g., transforming tokens to CSS variables, CSS utility classes, and eventually mobile).

Paragon uses style-dictionary to build design tokens into CSS variables.

Background & Motivation#

Design tokens debuted as the primary theming mechanism in the Ulmo release (January 2026), and was available for beta testing in the Open edX Teak release (June 2025).

Warning

There will be no overlap between the old SCSS-variable theming system and Design Tokens. Site operators must prepare migration strategies in advance.

Background reading: