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

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

shadow-md

Default cards, dropdowns, popovers

Elevation 2

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

shadow-lg

Modals, drawers, prominent cards

Elevation 3

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

shadow-xl

Large modals, overlays, maximum depth

Elevation 4

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

Visual Comparison

Level 1

Level 2

Level 3

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

Component	Shadow Level	Use Case
Cards (default)	shadow-sm	Subtle separation from background
Dropdowns	shadow-md	Float above content
Popovers	shadow-md	Clear visual hierarchy
Modals	shadow-lg	Strong focus and depth
Tooltips	shadow-md	Contextual information layer
Sticky Headers	shadow-sm	Subtle depth on scroll

Z-Index Scale

Semantic layering tokens replace ad-hoc z-50/ z-[1000] values. Each step is 10 units apart so a custom layer can slot between two tiers without renumbering.

Token	Tailwind	Value	Use case
--z-base	z-base	0	In-flow content
--z-dropdown	z-dropdown	10	Select / autocomplete panels
--z-sticky	z-sticky	20	Sticky headers, table headers
--z-overlay	z-overlay	30	Backdrops, scrims
--z-modal	z-modal	40	Dialogs, sheets, drawers
--z-popover	z-popover	50	Popovers, dropdown menus
--z-toast	z-toast	60	Toast / snackbar notifications
--z-tooltip	z-tooltip	70	Tooltips (always on top)

Focus Ring

Brand-aware focus indicators. --focus-ring-colortracks --color-accent, so each brand override re-tints the ring automatically.

--focus-ring-width

2px

--focus-ring-offset

2px

--focus-ring-color

var(--color-accent)

className="focus-ring-brand" — resolves via :focus-visible.

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