Elevation
Visual depth using shadows and outlines—page, section, and surface hierarchy and shadow utilities from theme tokens.
Elevation is how we express depth: shadows and outlines show hierarchy, what can move or float, and how layers stack. Use it when you need clearer structure, affordance for interaction, or separation for transient UI (menus, dialogs, toasts).
Explore shadows
Page, section, and surface
Page wraps sections; sections group surfaces. Backgrounds use semantic functional tokens (bg-page, bg-section, bg-section-alternate, bg-surface, bg-surface-alternate).
bg-page
bg-section-alternate
bg-section
Page
The page is the root canvas: global background where headers, side rails, sections, and surfaces sit. Tokens map to bg-page and bg-page-alternate.
<main className="min-h-screen bg-page text-neutral-12">{/* … */}</main>The page has no shadow elevation—it is the baseline layer.
Section
A section subdivides the page with a different tone without adding shadow elevation. Use bg-section and bg-section-alternate.
<section className="bg-section-alternate px-scaled-4 py-scaled-6 text-neutral-12">{/* … */}</section>Surface
A surface reads as above its parent: background tone plus shadow and usually a border. The Card primitive defaults to bg-surface with border-neutral-alpha-3.
Flushed content inherits the parent background and drops border and shadow when you intentionally avoid a separate layer.
Outlines
Outlines are usually a border with border-neutral-alpha-*. They separate adjacent surfaces and reinforce grouping (Gestalt principles).
- If a surface background differs from its parent, keep a visible border unless the layout is intentionally flushed.
Default
border-neutral-alpha-3bg-surface or bg-surface-alternateshadow-sm or shadow-noneDefault
border-neutral-6bg-surfaceshadow-sm or shadow-noneShadow utilities
Values resolve under [data-ds-theme='fractal'] for light and dark. Tailwind reads the @theme aliases in theme.css:
inset-shadow-xs— recessed controls and editors.shadow-none— flat cards and dense layouts.shadow-sm— subtle lift from page or section.shadow-md— emphasis for interactive states.shadow-lg— floating menus, popovers, dialogs, toasts.shadow-xl— drawers, floating command areas, top overlays.
Elevated surfaces should keep a border unless the surface fully inherits its parent background.
Card gallery
Full Card examples for each utility: