Back to feed
Dev.to
Dev.to
7/7/2026
Why I stopped using design tokens as implementation details

Why I stopped using design tokens as implementation details

Short summary

Design tokens are decisions, not CSS variables — confusing the two creates systems that fail both designers and developers. A token like --color-accent answers 'what is this for?' while a primitive like --gray-200 answers 'what is this value?'. Tokens belong at the semantic layer and should remain stable even when their underlying implementation changes.

  • •Design tokens are semantic decisions, not raw CSS variable values
  • •Mapping Figma colors 1:1 to CSS variables produces implementation details, not tokens
  • •Tokens like --color-border-subtle encode purpose; primitives like --gray-200 encode values

Generated with AI, which can make mistakes.

Read full article at Dev.to

Is this a good recommendation for you?

Comments

Failed to load comments. Please try again.

Explore more

CSS Architecture That Actually Scales: Design Tokens, Custom Properties, and the Systems That Hold Up in Production
Dev.to
The original title is "Stop Hardcoding Hex #d9d9d9 In Your CSS"
Dev.to
UI Kernel treats design tokens as Symfony infrastructure
Dev.to
Even Figma isn't sure about its own design tokens
Dev.to