Shadows

Named elevations

Tailwind’s default shadows are switched off. Each shadow in the system has a name and one job, so the same depth always means the same kind of element. Shadows are tinted with slate or deep blue, never pure black, so they stay calm on the lilac page.

• card Cards and empty states (level 1).
• tile List rows inside a well.
• offer Activity cards in the list.
• popover Filter and calendar popovers.
• menu Account menu in the navbar.
• toast Toasts.
• fab Floating buttons under the thumb.
• sheet Sheets rising from the bottom.
• hole Inner shadow of a well (deep blue at 20 %).

Scrim

Anything that slides over the screen (a sheet, the “More” menu) dims what is behind it with black at 50 %. Clicking the dimmed area closes the layer.