shadow-scale

Name: shadow-scale
Author: dylantarre

33stars3forks

How to install shadow-scale?

dylantarre/design-system-skills/shadow-scale

$npx -y skills add dylantarre/design-system-skills --skill shadow-scale

Installs into the current project.

Summary

Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows, modal depth, or dark mode shadow variants. Outputs CSS, Tailwind, or JSON.

Files · 1

View on GitHub

SKILL.md

1	# Shadow Scale Generator
2
3	## Overview
4
5	Generate consistent elevation scales using layered box-shadows. Creates depth hierarchy from subtle lifts to dramatic floats with proper blur, spread, and opacity progressions.
6
7	## When to Use
8
9	- Setting up elevation tokens for a new project
10	- Creating card/modal depth hierarchy
11	- Standardizing shadow styles across components
12	- Building dark mode shadow variants
13
14	## Quick Reference
15
16	\| Level \| Typical Use \| Character \|
17	\|-------\|-------------\|-----------\|
18	\| none \| Flat elements \| No elevation \|
19	\| xs \| Subtle lift \| Barely raised \|
20	\| sm \| Cards, buttons \| Slight depth \|
21	\| md \| Dropdowns, tooltips \| Clear separation \|
22	\| lg \| Modals, popovers \| Floating \|
23	\| xl \| Dialogs, drawers \| High elevation \|
24	\| 2xl \| Full overlays \| Maximum depth \|
25
26	## The Process
27
28	1. Get base color: Shadow color (default: black with opacity)
29	2. Ask style:
30	- Soft - Large blur, low opacity (modern, subtle)
31	- Sharp - Small blur, higher opacity (defined edges)
32	- Layered - Multiple shadows per level (most realistic)
33	3. Ask levels: How many elevation steps (5-7 typical)
34	4. Ask dark mode: Generate inverted/adjusted dark mode variants?
35	5. Ask format: CSS, Tailwind, or JSON?
36	6. Generate: Create scale with progressive blur/spread/opacity
37
38	## Shadow Styles
39
40	\| Style \| Character \| Best For \|
41	\|-------\|-----------\|----------\|
42	\| Soft \| Diffuse, gentle \| Modern UI, cards, light themes \|
43	\| Sharp \| Defined, crisp \| Buttons, data-dense UI \|
44	\| Layered \| Realistic, nuanced \| Premium feel, modals \|
45
46	Layered shadows use 2-3 shadow layers per level:
47	- Ambient layer: Large blur, low opacity (environmental light)
48	- Key layer: Medium blur, medium opacity (directional light)
49	- Edge layer: Minimal blur, subtle (contact shadow)
50
51	## Output Formats
52
53	CSS Custom Properties (Layered):
54	```css
55	:root {
56	--shadow-none: none;
57	--shadow-xs:
58	0 1px 2px 0 rgb(0 0 0 / 0.05);
59	--shadow-sm:
60	0 1px 3px 0 rgb(0 0 0 / 0.1),
61	0 1px 2px -1px rgb(0 0 0 / 0.1);
62	--shadow-md:
63	0 4px 6px -1px rgb(0 0 0 / 0.1),
64	0 2px 4px -2px rgb(0 0 0 / 0.1);
65	--shadow-lg:
66	0 10px 15px -3px rgb(0 0 0 / 0.1),
67	0 4px 6px -4px rgb(0 0 0 / 0.1);
68	--shadow-xl:
69	0 20px 25px -5px rgb(0 0 0 / 0.1),
70	0 8px 10px -6px rgb(0 0 0 / 0.1);
71	--shadow-2xl:
72	0 25px 50px -12px rgb(0 0 0 / 0.25);
73	}
74	```
75
76	Tailwind Config:
77	```js
78	module.exports = {
79	theme: {
80	boxShadow: {
81	'none': 'none',
82	'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
83	'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
84	'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
85	'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
86	'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
87	'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
88	}
89	}
90	}
91	```
92
93	JSON Tokens:
94	```json
95	{
96	"shadow": {
97	"none": { "value": "none" },
98	"xs": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
99	"sm": { "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
100	"md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
101	"lg": { "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" }
102	}
103	}
104	```
105
106	## Algorithm Details
107
108	Progression factors (each level multiplies previous):
109	- Y-offset: ~2x per level
110	- Blur radius: ~1.5-2x per level
111	- Spread: Slightly negative (prevents harsh edges)
112	- Opacity: Increases slightly at higher levels
113
114	Layered shadow formula:
115	```
116	Level N:
117	Ambient: 0 (N4)px (N6)px 0 rgb(0 0 0 / 0.04)
118	Key: 0 (N2)px (N3)px -(N)px rgb(0 0 0 / 0.08)
119	```
120
121	## Dark Mode Considerations
122
123	Shadows are less visible on dark backgrounds. Options:
124
125	\| Approach \| How \| When \|
126	\|----------\|-----\|------\|
127	\| Reduce opacity \| Cut opacity 30-50% \| Subtle dark UI \|
128	\| Add glow \| Light color, outward spread \| Neon/modern aesthetic \|
129	\| Ring highlight \| Subtle light border + shadow \| Card separation \|
130	\| Invert direction \| Top-lit shadows \| Unique style \|
131
132	Dark mode CSS example:
133	```css
134	:root.dark {
135	--shadow-md:
136	0 4px 6px -1px rgb(0 0 0 / 0.3),
137	0 0 0 1px rgb(255 255 255 / 0.05);
138	}
139	```
140
141	## Inset Shadows
142
143	For pressed states or inner depth:
144
145	```css
146	:root {
147	--shadow-inner-sm: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
148	--shadow-inner-md: inset 0 2px 4px 0 rgb(0 0 0 / 0.1);
149	}
150	```

People who liked this also viewed

6 picks

Type

shadow-scale

33stars3forks

View on GitHub

How to install shadow-scale?

dylantarre/design-system-skills/shadow-scale

$npx -y skills add dylantarre/design-system-skills --skill shadow-scale

Installs into the current project.

Summary

Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows, modal depth, or dark mode shadow variants. Outputs CSS, Tailwind, or JSON.

Files · 1

View on GitHub

SKILL.md

1	# Shadow Scale Generator
2
3	## Overview
4
5	Generate consistent elevation scales using layered box-shadows. Creates depth hierarchy from subtle lifts to dramatic floats with proper blur, spread, and opacity progressions.
6
7	## When to Use
8
9	- Setting up elevation tokens for a new project
10	- Creating card/modal depth hierarchy
11	- Standardizing shadow styles across components
12	- Building dark mode shadow variants
13
14	## Quick Reference
15
16	\| Level \| Typical Use \| Character \|
17	\|-------\|-------------\|-----------\|
18	\| none \| Flat elements \| No elevation \|
19	\| xs \| Subtle lift \| Barely raised \|
20	\| sm \| Cards, buttons \| Slight depth \|
21	\| md \| Dropdowns, tooltips \| Clear separation \|
22	\| lg \| Modals, popovers \| Floating \|
23	\| xl \| Dialogs, drawers \| High elevation \|
24	\| 2xl \| Full overlays \| Maximum depth \|
25
26	## The Process
27
28	1. Get base color: Shadow color (default: black with opacity)
29	2. Ask style:
30	- Soft - Large blur, low opacity (modern, subtle)
31	- Sharp - Small blur, higher opacity (defined edges)
32	- Layered - Multiple shadows per level (most realistic)
33	3. Ask levels: How many elevation steps (5-7 typical)
34	4. Ask dark mode: Generate inverted/adjusted dark mode variants?
35	5. Ask format: CSS, Tailwind, or JSON?
36	6. Generate: Create scale with progressive blur/spread/opacity
37
38	## Shadow Styles
39
40	\| Style \| Character \| Best For \|
41	\|-------\|-----------\|----------\|
42	\| Soft \| Diffuse, gentle \| Modern UI, cards, light themes \|
43	\| Sharp \| Defined, crisp \| Buttons, data-dense UI \|
44	\| Layered \| Realistic, nuanced \| Premium feel, modals \|
45
46	Layered shadows use 2-3 shadow layers per level:
47	- Ambient layer: Large blur, low opacity (environmental light)
48	- Key layer: Medium blur, medium opacity (directional light)
49	- Edge layer: Minimal blur, subtle (contact shadow)
50
51	## Output Formats
52
53	CSS Custom Properties (Layered):
54	```css
55	:root {
56	--shadow-none: none;
57	--shadow-xs:
58	0 1px 2px 0 rgb(0 0 0 / 0.05);
59	--shadow-sm:
60	0 1px 3px 0 rgb(0 0 0 / 0.1),
61	0 1px 2px -1px rgb(0 0 0 / 0.1);
62	--shadow-md:
63	0 4px 6px -1px rgb(0 0 0 / 0.1),
64	0 2px 4px -2px rgb(0 0 0 / 0.1);
65	--shadow-lg:
66	0 10px 15px -3px rgb(0 0 0 / 0.1),
67	0 4px 6px -4px rgb(0 0 0 / 0.1);
68	--shadow-xl:
69	0 20px 25px -5px rgb(0 0 0 / 0.1),
70	0 8px 10px -6px rgb(0 0 0 / 0.1);
71	--shadow-2xl:
72	0 25px 50px -12px rgb(0 0 0 / 0.25);
73	}
74	```
75
76	Tailwind Config:
77	```js
78	module.exports = {
79	theme: {
80	boxShadow: {
81	'none': 'none',
82	'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
83	'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
84	'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
85	'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
86	'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
87	'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
88	}
89	}
90	}
91	```
92
93	JSON Tokens:
94	```json
95	{
96	"shadow": {
97	"none": { "value": "none" },
98	"xs": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
99	"sm": { "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
100	"md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
101	"lg": { "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" }
102	}
103	}
104	```
105
106	## Algorithm Details
107
108	Progression factors (each level multiplies previous):
109	- Y-offset: ~2x per level
110	- Blur radius: ~1.5-2x per level
111	- Spread: Slightly negative (prevents harsh edges)
112	- Opacity: Increases slightly at higher levels
113
114	Layered shadow formula:
115	```
116	Level N:
117	Ambient: 0 (N4)px (N6)px 0 rgb(0 0 0 / 0.04)
118	Key: 0 (N2)px (N3)px -(N)px rgb(0 0 0 / 0.08)
119	```
120
121	## Dark Mode Considerations
122
123	Shadows are less visible on dark backgrounds. Options:
124
125	\| Approach \| How \| When \|
126	\|----------\|-----\|------\|
127	\| Reduce opacity \| Cut opacity 30-50% \| Subtle dark UI \|
128	\| Add glow \| Light color, outward spread \| Neon/modern aesthetic \|
129	\| Ring highlight \| Subtle light border + shadow \| Card separation \|
130	\| Invert direction \| Top-lit shadows \| Unique style \|
131
132	Dark mode CSS example:
133	```css
134	:root.dark {
135	--shadow-md:
136	0 4px 6px -1px rgb(0 0 0 / 0.3),
137	0 0 0 1px rgb(255 255 255 / 0.05);
138	}
139	```
140
141	## Inset Shadows
142
143	For pressed states or inner depth:
144
145	```css
146	:root {
147	--shadow-inner-sm: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
148	--shadow-inner-md: inset 0 2px 4px 0 rgb(0 0 0 / 0.1);
149	}
150	```

People who liked this also viewed

6 picks

Type