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)
For simple style adjustments, ilse uses the project's own design tokens rather than generating arbitrary pixel values.
The Landing Page Design Skill isolates fonts, colors and spacing in a separate block, and modifying these variables propagates synchronously across the entire page.
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.
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.
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 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.
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 (10)
Design tokens are a mechanism for abstracting visual attributes (color, font size, spacing, border radius, shadows, etc.) into platform-agnostic key-value pairs.
60%UnverifiedFor simple style adjustments, ilse uses the project's own design tokens rather than generating arbitrary pixel values.
50%UnverifiedThe Landing Page Design Skill isolates fonts, colors and spacing in a separate block, and modifying these variables propagates synchronously across the entire page.
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%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%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%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 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%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%