design-tokens-structure

Name: design-tokens-structure
Author: dylantarre

33stars3forks

How to install design-tokens-structure?

dylantarre/design-system-skills/design-tokens-structure

$npx -y skills add dylantarre/design-system-skills --skill design-tokens-structure

Installs into the current project.

Summary

Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.

Files · 1

View on GitHub

SKILL.md

1	# Design Tokens Structure
2
3	## Overview
4
5	Establish the architectural foundation for a scalable design token system. Defines the three-layer token hierarchy (primitive → semantic → component) that enables theming, multi-brand support, and maintainable design systems.
6
7	## When to Use
8
9	- Starting a new design system from scratch
10	- Restructuring an existing token system
11	- Adding multi-theme or multi-brand support
12	- Converting hardcoded values to tokens
13	- Creating a token governance strategy
14
15	### Implementation Checklist
16
17	Copy this checklist when architecting a token system:
18
19	```
20	Token Architecture Setup:
21	- [ ] Audit existing values and establish naming conventions
22	- [ ] Define primitive tokens (raw values, context-free)
23	- [ ] Define semantic tokens (purpose-based, reference primitives)
24	- [ ] Create theme overrides (dark.json, brand variants)
25	- [ ] Add component tokens for complex stateful components
26	- [ ] Configure build output (CSS variables, Tailwind, JSON)
27	```
28
29	## Quick Reference: Token Layers
30
31	\| Layer \| Also Called \| Purpose \| Example \|
32	\|-------\|-------------\|---------\|---------\|
33	\| Primitive \| Core, Base, Global \| Raw values, context-free \| `blue-500: #3b82f6` \|
34	\| Semantic \| Alias, Purpose, Role \| Meaning-based references \| `color-primary: {blue-500}` \|
35	\| Component \| Specific, Local \| Component-scoped tokens \| `button-bg: {color-primary}` \|
36
37	## The Three-Layer Architecture
38
39	```
40	┌─────────────────────────────────────────────────────────┐
41	│ COMPONENT TOKENS │
42	│ button-bg, card-border, input-focus-ring │
43	│ ↓ references │
44	├─────────────────────────────────────────────────────────┤
45	│ SEMANTIC TOKENS │
46	│ color-primary, color-bg-surface, spacing-page │
47	│ ↓ references │
48	├─────────────────────────────────────────────────────────┤
49	│ PRIMITIVE TOKENS │
50	│ blue-500, gray-100, spacing-16, radius-8 │
51	│ (raw values only) │
52	└─────────────────────────────────────────────────────────┘
53	```
54
55	---
56
57	## Layer 1: Primitive Tokens
58
59	Raw design values with no semantic meaning. These are the building blocks.
60
61	### Characteristics
62	- Context-free (no "primary", "background", etc.)
63	- Named by their intrinsic property (color: hue, spacing: size)
64	- Never change between themes
65	- Comprehensive palette of options
66
67	### Structure
68
69	```json
70	{
71	"primitive": {
72	"color": {
73	"gray": {
74	"50": { "value": "#f9fafb" },
75	"100": { "value": "#f3f4f6" },
76	"200": { "value": "#e5e7eb" },
77	"300": { "value": "#d1d5db" },
78	"400": { "value": "#9ca3af" },
79	"500": { "value": "#6b7280" },
80	"600": { "value": "#4b5563" },
81	"700": { "value": "#374151" },
82	"800": { "value": "#1f2937" },
83	"900": { "value": "#111827" },
84	"950": { "value": "#030712" }
85	},
86	"blue": {
87	"50": { "value": "#eff6ff" },
88	"100": { "value": "#dbeafe" },
89	"200": { "value": "#bfdbfe" },
90	"300": { "value": "#93c5fd" },
91	"400": { "value": "#60a5fa" },
92	"500": { "value": "#3b82f6" },
93	"600": { "value": "#2563eb" },
94	"700": { "value": "#1d4ed8" },
95	"800": { "value": "#1e40af" },
96	"900": { "value": "#1e3a8a" }
97	},
98	"green": { /* success colors */ },
99	"red": { /* error colors */ },
100	"amber": { /* warning colors */ }
101	},
102	"spacing": {
103	"0": { "value": "0" },
104	"1": { "value": "0.25rem" },
105	"2": { "value": "0.5rem" },
106	"3": { "value": "0.75rem" },
107	"4": { "value": "1rem" },
108	"5": { "value": "1.25rem" },
109	"6": { "value": "1.5rem" },
110	"8": { "value": "2rem" },
111	"10": { "value": "2.5rem" },
112	"12": { "value": "3rem" },
113	"16": { "value": "4rem" },
114	"20": { "value": "5rem" },
115	"24": { "value": "6rem" }
116	},
117	"radius": {
118	"none": { "value": "0" },
119	"sm": { "value": "0.125rem" },
120	"md": { "value": "0.375rem" },
121	"lg": { "value": "0.5rem" },
122	"xl": { "value": "0.75rem" },
123	"2xl": { "value": "1rem" },
124	"full": { "value": "9999px" }
125	},
126	"font": {
127	"family": {
128	"sans": { "value": "Inter, system-ui, sans-serif" },
129	"mono": { "value": "JetBrains Mono, monospace" }
130	},
131	"size": {
132	"xs": { "value": "0.75rem" },
133	"sm": { "value": "0.875rem" },
134	"md": { "value": "1rem" },
135	"lg": { "value": "1.125rem" },
136	"xl": { "value": "1.25rem" },
137	"2xl": { "value": "1.5rem" },
138	"3xl": { "value": "1.875rem" },
139	"4xl": { "value":

People who liked this also viewed

6 picks

Type

design-tokens-structure

33stars3forks

View on GitHub

How to install design-tokens-structure?

dylantarre/design-system-skills/design-tokens-structure

$npx -y skills add dylantarre/design-system-skills --skill design-tokens-structure

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Tokens Structure
2
3	## Overview
4
5	Establish the architectural foundation for a scalable design token system. Defines the three-layer token hierarchy (primitive → semantic → component) that enables theming, multi-brand support, and maintainable design systems.
6
7	## When to Use
8
9	- Starting a new design system from scratch
10	- Restructuring an existing token system
11	- Adding multi-theme or multi-brand support
12	- Converting hardcoded values to tokens
13	- Creating a token governance strategy
14
15	### Implementation Checklist
16
17	Copy this checklist when architecting a token system:
18
19	```
20	Token Architecture Setup:
21	- [ ] Audit existing values and establish naming conventions
22	- [ ] Define primitive tokens (raw values, context-free)
23	- [ ] Define semantic tokens (purpose-based, reference primitives)
24	- [ ] Create theme overrides (dark.json, brand variants)
25	- [ ] Add component tokens for complex stateful components
26	- [ ] Configure build output (CSS variables, Tailwind, JSON)
27	```
28
29	## Quick Reference: Token Layers
30
31	\| Layer \| Also Called \| Purpose \| Example \|
32	\|-------\|-------------\|---------\|---------\|
33	\| Primitive \| Core, Base, Global \| Raw values, context-free \| `blue-500: #3b82f6` \|
34	\| Semantic \| Alias, Purpose, Role \| Meaning-based references \| `color-primary: {blue-500}` \|
35	\| Component \| Specific, Local \| Component-scoped tokens \| `button-bg: {color-primary}` \|
36
37	## The Three-Layer Architecture
38
39	```
40	┌─────────────────────────────────────────────────────────┐
41	│ COMPONENT TOKENS │
42	│ button-bg, card-border, input-focus-ring │
43	│ ↓ references │
44	├─────────────────────────────────────────────────────────┤
45	│ SEMANTIC TOKENS │
46	│ color-primary, color-bg-surface, spacing-page │
47	│ ↓ references │
48	├─────────────────────────────────────────────────────────┤
49	│ PRIMITIVE TOKENS │
50	│ blue-500, gray-100, spacing-16, radius-8 │
51	│ (raw values only) │
52	└─────────────────────────────────────────────────────────┘
53	```
54
55	---
56
57	## Layer 1: Primitive Tokens
58
59	Raw design values with no semantic meaning. These are the building blocks.
60
61	### Characteristics
62	- Context-free (no "primary", "background", etc.)
63	- Named by their intrinsic property (color: hue, spacing: size)
64	- Never change between themes
65	- Comprehensive palette of options
66
67	### Structure
68
69	```json
70	{
71	"primitive": {
72	"color": {
73	"gray": {
74	"50": { "value": "#f9fafb" },
75	"100": { "value": "#f3f4f6" },
76	"200": { "value": "#e5e7eb" },
77	"300": { "value": "#d1d5db" },
78	"400": { "value": "#9ca3af" },
79	"500": { "value": "#6b7280" },
80	"600": { "value": "#4b5563" },
81	"700": { "value": "#374151" },
82	"800": { "value": "#1f2937" },
83	"900": { "value": "#111827" },
84	"950": { "value": "#030712" }
85	},
86	"blue": {
87	"50": { "value": "#eff6ff" },
88	"100": { "value": "#dbeafe" },
89	"200": { "value": "#bfdbfe" },
90	"300": { "value": "#93c5fd" },
91	"400": { "value": "#60a5fa" },
92	"500": { "value": "#3b82f6" },
93	"600": { "value": "#2563eb" },
94	"700": { "value": "#1d4ed8" },
95	"800": { "value": "#1e40af" },
96	"900": { "value": "#1e3a8a" }
97	},
98	"green": { /* success colors */ },
99	"red": { /* error colors */ },
100	"amber": { /* warning colors */ }
101	},
102	"spacing": {
103	"0": { "value": "0" },
104	"1": { "value": "0.25rem" },
105	"2": { "value": "0.5rem" },
106	"3": { "value": "0.75rem" },
107	"4": { "value": "1rem" },
108	"5": { "value": "1.25rem" },
109	"6": { "value": "1.5rem" },
110	"8": { "value": "2rem" },
111	"10": { "value": "2.5rem" },
112	"12": { "value": "3rem" },
113	"16": { "value": "4rem" },
114	"20": { "value": "5rem" },
115	"24": { "value": "6rem" }
116	},
117	"radius": {
118	"none": { "value": "0" },
119	"sm": { "value": "0.125rem" },
120	"md": { "value": "0.375rem" },
121	"lg": { "value": "0.5rem" },
122	"xl": { "value": "0.75rem" },
123	"2xl": { "value": "1rem" },
124	"full": { "value": "9999px" }
125	},
126	"font": {
127	"family": {
128	"sans": { "value": "Inter, system-ui, sans-serif" },
129	"mono": { "value": "JetBrains Mono, monospace" }
130	},
131	"size": {
132	"xs": { "value": "0.75rem" },
133	"sm": { "value": "0.875rem" },
134	"md": { "value": "1rem" },
135	"lg": { "value": "1.125rem" },
136	"xl": { "value": "1.25rem" },
137	"2xl": { "value": "1.5rem" },
138	"3xl": { "value": "1.875rem" },
139	"4xl": { "value":

People who liked this also viewed

6 picks

Type