A dialog is a 16px panel on a rgba(0,0,0,.45) scrim, sized to its
job rather than to a scale: 400px for a confirmation, 540–620px for a working panel,
capped at 92vw and 86vh. Header and footer are fixed; only the body scrolls.
Panel dialog
Title with a supporting line, a close button, a scrolling body, and a footer whose buttons sit at opposite ends.
Export Clients
Based on your current view
Scope
Specs
| Part | Value |
|---|---|
| Scrim | rgba(0,0,0,0.45) · 0.40 on the confirm dialog · click to dismiss |
| Panel | radius 16px · shadow-2xl · 1px #E5E7EB · max-width 92vw · max-height 86vh · flex column |
| Width | 400px confirm · 540px / 620px panel |
| Header | padding 16px 24px · border-bottom 1px · does not scroll |
| Title | 16px / 700 · sub-line 12px muted at margin-top 2px |
| Close | 16×16px icon · padding 6px · radius 6px · hover #F9FAFB |
| Body | padding 20px 24px · overflow-y auto · the only scrolling region |
| Section label | 10px / 700 · uppercase · letter-spacing .05em · muted |
| Footer | padding 16px 24px · border-top 1px · justify-content: space-between |
| Buttons | padding 9px 17px · radius 8px · 12px · Cancel 400 on white, primary 600 on the gradient |
| Option row | padding 8px 12px · radius 8px · selected: rgba(166,20,195,.06) fill, rgba(166,20,195,.25) border, #A614C3 text |
Footer buttons are space-between, not right-aligned — Cancel sits at the far left. |
| Destructive confirmations are a different component; see Alert Dialog. |