TemplateFREE⏱️ 3-5 hours
Design Token Template for Product Managers
A design token documentation template covering color, spacing, typography, elevation, and motion tokens.
Updated 2026-03-05
Design Token
| # | Item | Category | Priority | Owner | Status | Notes | |
|---|---|---|---|---|---|---|---|
| 1 | |||||||
| 2 | |||||||
| 3 | |||||||
| 4 | |||||||
| 5 |
#1
#2
#3
#4
#5
Edit the values above to try it with your own data. Your changes are saved locally.
Get this template
Choose your preferred format. Google Sheets and Notion are free, no account needed.
Frequently Asked Questions
Should I use pixel values or rem for spacing and typography tokens?+
Define token values in pixels for clarity in documentation and Figma. Output rem in CSS for accessibility (users who increase browser font size get proportionally larger spacing and text). Your build tool (Style Dictionary) can handle this conversion. Store the canonical value in pixels and transform per platform.
How many tokens is too many?+
If you have more than 200 semantic tokens, the system is over-specified. Engineers will not remember the difference between `space-stack-md` and `space-stack-default`. Aim for 100-150 semantic tokens. If a new token would be used in fewer than 3 places, it probably does not need to exist as a token. Use the component tier for one-off overrides instead.
How do I handle tokens for multiple themes (light, dark, brand variants)?+
Use the semantic tier. Primitives stay the same across themes. Semantic tokens get different values per theme. Your build tool outputs one file per theme. At runtime, the app loads the correct theme file. CSS custom properties make this trivial: swap the custom property values on `:root` and every component updates automatically.
What is the difference between design tokens and CSS variables?+
Design tokens are platform-agnostic values (stored in JSON, YAML, or Figma Variables). CSS custom properties are one output format for design tokens. Tokens also output Swift constants, Android XML resources, and JavaScript objects. If you only build for web, CSS custom properties are your tokens. If you ship to multiple platforms, tokens are the source and CSS variables are one output. The [design system glossary entry](/glossary/design-system-ai) covers this distinction in more depth.
Should component tokens reference semantic tokens or primitives?+
Always reference semantic tokens. Component tokens are aliases: `button-bg-primary` maps to `{color-bg-brand}`, which maps to `{blue-500}`. This chain ensures that changing the brand color (at the primitive level) propagates through semantic tokens to every component. If a component token referenced a primitive directly, it would break the theming chain. ---
Explore More Templates
Browse our full library of PM templates, or generate a custom version with AI.