This is the "Holy Grail" of design-to-code: The Multi-Tier Token System. By separating your Primitives (Colors) from your Semantics (Actions) and Components (Specific States), you create a system where you can change a single brand color and the entire UI updates instantly.
This is called a Language-Agnostic Data Structure. If you do this right, your design tokens become the "Brain" of your brand, and the tech stack (Next.js, Svelte, Swift, or Kotlin) is just the "Body."
The "Three-Layer" Hierarchy
To make this work across different stacks, you have to treat your tokens as Data, not code.
Source (Truth)
Usually a JSON file or a Figma Variable set. Example: "brand-primary": "#0061FF"
The Transform (Pipeline)
A tool (like Style Dictionary) takes that JSON and "translates" it for each platform.
The Output (Platform)
- Web: Generates a
:rootCSS file - iOS: Generates a
Color.swiftfile - Android: Generates an
colors.xmlor Compose Color.kt file