Design Tokens
A design engineering practice that abstracts visual decisions such as color, spacing, and font size into platform-agnostic named variables. Defined once, these tokens can be consumed across multiple platforms (Web, iOS, Android), forming core infrastructure for large-scale design systems.
Timeline (last 90 days)
In AI-assisted development, if design tokens are explicitly defined, Cursor will directly reference var(--color-primary) rather than hard-coding specific color values, thereby ensuring visual consistency; if tokens are missing, AI often repeatedly writes specific values in different files.
The design document was ultimately transformed into a design system, including design tokens, typography specifications, a color system (navy blue paired with a white background), and a component library.
Design tokens abstract visual decisions such as color, spacing, font size, corner radius, and shadows into named variables (such as color-primary corresponding to navy blue #1B2A4A); the core value is a 'single source of truth,' and modifying a token definition can automatically update all referencing components.
Design tokens are usually maintained in JSON or YAML format and then compiled into CSS variables, Sass variables, or platform-specific formats via tools such as Style Dictionary.
In professional front-end projects, colors are typically managed uniformly through design tokens or CSS variables, such as --color-primary or bg-blue-500.
Design token hierarchies are typically divided into global tokens, semantic tokens, and component tokens.
Design tokens are a mechanism for abstracting visual attributes (color, font size, spacing, border radius, shadows, etc.) into platform-agnostic key-value pairs.
The concept of design tokens was proposed by the Salesforce team in 2014 to solve the translation problem between design and development.
All Facts (8)
Design tokens are a mechanism for abstracting visual attributes (color, font size, spacing, border radius, shadows, etc.) into platform-agnostic key-value pairs.
60%UnverifiedDesign tokens abstract visual decisions such as color, spacing, font size, corner radius, and shadows into named variables (such as color-primary corresponding to navy blue #1B2A4A); the core value is a 'single source of truth,' and modifying a token definition can automatically update all referencing components.
50%UnverifiedThe design document was ultimately transformed into a design system, including design tokens, typography specifications, a color system (navy blue paired with a white background), and a component library.
50%UnverifiedIn AI-assisted development, if design tokens are explicitly defined, Cursor will directly reference var(--color-primary) rather than hard-coding specific color values, thereby ensuring visual consistency; if tokens are missing, AI often repeatedly writes specific values in different files.
50%UnverifiedDesign tokens are usually maintained in JSON or YAML format and then compiled into CSS variables, Sass variables, or platform-specific formats via tools such as Style Dictionary.
50%UnverifiedIn professional front-end projects, colors are typically managed uniformly through design tokens or CSS variables, such as --color-primary or bg-blue-500.
50%UnverifiedDesign token hierarchies are typically divided into global tokens, semantic tokens, and component tokens.
50%UnverifiedThe concept of design tokens was proposed by the Salesforce team in 2014 to solve the translation problem between design and development.
50%