Modal: Destructive confirm dialogs, designed right
A destructive-confirm modal in a clean white + ink + signal-red system: a centered white dialog lifted by one soft shadow, a pulsing red warning icon, an 'Irreversible' chip, a specific named title, a quantified 'this can’t be undone' consequence line, and a paired quiet Cancel / red Delete action, on a full pattern-library page (anatomy, good-vs-bad, principles).
Summary
A full destructive-confirm modal landing page in a clean white + ink + signal-red system: a sticky frosted nav, an editorial hero that pairs a heavy Inter headline with the real centered confirm dialog (animated warning icon, an 'Irreversible' chip, a named title 'Delete Q3 Launch canvas?', a quantified consequence note, and a paired Cancel / red Delete action), a four-card 'Anatomy' breakdown of the dialog, a side-by-side good-vs-bad ('Are you sure?' anti-pattern vs a specific 'Delete 18 records?' dialog), a six-card prompt-library strip, a dark principles band, a dark rounded CTA, and a hairline footer. Built on Inter (weights 400-900) with a single signal-red accent family and a cool ink neutral ramp; depth comes from one large soft 'dialog' shadow, hairline borders, blur-glow blobs, and a faint dotted paper grain rather than heavy chrome.
Style
A precise, product-design-system aesthetic on a white canvas with a cool near-black ink neutral ramp and one signal-red accent reserved for the destructive action and warning state. It reads like a real design-tool docs / pattern-library site: calm white and pale-ink surfaces, hairline borders, generous whitespace, a single heavy headline weight, and red used only where it means 'danger'. The only true drama is the confirm dialog itself, lifted off the page by one large soft shadow and ringed in hairline ink; everything else stays flat and quiet so the red button and the warning icon carry all the urgency.
Layout & Structure
A single scrolling marketing page anchored by a `sticky top-0 z-50` translucent header, then six full-width sections each using a centered `mx-auto max-w-7xl px-6 lg:px-8` container with `py-20 lg:py-28` rhythm: (1) a 12-col hero splitting copy (left, col-span-6) and the real centered confirm dialog (right, col-span-6) over glow blobs + grain; (2) an 'Anatomy' section with a left intro block and a 1->2->4-col card grid; (3) a centered-heading good-vs-bad patterns section with a max-w-4xl 1->2-col specimen pair; (4) a prompt-library strip with a header row (title + 'open library' link) and a 1->2->3-col card grid; (5) a dark ink-900 principles band as a 12-col split (heading col-span-5 / a divide-y rule list col-span-7); (6) a dark rounded-[28px] CTA panel; closed by a hairline footer that reflows to a column on mobile. The whole page reflows cleanly to a single column at 390px (the hero stacks copy over dialog, all grids collapse to one column, nav links hide behind the persistent buttons).
Sticky translucent header
Hero: copy + the real confirm dialog
The confirm dialog (the centerpiece)
Anatomy four-card grid
Good-vs-bad patterns pair
Prompt-library strip
Dark principles band
Dark CTA panel + footer
Special Notes
Single typeface: Inter (Google Fonts, weights 400/500/600/700/800/900); headings font-extrabold (800), eyebrows 13px bold uppercase tracking-[0.18em]. Icons are Phosphor via Iconify (ph:warning-octagon-fill, ph:warning-fill, ph:prohibit-bold, ph:trash-simple-bold, ph:trash-bold, ph:question-bold, ph:check-circle-fill, ph:x-circle-fill, ph:check-bold, ph:keyboard-fill/bold, ph:arrow-down-right-bold, ph:arrow-right-bold, ph:cursor-click-fill, ph:text-aa-bold, ph:info-bold, ph:arrow-counter-clockwise-bold, ph:sign-out-bold, ph:user-minus-bold, ph:credit-card-bold, ph:eye-bold, ph:hand-bold, ph:chat-text-bold). Exact tokens — neutrals 'ink': 50 #f7f8fa, 100 #eef1f5, 200 #dde2ea, 300 #c2cad6, 400 #8c97a8, 500 #5d6779, 600 #444d5e, 700 #323a48, 800 #21262f, 900 #141820; accent 'signal' (red, danger only): 50 #fef3f1, 100 #fde3de, 200 #fbc7bd, 400 #ff6a52, 500 #e5341f, 600 #cf2a17, 700 #ac2213. Shadows: 'dialog' = 0 40px 80px -20px rgba(20,24,32,0.35), 0 12px 28px -12px rgba(20,24,32,0.25); 'card' = 0 1px 2px rgba(20,24,32,0.04), 0 12px 32px -16px rgba(20,24,32,0.18). Effects: a dotted 'grain' radial-gradient (circle 1px rgba(20,24,32,0.04) on 22px tile) on ink-50 bands, large blur-3xl glow blobs behind the hero and dark CTA, and the warning-icon 'pulse-ring' keyframe. The whole page is a `sticky top-0` nav over six max-w-7xl sections and reflows to a single column at 390px (hero stacks copy over dialog, all grids collapse, nav links hide, the buttons persist). Accessibility intent: red is reserved strictly for the destructive action + warning state, the safe Cancel button gets visual default weight, and the dialog states a specific object + a quantified, recoverability-explicit consequence.