Design System Glossary

Design tokens

Design tokens are the named, platform-agnostic values that power a design system — color.primary.500, space.4, font.size.body — defined once and consumed everywhere: Figma, web, iOS, Android, marketing site. They turn design decisions into data, which is what makes single source of truth actually work.

A modern token architecture has three tiers: reference tokens (raw values like blue-500), semantic tokens (purpose-bound, like color-action-primary) and component tokens (component-scoped, like button-bg-hover). Tools like Style Dictionary and Tokens Studio transform JSON token files into CSS, Swift, Kotlin and anything else you ship to. We've documented one full pipeline in automating design systems from Figma to production in Craft CMS.