| name | design-tokens-system |
| description | Enterprise design token architecture. Defines spacing, scaling, elevation, and grid systems following Adobe Spectrum, Salesforce Lightning, Amazon Style Dictionary, and 6 other production token systems. Use when building or auditing a token layer for any UI project. |
| origin | yana-ai — synthesized from adobe/spectrum-tokens, salesforce/design-system-tokens, amzn/style-dictionary, workday/canvas-tokens, elastic/eui, microsoft/fluentui-design-tokens, pinterest/gestalt, backpack/backpack-tokens, dekorator/design-tokens, audi/appearance |
| license | Apache-2.0 |
| version | 1.0.0 |
| compatibility | yana-ai >= 1.3.35 |
/design-tokens-system
When to Use
- Starting a new design system or component library
- Auditing existing token structure for inconsistency
- Cross-platform token compilation (web → iOS → Android)
- "Spacing is inconsistent", "shadows feel random", "hard to maintain scale"
Do NOT use for
- One-off UI tweaks that don't require a system
- Projects with < 5 components (use inline values)
Token Architecture (Style Dictionary pattern — Amazon)
tokens/
base/ ← primitive values (raw numbers, hex codes)
color.json
spacing.json
typography.json
shadow.json
semantic/ ← purpose-mapped aliases
color.json ← color.background.primary → base.blue.500
spacing.json ← spacing.component.gap → base.spacing.4
component/ ← component-scoped overrides
button.json
card.json
Rule: Never reference base tokens directly in component code.
Always use semantic tokens. Semantic tokens reference base tokens.
Spacing Scale (Salesforce Lightning + Backpack mobile)
{
"spacing": {
"1": "4px",
"2": "8px",
"3": "12px",
"4": "16px",
"5": "20px",
"6": "24px",
"8": "32px",
"10": "40px",
"12": "48px",
"16": "64px",
"20": "80px",
"24": "96px"
}
}
Mobile (Backpack): use 4px base unit. Desktop: 8px base unit.
Never invent spacing values outside this scale.
Elevation / Shadow Scale (Workday Canvas + Elastic EUI)
{
"elevation": {
"0": "none",
"1": "0 1px 2px rgba(0,0,0,0.08)",
"2": "0 2px 4px rgba(0,0,0,0.10)",
"3": "0 4px 8px rgba(0,0,0,0.12)",
"4": "0 8px 16px rgba(0,0,0,0.14)",
"5": "0 16px 32px rgba(0,0,0,0.16)"
}
}
Cards = elevation.2. Modals = elevation.4. Tooltips = elevation.3.
Never use arbitrary box-shadow values.
Scaling / Density (Adobe Spectrum)
Adobe Spectrum defines 3 scale densities:
medium — desktop default (base 14px)large — touch-optimized (base 17px)extra-large — accessibility (base 20px)
All spacing and typography tokens scale proportionally when density changes.
Implement via CSS custom properties + data-scale attribute on root.
Grid System (Pinterest Gestalt — Masonry + Microsoft Fluent — Responsive)
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
gap: var(--spacing-4);
padding: 0 var(--spacing-6);
}
@media (max-width: 768px) { --grid-cols: 4; }
@media (max-width: 1024px) { --grid-cols: 8; }
Token Compilation (amzn/style-dictionary)
npx style-dictionary build --config style-dictionary.config.json
Anti-Pattern Checklist
❌ Hardcoded hex values in component styles (#3B82F6 → use color.primary.500)
❌ Arbitrary spacing not from scale (margin: 13px → round to nearest token)
❌ Shadow values not from elevation scale
❌ Component-scoped tokens not documented in component/token file
❌ Base tokens referenced directly in components
