---
url: https://brand.okrado.com/patterns/overlays/
title: Overlays
description: "One contract for every layer that floats: layers, sizes, stacking, dismissal, focus and motion."
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Overlays

> One contract for every layer that floats: layers, sizes, stacking, dismissal, focus and motion.

Every overlay follows one contract (ADR-0108), so a menu inside a dialog and a toast over a drawer behave the same everywhere.

## Layers and sizes

Layers come from tokens, not DOM order. Dialog sizes are 440, 560 and 720 px, full screen below 640 px. Drawer widths are 340, 480 and 640 px, from the inline end (mirrored in right to left).

| Token | CSS variable | Value |
| ----- | ------------ | ----- |

| Token | CSS variable | Value |
| ----- | ------------ | ----- |

## Stack depth

At most two. A dialog may sit over a drawer; an alert dialog may open over either for a discard or delete; never a third level. A toast never opens a modal. A tooltip never lives inside a modal’s focus trap.

## Dismissal

| Overlay                             | Escape       | Outside press                 | Close button |
| ----------------------------------- | ------------ | ----------------------------- | ------------ |
| Informational dialog, popover, menu | yes          | yes                           | yes          |
| Dialog with inputs                  | yes, guarded | no                            | yes, guarded |
| Alert dialog                        | yes (cancel) | no                            | optional     |
| Drawer and sheet                    | yes          | yes, unless the form is dirty | yes          |

A dirty form vetoes the close and asks “Discard changes?”, with “Keep editing” focused.

## Focus

Initial focus goes to the first tabbable element, to the title for long content, and to the least destructive button for an irreversible action. Focus returns to the trigger when the layer closes. A modal always shows a close control; the focus ring is 2 px.

## Motion

Tooltip uses `micro`; menu, popover and toast use `standard`; dialog, drawer and sheet use `panel`. Exits are 0.8 times as long. Reduced motion keeps only a fade.

## Pages

[Dialog](https://brand.okrado.com/patterns/dialog/), [Alert dialog](https://brand.okrado.com/patterns/alert-dialog/), [Drawer](https://brand.okrado.com/patterns/drawer/), [Popover](https://brand.okrado.com/patterns/popover/), [Menu](https://brand.okrado.com/patterns/menu/), [Tooltip](https://brand.okrado.com/patterns/tooltip/), [Toast](https://brand.okrado.com/patterns/toast/), [Keyboard shortcuts](https://brand.okrado.com/patterns/shortcuts/).