skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

elevation-and-depth

Apply elevation and depth design tokens to UI components for visual hierarchy.

Updated May 24, 2026
Search Tags:#ui-design#design-system#depth#elevation#border-radius#shadow-tokens
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill elevation-and-depth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: elevation-and-depth
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/elevation-and-depth
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill elevation-and-depth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Elevation and depth decisions determine how users perceive hierarchy. Without consistent shadows and borders, surfaces feel flat and interactions lose clarity.

Core Features & Use Cases

  • Define a centralized elevation scale as design tokens to ensure consistent shadows across components.
  • Pair elevation with border-radius and, where appropriate, subtle borders for white cards to maintain edge definition.
  • Guidance for dark mode surfaces and text-shadow usage to preserve readability and depth.

Quick Start

Apply elevation levels to a component by selecting the appropriate shadow tokens and border radius to visually lift it above the surface.

Frequently Asked Questions about elevation-and-depth

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

FAQPage Schema
How do I create consistent elevation and shadow tokens for a UI design system?▼

UI elevation uses a centralized scale of shadow tokens to ensure consistent visual depth across components. This approach standardizes hierarchy by applying defined shadow levels to cards, modals, and floating surfaces throughout the interface.

What is the best way to apply depth and visual hierarchy to floating surfaces?▼

The best way to apply depth is pairing elevation tokens with consistent border-radius values and subtle borders. This combination lifts components like dropdowns and tooltips visually above the base surface while maintaining clear edge definition.

How do I handle dark mode surfaces and text-shadow when applying UI elevation?▼

Dark mode surfaces require specific elevation guidance to preserve readability and depth. Instead of relying solely on shadows, dark mode uses adjusted surface colors and careful text-shadow usage to maintain clear visual hierarchy without losing contrast.

Why do my white cards look flat and lose edge definition when I apply shadows?▼

White cards lose edge definition when shadows are applied without borders. Combining elevation tokens with subtle borders ensures white surfaces maintain crisp boundaries and clear separation from the background while achieving the desired depth.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token

Organize design tokens into categories with naming conventions and usage rules.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
yogvidwankhedeyogvidwankhede
1

surface-and-depth

Standardize UI elevation and surface styling with token-based shadow systems.

Community
Advanced