Define the elevation levels using shadows to create visual hierarchy and depth across Tendoo interfaces.

Elevation

Elevation is used to create depth and establish visual hierarchy by applying shadows to UI elements. It helps users understand the relationship between interface layers — such as what is interactive, floating, or in focus.

The Tendoo Design System defines elevation using a consistent scale of shadow tokens that work across both light and dark themes.

Why It Matters

Provides cues for interaction (e.g., modals appear above the page).
Communicates layout structure and depth.
Enhances aesthetics and improves usability.

Elevation Tokens

Token	Description	Usage Example
`elevation.none`	No shadow	Flat elements, base layout
`elevation.xs`	Very subtle depth	Cards, surfaces
`elevation.sm`	Small elevation	Tooltips, dropdowns
`elevation.md`	Moderate elevation	Modals, sheets
`elevation.lg`	High elevation	Dialogs, overlays
`elevation.xl`	Maximum elevation	Floating action buttons

✅ Use shadow tokens, not raw box-shadow values, to ensure consistency and theme adaptability.

Example Shadows

// elevation.tokens.ts
export const elevation = {
  none: "none",
  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.15)",
};

Usage Guidelines

Use elevation.xs for background surfaces like cards or sections.
Use elevation.md or lg for layered interfaces like modals, drawers, and sheets.
Avoid stacking shadows manually; choose the closest elevation level instead.
Ensure contrast between elevated elements and their backgrounds in both light and dark themes.

Theming Support

Tendoo shadows are tuned for both light and dark modes. Shadow opacity and softness are adjusted to maintain clarity without being harsh or overpowering.

Visual Example

<div className="shadow-md p-lg rounded-md bg-white dark:bg-slate-800">
  Elevated container with medium shadow.
</div>

Elevation helps define what matters most in the interface. Use it intentionally to improve clarity, usability, and visual hierarchy.

Elevation

On this page