Shadows

Elevation tokens for depth and visual hierarchy.

Preview

Name

Usage

Extra Smallshadow-xs

Cards, subtle buttons

Smallshadow-sm

Cards, subtle buttons

Mediumshadow-md

Tooltips, toasts, dropdowns

Largeshadow-lg

Popovers, menus, floating panels

Extra Largeshadow-xl

Modals, dialogs

Extra Extra Largeshadow-2xl

Critical alerts, emergency notifications

Overview

Shadows in the Rogo design system create visual hierarchy by simulating elevation. Elements with shadows appear to float above the surface, drawing attention and establishing spatial relationships. The shadow scale progresses from subtle to prominent, with each level serving specific UI patterns.

All shadows use Tailwind's built-in shadow utilities, which are consistent across light and dark modes. Choose shadow intensity based on the element's importance and how far it should appear from the background.

Shadow Scale

The shadow scale provides six levels of elevation, from barely perceptible to highly prominent.

Tailwind Class	Elevation	Usage
`shadow-xs`	Minimal	Subtle separation for cards and containers that need slight definition.
`shadow-sm`	Low	Cards, list items, and elements needing gentle lift from the background.
`shadow-md`	Medium	Tooltips, toasts, and small floating elements. Standard for transient UI.
`shadow-lg`	High	Popovers, dropdown menus, and floating panels. Clear separation from content.
`shadow-xl`	Very High	Modals and dialogs. Draws focus to important interactions.
`shadow-2xl`	Maximum	Critical alerts and emergency states. Use very sparingly.

Component Mapping

Different UI patterns call for specific shadow levels. Use this guide to choose the right elevation.

Component Type	Recommended Shadow	Rationale
Cards (static)	`shadow-xs` or `shadow-sm`	Subtle lift without competing for attention.
Cards (interactive)	`shadow-sm` → `shadow-md` on hover	Increased elevation on interaction signals clickability.
Tooltips	`shadow-md`	Moderate elevation for transient, contextual information.
Toasts	`shadow-md`	Consistent with tooltips; appears above content but isn't primary focus.
Dropdown menus	`shadow-lg`	Clear separation from trigger; contains interactive options.
Popovers	`shadow-lg`	Floating panels need distinct elevation from underlying content.
Modals/Dialogs	`shadow-xl`	Maximum practical elevation; demands user attention.
Critical alerts	`shadow-2xl`	Reserved for urgent, blocking interactions.

Combining with Borders

Shadows work best with subtle or no borders. Heavy borders combined with strong shadows create visual noise.

Pattern	Usage
`shadow-sm border-primary`	Light shadow with subtle border for cards. Good default.
`shadow-md` (no border)	Medium shadow alone for floating elements like tooltips.
`shadow-lg border-primary`	Higher elevation with border for menus with defined edges.
`shadow-xl` (no border)	Strong shadow alone for modals; border unnecessary at this elevation.

Hover States

Increasing shadow on hover creates a "lift" effect that signals interactivity.

State	Class	Usage
Default	`shadow-sm`	Resting state for interactive cards.
Hover	`hover:shadow-md`	Subtle lift on hover indicates clickability.
Active	`active:shadow-sm`	Return to base elevation on click for tactile feedback.

tsx

// Interactive card with shadow hover effect
<div className="shadow-sm hover:shadow-md active:shadow-sm transition-shadow">
  Card content
</div>

Usage Guidelines

Do

Use shadow-sm or shadow-xs for static cards and containers
Increase shadow on hover to indicate interactivity (shadow-sm → shadow-md)
Use shadow-lg for dropdown menus, popovers, and floating panels
Reserve shadow-xl for modals and dialogs that require user attention
Add transition-shadow when shadow changes on interaction
Combine subtle shadows with subtle borders for defined edges

Don't

Don't use shadow-2xl for standard UI elements—reserve for critical alerts
Don't apply shadows to inline elements or text
Don't combine heavy shadows with heavy borders
Don't use shadows on elements that don't need elevation (e.g., page sections)
Don't skip shadow levels dramatically on hover (e.g., shadow-xs → shadow-xl)
Don't forget transitions when shadow changes—abrupt changes feel broken
Don't use shadows as the only way to indicate interactivity; combine with color or other cues

PreviousIcons

NextGuidelines