01 / Shared DNA

Dialogs, sheets, lightboxes, palettes

Every floating surface the Mufflermen workshop uses to interrupt, confirm, escalate, celebrate, or surface dense detail without leaving the page. Each primitive is on its own route with realistic Oak Flats domain content.

Production answer

Dialogs, sheets, lightboxes, palettes is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Dialogs, sheets, lightboxes, palettes states
Generative search brief

Dialogs, sheets, lightboxes, palettes: Every floating surface the Mufflermen workshop uses to interrupt, confirm, escalate, celebrate, or surface dense detail without leaving the page. Each primitive is on its own route with realistic Oak Flats domain content.

Index · 15 overlays

Pick a surface

Each route opens the primitive in isolation with a focused demo button, an explanation of the typical Oak Flats use case, and accessible keyboard interaction.

01

Basic dialog

Centred dialog with blurred backdrop, header, scroll body, and a footer action row. Default for everyday flows.

Inspect primitive states
02

Confirm dialog

Two-button confirmation with a destructive variant for purge / cancel / refund-style workshop actions.

Inspect primitive states
03

Alert dialog

Hard alert with a pulsing warning ring. Single acknowledge button; cannot be dismissed by outside click.

Inspect primitive states
04

Side sheet

Right / left side sheet with sticky header, scrollable body and sticky footer for detail editing.

Inspect primitive states
05

Bottom sheet

Mobile-first bottom sheet with drag handle, title, body, and footer actions. Animates up from the floor.

Inspect primitive states
06

Top banner sheet

Top-anchored sheet for site-wide announcements, cookie consent, scheduled outage notices.

Inspect primitive states
07

Full takeover

Full-viewport modal with optional minimise affordance. Use for focus-mode review screens.

Inspect primitive states
08

Image lightbox

Image lightbox with zoom, pan, thumbnail strip, and arrow / Esc keyboard navigation.

Inspect primitive states
09

Video lightbox

Video lightbox with native controls. Reduced-motion replaces playback with a still poster.

Inspect primitive states
10

Wizard modal

Multi-step modal with internal stepper. Skip-able stages, back-stepping, and a finish action.

Inspect primitive states
11

Command modal

Spotlight-style command palette with grouped results, kbd shortcuts, recents, and auto-animated list.

Inspect primitive states
12

Rich popover

Anchored popover with header / body / footer slots. Use for detail cards, in-place edits, helper menus.

Inspect primitive states
13

Toast tray

Stacked toast region with per-corner placement, tone-tinted edge, optional action, and dismiss.

Inspect primitive states
14

Loading overlay

Translucent loading veil with brand-tinted spinner and optional descriptive copy.

Inspect primitive states
15

Confetti modal

Celebration modal that fires confetti on open. Used for milestone moments like first job completed.

Inspect primitive states