A personal developer's attempt to map design tokens to UnoCSS failed the same day. But it resulted in a set of pragmatic boundaries.

This article covers: quantified comparison between design tokens and atomic CSS, the real configuration of the failed UnoCSS mapping, pragmatic boundaries between CSS variables and atomic tools, and when to abandon atomic CSS.

I. Starting Point: I Have a Complete Design Token System

My personal project moongate-vue started with just three CSS files:

colors.css : Light/dark dual theme, 40+ semantic color variables (--ui-primary, --ui-bg-muted...)