Shadows

Elevation tokens for depth and visual hierarchy.

Use these for elevated surfaces — the hairline edge is baked in, so never add a border/ring.

Preview

Name

Usage

Extra Smallshadow-ring-xs

Panel shells, list/chat cards, pills

Smallshadow-ring-sm

Popovers, small floating panels

Mediumshadow-ring-md

Dropdowns, menus, selects

Largeshadow-ring-lg

Menubars, command palettes, slash menus

Extra Largeshadow-ring-xl

Modals, dialogs

Extra Extra Largeshadow-ring-2xl

Critical alerts

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.

Choose elevation based on the element's importance and how far it should appear from the background. Every shadow-ring-* class bakes a theme-aware 1px hairline into the shadow as its final layer, so an elevated surface gets its edge for free — see Shadow + Ring.

Shadow Scale

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

Class	Elevation	Usage
`shadow-ring-xs`	Minimal	Panel shells, list/chat cards, pills.
`shadow-ring-sm`	Low	Popovers, small floating panels.
`shadow-ring-md`	Medium	Dropdowns, menus, selects.
`shadow-ring-lg`	High	Menubars, command palettes, slash menus.
`shadow-ring-xl`	Very High	Modals and dialogs. Draws focus to important interactions.
`shadow-ring-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 (elevated)	`shadow-ring-xs` or `shadow-ring-sm`	Subtle lift with a crisp edge, no separate border.
Active tab pill	`shadow-raised`	Theme-aware chip lift: `shadow-ring-xs` in light, one stronger layer in dark (no `dark:` override).
Cards (interactive)	`shadow-ring-xs` → `shadow-ring-md` on hover	Increased elevation on interaction signals clickability.
Dropdowns / menus	`shadow-ring-md`	Clear separation from trigger; contains interactive options.
Popovers	`shadow-ring-sm`	Floating panels need distinct elevation from underlying content.
Command palettes	`shadow-ring-lg`	High elevation for a focused, full-width surface.
Modals / Dialogs	`shadow-ring-xl`	Maximum practical elevation; demands user attention.
Critical alerts	`shadow-ring-2xl`	Reserved for urgent, blocking interactions.

Shadow + Ring

Every elevated surface draws a single edge that morphs into its shadow. Pick by whether the element is elevated:

Pattern	When to use
`shadow-ring-*`	Elevated surfaces (dialogs, popovers, dropdowns, menus, panel shells, elevated cards). The theme-aware 1px hairline is baked into the shadow as its final layer. This is the default for anything that floats.
`border` / `ring` (no shadow)	Non-elevated dividers, sidebars, table cells, and flat cards-by-design that sit in the layout rather than above it.

Never combine shadow-ring-* with a border/ring on the same element. The hairline is already in the shadow, so a manual border draws the edge twice — it reads washed/greyed, worst in dark mode. That doubling is exactly what the shadow-ring-* classes exist to prevent.

Tuning the hairline

The hairline defaults to a subtle, theme-aware neutral — the right choice for almost every surface. If one needs a touch more definition, override it with the hairline-* utility and an opacity modifier; only the 1px ring changes.

tsx

// A slightly stronger edge than the default hairline
<div className="shadow-ring-md hairline-black/10">…</div>

hairline-* takes any theme color, so a tint works the same way (shadow-ring-md hairline-red-500/30) — but reserve color for intentional accents, like a destructive or selected state, not as a default. Semantic tokens (hairline-brand-primary) follow the theme and adapt between light and dark like the default hairline; a raw palette color or literal (hairline-red-500, hairline-black/10) is fixed and won't.

Hover States

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

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

tsx

// Interactive elevated card — the ring stays consistent as elevation lifts
<div className="shadow-ring-xs hover:shadow-ring-md active:shadow-ring-xs transition-shadow">
  Card content
</div>

Usage Guidelines

Do

Use shadow-ring-* for any elevated surface — it carries its own hairline edge
Increase elevation on hover to indicate interactivity (shadow-ring-xs → shadow-ring-md)
Use shadow-ring-md for dropdowns/menus, shadow-ring-xl for modals and dialogs
Add transition-shadow when elevation changes on interaction
Use a standalone border/ring (no shadow) for non-elevated dividers and sidebars

Don't

Don't combine a border (or ring) with a shadow on the same element — drop the border and use the combined shadow-ring-* class instead (switch it over if it isn't already)
Don't use shadow-ring-2xl for standard UI elements—reserve for critical alerts
Don't apply shadows to inline elements or text
Don't use shadows on elements that don't need elevation (e.g., page sections)
Don't skip elevation levels dramatically on hover (e.g., shadow-ring-xs → shadow-ring-xl)
Don't forget transitions when elevation changes—abrupt changes feel broken
Don't use shadows as the only way to indicate interactivity; combine with color or other cues

PreviousIllustrations

NextSkills