What’s the difference between style tokens and design tokens?
Style tokens are named visual properties like colors, font sizes, or spacing values used in design tools to ensure consistency. For example, PrimaryColor = #1A73E8 or SpacingSmall = 8px.
Design tokens take this a step further—they’re platform-agnostic variables that store these styles in a way that can be translated into code for web, iOS, Android, or other platforms. They’re structured for automation, versioning, and cross-platform delivery.
In short:
Style tokens = visual values in design tools
Design tokens = style tokens + structure for code integration
Tools like Style Dictionary help manage design tokens at scale. They’re a core part of making your design system scalable, consistent, and developer-friendly.