---
title: Elevation
description: Only floating surfaces cast a shadow. Each shadow carries its own hairline ring.
---

```tsx
const SHADOWS = [
  {
    name: "shadow-raised",
    className: "h-20 rounded-lg bg-overlay shadow-raised",
    usage: "Raised buttons and pickers, the workspace pill.",
  },
  {
    name: "shadow-floating",
    className: "h-20 rounded-lg bg-overlay shadow-floating",
    usage: "The action bar.",
  },
  {
    name: "shadow-popover",
    className: "h-20 rounded-lg bg-overlay shadow-popover",
    usage: "Menus, popovers, tooltips.",
  },
];

export default function Elevation() {
  return (
    <div className="grid grid-cols-3 gap-6 bg-default p-2 font-sans text-body-md text-default">
      {SHADOWS.map((shadow) => (
        <div className="flex flex-col gap-3" key={shadow.name}>
          <div className={shadow.className} />
          <code className="font-medium">{shadow.name}</code>
          <span className="text-body-md text-muted">{shadow.usage}</span>
        </div>
      ))}
    </div>
  );
}
```

- Surfaces in the page flow are flat and set apart by `bg-inset` or `bg-control`, not by shadow.
- The 1px ring is part of the shadow, so no surface needs a border.