Components & Patterns

Modals & Overlays

When something must interrupt the flow — a confirmation, a focused form, a search result set — it gets a modal. The brand keeps them square, bordered, and calm: no rounded corners, no glow, no bounce.

Doc 17 / 32Group Components & Patterns

01Live example

Click to open. Dismiss with the ×, the Cancel button, the backdrop, or the Esc key.

02Anatomy

Backdrop

A single charcoal scrim at rgba(45,45,45,0.55). No blur — the brand does not use frosted glass. The backdrop is itself a dismiss target.

Container

Bone-white panel, 1 px charcoal border, --shadow-lg. Square corners. Width clamps: min(440px, 90vw) for dialogs, wider for content browsers.

Header

Title in Lexend Deca + a × close affordance, separated from the body by a 1 px rule. The × turns signal-red on hover.

Footer

Actions right-aligned. Primary action is the red bracketed CTA; secondary is the bone "ghost" button. Never more than two.

03Behavior rules

Dismissal: ×, Cancel, backdrop click, and Esc all close. Destructive confirmations require an explicit button — backdrop click should not confirm.
Focus: on open, move focus into the modal; trap it while open; return it to the trigger on close.
Scroll: lock the body behind the overlay so the page doesn't scroll under it.
Stacking: avoid modal-on-modal. If unavoidable, the second sits at a higher z-index with its own backdrop; closing it returns to the first.
Motion: a calm fade is the most a modal should do. No slide-bounce, no scale-spring.

Field note. A modal is a small apology for interrupting. Keep the copy short, the choices few, and the way out obvious.

04Sizing

Use	Width	Notes
Confirmation	360–440 px	One question, two buttons.
Focused form	480–560 px	Single column, labels above fields.
Content browser	600–720 px	Search results, pickers — body scrolls, header/footer pinned.