Elevation

The TpGroup elevation system uses 4 shadow levels to create depth and visual hierarchy. Shadows help distinguish interactive elements and establish component layering.

Shadow Scale

shadow-sm

Subtle depth, hover states, small cards

Elevation 1
SM

box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05)

shadow-md

Default cards, dropdowns, popovers

Elevation 2
MD

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)

shadow-lg

Modals, drawers, prominent cards

Elevation 3
LG

box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1)

shadow-xl

Large modals, overlays, maximum depth

Elevation 4
XL

box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1)

Visual Comparison

sm

sm

Level 1

md

md

Level 2

lg

lg

Level 3

xl

xl

Level 4

Usage Examples

Cards

Different elevation levels for card components

Subtle card

Small Shadow

shadow-sm

Default card

Medium Shadow

shadow-md

Prominent card

Large Shadow

shadow-lg

Buttons

Elevation states for interactive elements

Button

Rest State

shadow-none

Button

Hover State

shadow-sm

Button

Active State

shadow-md

Layers

Stacking order using elevation

z-10

Base Layer

shadow-sm

z-20

Middle Layer

shadow-md

z-30

Top Layer

shadow-xl

Interactive States

Rest

No shadow or shadow-sm

Hover

shadow-sm or shadow-md

Active/Focus

shadow-md or shadow-lg

Code Example

/* CSS Custom Properties */
--shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);

/* Tailwind Classes */
<div className="shadow-sm">
<div className="shadow-md">
<div className="shadow-lg">

/* Hover States */
<button className="shadow-sm hover:shadow-md">

/* Direct CSS */
box-shadow: var(--shadow-md);

Component Recommendations

ComponentShadow LevelUse Case
Cards (default)shadow-smSubtle separation from background
Dropdownsshadow-mdFloat above content
Popoversshadow-mdClear visual hierarchy
Modalsshadow-lgStrong focus and depth
Tooltipsshadow-mdContextual information layer
Sticky Headersshadow-smSubtle depth on scroll

Elevation Guidelines

  • • Use shadows sparingly - not every element needs elevation
  • • Higher shadows indicate higher z-index and importance in the visual hierarchy
  • • Animate shadow changes on hover/focus for interactive feedback
  • • Avoid mixing multiple shadow levels on closely positioned elements
  • • Consider dark mode - shadows may need adjustment for light-on-dark interfaces