elevation-and-depth

Name: elevation-and-depth
Author: dembrandt

27stars5forks

How to install elevation-and-depth?

dembrandt/dembrandt-skills/elevation-and-depth

$npx -y skills add dembrandt/dembrandt-skills --skill elevation-and-depth

Installs into the current project.

Summary

Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius, it creates the tactile quality of cards, modals, and interactive surfaces. Use when designing cards, dropdowns, modals, tooltips, or any flo

Files · 1

View on GitHub

SKILL.md

1	# Elevation and Depth
2
3	Elevation uses shadow and layering to communicate that an element sits above the base surface — giving UI a sense of physical depth. Combined with border-radius, it creates the tactile quality that makes cards graspable, modals clearly floating, and dropdowns feel like they've appeared on top of content.
4
5	## The Elevation Scale
6
7	Define a small set of elevation levels as tokens. Each level maps to a specific UI role.
8
9	\| Level \| Token \| Shadow \| Role \|
10	\|---\|---\|---\|---\|
11	\| 0 \| `--shadow-none` \| none \| Flat surface, inline elements \|
12	\| 1 \| `--shadow-xs` \| `0 1px 2px rgba(0,0,0,0.06)` \| Subtle card, table row hover \|
13	\| 2 \| `--shadow-sm` \| `0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)` \| Card, input focus ring area \|
14	\| 3 \| `--shadow-md` \| `0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)` \| Dropdown, popover \|
15	\| 4 \| `--shadow-lg` \| `0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)` \| Modal, dialog, side drawer \|
16	\| 5 \| `--shadow-xl` \| `0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04)` \| Command palette, full-screen overlay \|
17
18	Keep shadows subtle. Dark, heavy shadows feel dated and visually aggressive. Light, diffuse shadows feel modern and material.
19
20	### The "Shadow + Border" Rule
21	A subtle shadow on a white surface can sometimes "wash out," making the edge of a card feel fuzzy or indistinct.
22	- Rule: For elevated white cards or sections, pair the shadow with a 1px border that is slightly darker (1.5x to 2x) than the shadow's core tone (e.g., a medium grey like `#E2E8F0` or `grey-200`).
23	- Effect: The border defines the physical boundary of the card, while the shadow provides the depth. Together, they make the component "pop" with much higher clarity than using either alone.
24
25	### Hover Needs a Defined Edge
26	A card that shifts background colour on hover must have a defined edge — a border, shadow, or clear radius boundary. Without one, the shift has no shape and reads as a stray fill, not a highlighted card. On a borderless, flat card, a background-change hover is forbidden — use a border or a shadow (elevation) on hover instead.
27
28	### Subtle Gradients for Depth
29	Gradients can be used to bring "liveliness" to an interface and reinforce the sense of elevation.
30	- The Lighting Metaphor: A subtle linear gradient (top-to-bottom) that is slightly lighter at the top mimics natural overhead lighting. This makes a surface feel more physical and elevated than a flat fill.
31	- The 5% Rule: Keep the gradient extremely subtle. A change in lightness of only 2–5% between the top and bottom is usually enough. If the user can easily see where the gradient starts and ends, it is likely too heavy.
32	- Usage: Apply to primary buttons, hero cards, and header sections to improve visual hierarchy and brand personality.
33
34	## Pairing Elevation with Border-Radius
35
36	Border-radius and shadow work together to define the character of a surface. The combination signals the element's role and the product's visual tone.
37
38	\| Surface \| Shadow \| Border-Radius \| Tone \|
39	\|---\|---\|---\|---\|
40	\| Inline chip / tag \| none \| `--radius-full` (pill) \| Flat, lightweight \|
41	\| Card \| `--shadow-sm` \| `--radius-md` (8–12px) \| Graspable, contained \|
42	\| Dropdown / popover \| `--shadow-md` \| `--radius-md` (8px) \| Floating, contextual \|
43	\| Modal / dialog \| `--shadow-lg` \| `--radius-lg` (12–16px) \| Prominent, focused \|
44	\| Toast / notification \| `--shadow-md` \| `--radius-md` \| Ephemeral, above content \|
45	\| Button \| none or `--shadow-xs` \| consistent across all buttons — see below \|
46
47	## Border-Radius Consistency Rule
48
49	Button border-radius must not vary within a product. All buttons — primary, secondary, destructive, ghost — use the same radius token. Varying radius between button types breaks visual consistency and implies a semantic difference that does not exist.
50
51	```

People who liked this also viewed

6 picks

Type

elevation-and-depth

27stars5forks

View on GitHub

How to install elevation-and-depth?

dembrandt/dembrandt-skills/elevation-and-depth

$npx -y skills add dembrandt/dembrandt-skills --skill elevation-and-depth

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Elevation and Depth
2
3	Elevation uses shadow and layering to communicate that an element sits above the base surface — giving UI a sense of physical depth. Combined with border-radius, it creates the tactile quality that makes cards graspable, modals clearly floating, and dropdowns feel like they've appeared on top of content.
4
5	## The Elevation Scale
6
7	Define a small set of elevation levels as tokens. Each level maps to a specific UI role.
8
9	\| Level \| Token \| Shadow \| Role \|
10	\|---\|---\|---\|---\|
11	\| 0 \| `--shadow-none` \| none \| Flat surface, inline elements \|
12	\| 1 \| `--shadow-xs` \| `0 1px 2px rgba(0,0,0,0.06)` \| Subtle card, table row hover \|
13	\| 2 \| `--shadow-sm` \| `0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)` \| Card, input focus ring area \|
14	\| 3 \| `--shadow-md` \| `0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)` \| Dropdown, popover \|
15	\| 4 \| `--shadow-lg` \| `0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)` \| Modal, dialog, side drawer \|
16	\| 5 \| `--shadow-xl` \| `0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04)` \| Command palette, full-screen overlay \|
17
18	Keep shadows subtle. Dark, heavy shadows feel dated and visually aggressive. Light, diffuse shadows feel modern and material.
19
20	### The "Shadow + Border" Rule
21	A subtle shadow on a white surface can sometimes "wash out," making the edge of a card feel fuzzy or indistinct.
22	- Rule: For elevated white cards or sections, pair the shadow with a 1px border that is slightly darker (1.5x to 2x) than the shadow's core tone (e.g., a medium grey like `#E2E8F0` or `grey-200`).
23	- Effect: The border defines the physical boundary of the card, while the shadow provides the depth. Together, they make the component "pop" with much higher clarity than using either alone.
24
25	### Hover Needs a Defined Edge
26	A card that shifts background colour on hover must have a defined edge — a border, shadow, or clear radius boundary. Without one, the shift has no shape and reads as a stray fill, not a highlighted card. On a borderless, flat card, a background-change hover is forbidden — use a border or a shadow (elevation) on hover instead.
27
28	### Subtle Gradients for Depth
29	Gradients can be used to bring "liveliness" to an interface and reinforce the sense of elevation.
30	- The Lighting Metaphor: A subtle linear gradient (top-to-bottom) that is slightly lighter at the top mimics natural overhead lighting. This makes a surface feel more physical and elevated than a flat fill.
31	- The 5% Rule: Keep the gradient extremely subtle. A change in lightness of only 2–5% between the top and bottom is usually enough. If the user can easily see where the gradient starts and ends, it is likely too heavy.
32	- Usage: Apply to primary buttons, hero cards, and header sections to improve visual hierarchy and brand personality.
33
34	## Pairing Elevation with Border-Radius
35
36	Border-radius and shadow work together to define the character of a surface. The combination signals the element's role and the product's visual tone.
37
38	\| Surface \| Shadow \| Border-Radius \| Tone \|
39	\|---\|---\|---\|---\|
40	\| Inline chip / tag \| none \| `--radius-full` (pill) \| Flat, lightweight \|
41	\| Card \| `--shadow-sm` \| `--radius-md` (8–12px) \| Graspable, contained \|
42	\| Dropdown / popover \| `--shadow-md` \| `--radius-md` (8px) \| Floating, contextual \|
43	\| Modal / dialog \| `--shadow-lg` \| `--radius-lg` (12–16px) \| Prominent, focused \|
44	\| Toast / notification \| `--shadow-md` \| `--radius-md` \| Ephemeral, above content \|
45	\| Button \| none or `--shadow-xs` \| consistent across all buttons — see below \|
46
47	## Border-Radius Consistency Rule
48
49	Button border-radius must not vary within a product. All buttons — primary, secondary, destructive, ghost — use the same radius token. Varying radius between button types breaks visual consistency and implies a semantic difference that does not exist.
50
51	```

People who liked this also viewed

6 picks

Type