shadow-scale

Generate layered shadow elevation tokens as CSS variables, Tailwind config, or JSON.

38|3|Updated Dec 29, 2025

Search Tags:#tailwind #tokens #design-system #dark-mode #css-variables #shadow #elevation

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill shadow-scale

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadow-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/shadow-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill shadow-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized method to generate layered box-shadow elevations, eliminating ad-hoc shadow decisions and ensuring consistent depth across UI components.

Core Features & Use Cases

Layered shadow scales with ambient, key, and edge components for each level.
Outputs in CSS Custom Properties, Tailwind config, or JSON tokens for cross-platform use.
Supports dark mode variants and inner (inset) shadows for pressed states.

Quick Start

Use the shadow-scale skill to generate a scalable elevation system for your design tokens.

Frequently Asked Questions about shadow-scale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate consistent shadow elevation tokens for a design system?▼

Generate consistent shadow elevation tokens by defining a layered shadow scale with ambient, key, and edge components per level. This approach eliminates ad-hoc shadow decisions and ensures standardized UI depth across cards, modals, and panels.

Can I output shadow scale tokens to a Tailwind config or CSS variables?▼

Yes, shadow scale tokens can be output directly to CSS Custom Properties, Tailwind config, or JSON token formats. This cross-platform support ensures your elevation system integrates seamlessly into your existing development workflow.

How do dark mode adjustments work for UI elevation shadows?▼

Dark mode adjustments for elevation shadows modify the ambient, key, and edge layers to ensure depth remains visible against darker surfaces. This creates distinct dark mode variants for your shadow scale without requiring manual CSS overrides.

What is the best way to create a scalable depth system for UI components?▼

The best way to create a scalable depth system is implementing a layered shadow model with configurable elevation levels. Applying these standardized tokens across components like surfaces and pressed states ensures visual consistency and maintainable design architecture.

Does this shadow token generator support inset shadows for pressed states?▼

Yes, the shadow token generator supports inner inset shadows specifically for pressed states. This allows you to define interactive component behaviors within the same scalable elevation system used for standard drop shadows.

Why use a layered shadow model instead of a single box-shadow for UI depth?▼

A layered shadow model uses separate ambient, key, and edge components to create realistic, scalable UI depth, unlike single box-shadows that often appear harsh. This structured approach ensures elevation remains consistent and adaptable across all components.