1) Primitive
Raw values only: color ramps, spacing, radius, type sizes, motion duration. No semantic intent.
This guide explains the architecture behind the DS Genie and why its output is stable at enterprise scale. You will learn how token layers reduce duplication, improve governance, and accelerate design-to-dev workflows.
Context: this is the logic used by the generator workflow on the main app. Read it before Step 2 if you need to align team conventions.
A robust token system separates responsibilities into four layers:
Raw values only: color ramps, spacing, radius, type sizes, motion duration. No semantic intent.
Light and dark behavior. Surface, text, and border mappings that preserve contrast rules per mode.
Intent layer per brand mode: primary action, success, warning, error, and neutral states.
Component aliases (button, input, list, tab) linked to semantics and theme, not directly to primitives.
Components mapped directly to raw values create fragile dependencies. One rebrand becomes a full UI rewrite.
Inconsistent naming and intent across squads makes governance impossible and slows release confidence.
| Generator Step | What You Decide | Architecture Impact |
|---|---|---|
| Step 1: Brand Count | How many brand modes you need | Defines semantic mode scalability |
| Step 2: Configure | Color, type, radius, advanced options | Builds primitive and semantic relationships |
| Step 3: Preview | Component groups and token behavior | Validates alias strategy before export |
| Step 4: Download | Plugin ZIP export | Creates deterministic Figma variables setup |
Use stable token paths and avoid visual-only names. Favor intent over appearance.
Keep contrast targets in token logic, not in manual component overrides.
Version token collections and review semantic changes like API changes.
Train teams on semantic usage patterns before scaling component libraries.
You can, but you will lose clean brand switching and increase maintenance cost over time.
No. Small teams benefit early because architecture debt grows fast without clear token layers.
Open DS Genie and apply this architecture in a real workflow. The output ZIP can be imported directly into Figma.
Open the plugin generator