token-docs

Name: token-docs
Author: dylantarre

33stars3forks

How to install token-docs?

dylantarre/design-system-skills/token-docs

$npx -y skills add dylantarre/design-system-skills --skill token-docs

Installs into the current project.

Summary

Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.

Files · 1

View on GitHub

SKILL.md

1	# Design Token Documentation Generator
2
3	## Overview
4
5	Generate comprehensive documentation for design tokens including visual swatches, usage guidelines, code examples, and cross-reference tables. Create living documentation that stays in sync with token values.
6
7	## When to Use
8
9	- Documenting a new token system
10	- Creating a design system style guide
11	- Generating token reference for developers
12	- Building visual documentation pages
13
14	## Quick Reference: Documentation Sections
15
16	\| Section \| Content \| Audience \|
17	\|---------\|---------\|----------\|
18	\| Overview \| System philosophy, naming conventions \| All \|
19	\| Color Tokens \| Swatches, contrast info, usage \| Designers, Devs \|
20	\| Typography \| Font stacks, scale, line heights \| Designers, Devs \|
21	\| Spacing \| Scale visualization, use cases \| Devs \|
22	\| Shadows \| Visual examples, elevation guide \| Designers, Devs \|
23	\| Radius \| Corner examples, component mapping \| Devs \|
24	\| Breakpoints \| Device targets, media queries \| Devs \|
25
26	## The Process
27
28	1. Gather token data: Import from CSS, JSON, or JS files
29	2. Structure sections: Organize by category
30	3. Add visuals: Swatches, scales, examples
31	4. Write guidelines: When and how to use each token
32	5. Include code: Copy-paste examples for each format
33	6. Cross-reference: Link related tokens and components
34
35	---
36
37	## Documentation Templates
38
39	### Color Token Documentation
40
41	```markdown
42	# Color Tokens
43
44	Our color system uses OKLCH for perceptual uniformity, ensuring consistent
45	visual steps across the entire scale.
46
47	## Naming Convention
48
49	`--color-{name}-{step}`
50
51	- name: Color category (primary, gray, success, etc.)
52	- step: Lightness value (50-950, lower = lighter)
53
54	## Primary
55
56	Our brand color, used for primary actions and key UI elements.
57
58	\| Token \| Value \| Preview \| Use Case \|
59	\|-------\|-------\|---------\|----------\|
60	\| `--color-primary-50` \| oklch(97% 0.01 250) \| ![#eff6ff](swatch) \| Subtle backgrounds \|
61	\| `--color-primary-100` \| oklch(93% 0.02 250) \| ![#dbeafe](swatch) \| Hover states (light) \|
62	\| `--color-primary-500` \| oklch(55% 0.15 250) \| ![#3b82f6](swatch) \| Primary brand color \|
63	\| `--color-primary-600` \| oklch(45% 0.15 250) \| ![#2563eb](swatch) \| Hover states (dark) \|
64	\| `--color-primary-900` \| oklch(20% 0.10 250) \| ![#1e3a8a](swatch) \| Text on light backgrounds \|
65
66	### Accessibility
67
68	\| Combination \| Ratio \| WCAG \|
69	\|-------------\|-------\|------\|
70	\| primary-900 on white \| 9.4:1 \| AAA \|
71	\| primary-500 on white \| 4.5:1 \| AA \|
72	\| white on primary-500 \| 4.5:1 \| AA \|
73	\| white on primary-600 \| 5.8:1 \| AA \|
74
75	### Usage
76
77	```css
78	/* Primary actions */
79	.btn-primary {
80	background-color: var(--color-primary-500);
81	color: white;
82	}
83
84	.btn-primary:hover {
85	background-color: var(--color-primary-600);
86	}
87
88	/* Accent text */
89	.link {
90	color: var(--color-primary-600);
91	}
92	```
93
94	### Do / Don't
95
96	✅ Do:
97	- Use primary-500 for main CTAs
98	- Use primary-600 for hover states
99	- Use primary-50/100 for selected backgrounds
100
101	❌ Don't:
102	- Use primary-500 for large text blocks
103	- Mix primary colors from different scales
104	- Use low-contrast combinations (primary-300 on white)
105
106	---
107
108	## Gray (Neutral)
109
110	Neutral colors for text, backgrounds, borders, and UI elements.
111
112	\| Token \| Value \| Use Case \|
113	\|-------\|-------\|----------\|
114	\| `--color-gray-50` \| #f9fafb \| Page backgrounds \|
115	\| `--color-gray-100` \| #f3f4f6 \| Card backgrounds, hover states \|
116	\| `--color-gray-200` \| #e5e7eb \| Borders, dividers \|
117	\| `--color-gray-300` \| #d1d5db \| Input borders, disabled \|
118	\| `--color-gray-400` \| #9ca3af \| Placeholder text \|
119	\| `--color-gray-500` \| #6b7280 \| Muted text, icons \|
120	\| `--color-gray-600` \| #4b5563 \| Secondary text \|
121	\| `--color-gray-700` \| #374151 \| Body text \|
122	\| `--color-gray-800` \| #1f2937 \| Headings \|
123	\| `--color-gray-900` \| #111827 \| Primary text \|
124	\| `--color-gray-950` \| #030712 \| Darkest, rarely used \|
125
126	---
127
128	## Semantic Colors
129
130	\| Category \| Token \| Value \| Use \|
131	\|----------\|-------\|-------\|-----\|
132	\| Success \| `--color-success-500` \| #22c55e \| Success messages, confirmations \|
133	\| Warning \| `--color-warning-500` \| #f59e0b \| Warnings, caution states \|
134	\| Error \| `--color-error-500` \| #ef4444 \| Errors, destructive actions \|
135	\| Info \| `--color-info-500` \| #3b82f6 \| Informational messages \|
136
137	Each semantic color has a full scale (50-900) for backgrounds, text, and borders.
138	```
139
140	---
141
142	### Typography Token Documentation
143
144	```markdown
145	# Typography Tokens
146
147	Our type scale uses a 1.2 (Minor Third) ratio for harmonious sizing.
148	Line heights are calculated based on font size for optimal readability.
149
150	## Font Families
151
152	\| Token \| Value \| Use \|
153	\|-------\|-------\|-----\|
154	\| `--font-sans` \| 'Inter', system-ui, sans-serif \| Body text, UI \|
155	\| `--font-mono` \| 'JetBrains Mono', monospace \| Code, technical \|
156	\| `--font-serif` \| 'Merriweather', Georgia, serif \| Editorial (option

People who liked this also viewed

6 picks

Type

token-docs

33stars3forks

View on GitHub

How to install token-docs?

dylantarre/design-system-skills/token-docs

$npx -y skills add dylantarre/design-system-skills --skill token-docs

Installs into the current project.

Summary

Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.

Files · 1

View on GitHub

SKILL.md

1	# Design Token Documentation Generator
2
3	## Overview
4
5	Generate comprehensive documentation for design tokens including visual swatches, usage guidelines, code examples, and cross-reference tables. Create living documentation that stays in sync with token values.
6
7	## When to Use
8
9	- Documenting a new token system
10	- Creating a design system style guide
11	- Generating token reference for developers
12	- Building visual documentation pages
13
14	## Quick Reference: Documentation Sections
15
16	\| Section \| Content \| Audience \|
17	\|---------\|---------\|----------\|
18	\| Overview \| System philosophy, naming conventions \| All \|
19	\| Color Tokens \| Swatches, contrast info, usage \| Designers, Devs \|
20	\| Typography \| Font stacks, scale, line heights \| Designers, Devs \|
21	\| Spacing \| Scale visualization, use cases \| Devs \|
22	\| Shadows \| Visual examples, elevation guide \| Designers, Devs \|
23	\| Radius \| Corner examples, component mapping \| Devs \|
24	\| Breakpoints \| Device targets, media queries \| Devs \|
25
26	## The Process
27
28	1. Gather token data: Import from CSS, JSON, or JS files
29	2. Structure sections: Organize by category
30	3. Add visuals: Swatches, scales, examples
31	4. Write guidelines: When and how to use each token
32	5. Include code: Copy-paste examples for each format
33	6. Cross-reference: Link related tokens and components
34
35	---
36
37	## Documentation Templates
38
39	### Color Token Documentation
40
41	```markdown
42	# Color Tokens
43
44	Our color system uses OKLCH for perceptual uniformity, ensuring consistent
45	visual steps across the entire scale.
46
47	## Naming Convention
48
49	`--color-{name}-{step}`
50
51	- name: Color category (primary, gray, success, etc.)
52	- step: Lightness value (50-950, lower = lighter)
53
54	## Primary
55
56	Our brand color, used for primary actions and key UI elements.
57
58	\| Token \| Value \| Preview \| Use Case \|
59	\|-------\|-------\|---------\|----------\|
60	\| `--color-primary-50` \| oklch(97% 0.01 250) \| ![#eff6ff](swatch) \| Subtle backgrounds \|
61	\| `--color-primary-100` \| oklch(93% 0.02 250) \| ![#dbeafe](swatch) \| Hover states (light) \|
62	\| `--color-primary-500` \| oklch(55% 0.15 250) \| ![#3b82f6](swatch) \| Primary brand color \|
63	\| `--color-primary-600` \| oklch(45% 0.15 250) \| ![#2563eb](swatch) \| Hover states (dark) \|
64	\| `--color-primary-900` \| oklch(20% 0.10 250) \| ![#1e3a8a](swatch) \| Text on light backgrounds \|
65
66	### Accessibility
67
68	\| Combination \| Ratio \| WCAG \|
69	\|-------------\|-------\|------\|
70	\| primary-900 on white \| 9.4:1 \| AAA \|
71	\| primary-500 on white \| 4.5:1 \| AA \|
72	\| white on primary-500 \| 4.5:1 \| AA \|
73	\| white on primary-600 \| 5.8:1 \| AA \|
74
75	### Usage
76
77	```css
78	/* Primary actions */
79	.btn-primary {
80	background-color: var(--color-primary-500);
81	color: white;
82	}
83
84	.btn-primary:hover {
85	background-color: var(--color-primary-600);
86	}
87
88	/* Accent text */
89	.link {
90	color: var(--color-primary-600);
91	}
92	```
93
94	### Do / Don't
95
96	✅ Do:
97	- Use primary-500 for main CTAs
98	- Use primary-600 for hover states
99	- Use primary-50/100 for selected backgrounds
100
101	❌ Don't:
102	- Use primary-500 for large text blocks
103	- Mix primary colors from different scales
104	- Use low-contrast combinations (primary-300 on white)
105
106	---
107
108	## Gray (Neutral)
109
110	Neutral colors for text, backgrounds, borders, and UI elements.
111
112	\| Token \| Value \| Use Case \|
113	\|-------\|-------\|----------\|
114	\| `--color-gray-50` \| #f9fafb \| Page backgrounds \|
115	\| `--color-gray-100` \| #f3f4f6 \| Card backgrounds, hover states \|
116	\| `--color-gray-200` \| #e5e7eb \| Borders, dividers \|
117	\| `--color-gray-300` \| #d1d5db \| Input borders, disabled \|
118	\| `--color-gray-400` \| #9ca3af \| Placeholder text \|
119	\| `--color-gray-500` \| #6b7280 \| Muted text, icons \|
120	\| `--color-gray-600` \| #4b5563 \| Secondary text \|
121	\| `--color-gray-700` \| #374151 \| Body text \|
122	\| `--color-gray-800` \| #1f2937 \| Headings \|
123	\| `--color-gray-900` \| #111827 \| Primary text \|
124	\| `--color-gray-950` \| #030712 \| Darkest, rarely used \|
125
126	---
127
128	## Semantic Colors
129
130	\| Category \| Token \| Value \| Use \|
131	\|----------\|-------\|-------\|-----\|
132	\| Success \| `--color-success-500` \| #22c55e \| Success messages, confirmations \|
133	\| Warning \| `--color-warning-500` \| #f59e0b \| Warnings, caution states \|
134	\| Error \| `--color-error-500` \| #ef4444 \| Errors, destructive actions \|
135	\| Info \| `--color-info-500` \| #3b82f6 \| Informational messages \|
136
137	Each semantic color has a full scale (50-900) for backgrounds, text, and borders.
138	```
139
140	---
141
142	### Typography Token Documentation
143
144	```markdown
145	# Typography Tokens
146
147	Our type scale uses a 1.2 (Minor Third) ratio for harmonious sizing.
148	Line heights are calculated based on font size for optimal readability.
149
150	## Font Families
151
152	\| Token \| Value \| Use \|
153	\|-------\|-------\|-----\|
154	\| `--font-sans` \| 'Inter', system-ui, sans-serif \| Body text, UI \|
155	\| `--font-mono` \| 'JetBrains Mono', monospace \| Code, technical \|
156	\| `--font-serif` \| 'Merriweather', Georgia, serif \| Editorial (option

People who liked this also viewed

6 picks

Type