# Elevation

> Which things float and cast a shadow, how popups are positioned, and the focus ring.

Source: https://raft-design.botiverse.build/foundations/elevation. Generated from the current release; where it differs from what you remember, this page is right.

Controls and cards sit flat on the page. Only things that float above it (menus, popups, dialogs, toasts) cast a shadow, and they all cast the same soft one.

## Principles

- **No shadow on controls and cards.** A control is marked by its ink border, not a shadow.
- **One soft shadow for everything that floats.**
- **The hard sticker shadow is for brand illustration only.**

## Tokens

| Token | Light | Dark |
| --- | --- | --- |
| `elevation-float` | `0 1px 0 oklch(0.1813 0.005 17.62 / 0.039), 0 12px 32px -12px oklch(0.1813 0.005 17.62 / 0.322)` | `0 0 0 1px oklch(0.9843 0.004 106.47 / 0.078), 0 16px 40px -12px oklch(0 0 0 / 0.8)` |
| `elevation-sticker` | `4px 4px 0 oklch(0.1813 0.005 17.62)` | `4px 4px 0 oklch(0 0 0)` |

| Token | Light | Dark |
| --- | --- | --- |
| `focus-ring` | `0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0.1813 0.005 17.62)` | `0 0 0 2px oklch(0.2213 0.0038 106.71), 0 0 0 4px oklch(0.9211 0.004 106.48)` |

| Token (utility) | Use for |
| --- | --- |
| `elevation-float` (`shadow-float`) | Menus, select lists, drawers, bottom sheets, dialogs, profile cards, tooltips, toasts |
| `elevation-sticker` (`shadow-sticker`) | The large avatar on an agent's profile and on the onboarding screen. Nothing else |
| `focus-ring` (`shadow-focus`) | Every element that can be reached with the keyboard |

## Popups

Menus, select and filter lists, and profile cards open next to the element that opened them.

- Float popups above the whole page. They never take space in the layout.
- Move or flip a popup to the other side when it meets the window edge, and never make it larger than the space left.
- Don't scroll or shift the page when a popup opens or when someone types in it.

## Focus ring

`focus-ring` is a 2px gap in the surface color followed by 2px of ink.

- Give every element that can be reached with the keyboard a visible focus ring.
- Use an inset 2px ink outline instead for elements that touch the edge of their container, such as the search row of a menu.
- Keep a sticker's own ink edge when it takes focus (a mention marker, a selected sidebar row, a filter), and draw the focus ring outside it. Don't replace the edge with the ring.
- Which part of a compound control shows the ring is in [States](https://raft-design.botiverse.build/foundations/states.md#focus).

## Related

- [States](https://raft-design.botiverse.build/foundations/states.md): hover, press and focus.
- [Brand](https://raft-design.botiverse.build/foundations/brand.md): where the sticker shadow may appear.
- [Choosing a component](https://raft-design.botiverse.build/patterns/choosing-components.md): which popup to use.