Confirmation dialogs that don't make people flinch

Summary

A frameless, full-bleed marketing page for an AI design-agent prompt-library ('ModalDesign'), anchored on one confirmation dialog rendered live over a dimmed, blurred faux app page. The page stacks top to bottom: a sticky translucent nav, a dot-grid hero with a giant balanced headline (the phrase 'don't make people flinch' set in emerald with a hand-drawn underline squiggle) and two CTAs, the showcase section where a centered white dialog (top emerald accent bar, a soft-ringed emerald check icon, a question title + plain-language body, a Cancel/primary action pair, and a tiny lock reassurance line) floats above six faux dashboard cards behind a 62% scrim, a white 'Anatomy' section of five numbered feature tiles plus an emerald 'restyle in one prompt' CTA tile, a near-black 'Variants' band showing the same dialog skeleton in three intents (emerald confirm, amber warning, rose danger), an emerald-accented dot-grid library CTA card, and a footer. The aesthetic is clean light-SaaS: white surfaces, a slate 'ink' neutral ramp, a single emerald accent, Inter throughout, generous rounded-2xl corners, and soft layered shadows, with one deep 'dialog' drop-shadow reserved for the modal itself.

Style

A clean, modern light-SaaS aesthetic built on white (#ffffff) surfaces over a slate-tinted neutral 'ink' ramp (ink-50 #f8fafc, 100 #f1f5f9, 200 #e2e8f0, 300 #cbd5e1, 400 #94a3b8, 500 #64748b, 600 #475569, 700 #334155, 800 #1e293b, 900 #0f172a, 950 #020617) with a single emerald accent ramp (50 #ecfdf5, 100 #d1fae5, 200 #a7f3d0, 300 #6ee7b7, 400 #34d399, 500 #10b981, 600 #059669 PRIMARY, 700 #047857, 800 #065f46, 900 #064e3b). Body text is ink-900 #0f172a on white; muted copy is ink-500 #64748b; the primary action color is emerald-600 #059669 (hover emerald-700 #047857). Type is Inter throughout (weights 400-900) with antialiased smoothing: extrabold tracking-tight display headlines (text-4xl up to text-6xl) that use text-wrap:balance, lg/15px relaxed-leading body in ink-500, and tiny uppercase tracking-wider eyebrow labels. Corners are generously rounded (rounded-lg on buttons/small chips, rounded-xl on larger buttons, rounded-2xl on cards and the dialog, rounded-3xl on the library CTA card, rounded-full on pills). Depth is soft and layered via two custom shadows: 'soft' (0 1px 2px rgba(2,6,23,0.06), 0 8px 24px -12px rgba(2,6,23,0.12)) on nav buttons, chips and cards, and a deep 'dialog' shadow (0 40px 80px -20px rgba(2,6,23,0.45), 0 12px 28px -8px rgba(2,6,23,0.30)) reserved for the floating modal and card hover states. Two signature textures: a '.dotgrid' radial dot pattern (radial-gradient(circle at 1px 1px, rgba(15,23,42,0.06) 1px, transparent 0) tiled 22px x 22px) on the hero and library CTA, and a '.backdrop-dim' modal scrim (a radial emerald glow rgba(16,185,129,0.10) at top center over rgba(2,6,23,0.62) with a 3px backdrop-blur). Emerald is rationed to accents: the logo glyph, the underline squiggle, the eyebrow pills, the dialog top bar gradient + check icon + primary buttons, hover borders on the anatomy tiles, and the library CTA. One special focus ring: '.ring-emerald-soft' = box-shadow 0 0 0 4px rgba(16,185,129,0.18) around the dialog status icon.

Layout & Structure

A single-column, full-bleed responsive marketing page; most sections center their content in an inner mx-auto max-w-7xl px-6 lg:px-8 container, while the hero copy and section intros use a narrower max-w-2xl/3xl. Stacked top to bottom: a sticky translucent nav (h-16) -> a dot-grid hero (eyebrow pill + balanced headline with an emerald underlined phrase + sub + 2 CTAs) -> the showcase section (a faux dashboard page behind a dimmed/blurred scrim with the live confirmation dialog centered, min-height 640px) -> a white 'Anatomy' section (centered intro + a responsive 1/2/3-col grid of five numbered feature tiles + one emerald 'restyle in one prompt' CTA tile) -> a near-black (ink-950) 'Variants' band (centered intro + a 1/3-col grid of three mini-dialog cards: emerald confirm, amber warning, rose danger) -> a white 'Library' section holding one emerald-accented dot-grid CTA card (rounded-3xl) -> a footer. Sections are separated by hairline ink-200/70 borders; the page reflows from 3-col grids to single column and the dialog button pair flips to a stacked flex-col-reverse on mobile (so the primary action sits on top).

Sticky translucent nav

Dot-grid hero

Showcase: dialog over a dimmed page

Anatomy section

Variants dark band

Library CTA + footer

Special Notes

Stack: Tailwind via CDN (cdn.tailwindcss.com) with a custom inline theme: fontFamily.sans = ['Inter', ui-sans-serif, system-ui, -apple-system, sans-serif]; a slate-tinted 'ink' color ramp (50 #f8fafc -> 950 #020617) and an 'emerald' ramp (50 #ecfdf5 -> 900 #064e3b); two custom boxShadows: 'dialog' = 0 40px 80px -20px rgba(2,6,23,0.45), 0 12px 28px -8px rgba(2,6,23,0.30) and 'soft' = 0 1px 2px rgba(2,6,23,0.06), 0 8px 24px -12px rgba(2,6,23,0.12). Google Fonts: Inter (400/500/600/700/800/900). Icons: Phosphor via Iconify (code.iconify.design/3/3.1.1/iconify.min.js), icons used: ph:squares-four-bold, ph:arrow-up-right-bold, ph:cards-bold, ph:cursor-click-bold, ph:check-circle-bold, ph:x-bold, ph:rocket-launch-bold, ph:lock-simple-bold, ph:circle-half-tilt-bold, ph:seal-check-bold, ph:text-aa-bold, ph:x-circle-bold, ph:magic-wand-bold, ph:arrow-right-bold, ph:warning-bold, ph:trash-bold, ph:copy-bold, ph:github-logo-bold, ph:x-logo-bold, ph:book-open-bold. Custom CSS: html { scroll-behavior: smooth }; body font-family Inter + -webkit-font-smoothing: antialiased; .dotgrid (radial-gradient(circle at 1px 1px, rgba(15,23,42,0.06) 1px, transparent 0) sized 22px 22px); .backdrop-dim (radial emerald glow rgba(16,185,129,0.10) over rgba(2,6,23,0.62) + backdrop-filter blur(3px)); .text-balance (text-wrap: balance); .ring-emerald-soft (box-shadow 0 0 0 4px rgba(16,185,129,0.18)). Key techniques to preserve: (1) the dialog is rendered LIVE over a real dimmed/blurred faux dashboard page (3 stacked layers: placeholder page z-0, .backdrop-dim scrim z-10, dialog z-20) so it reads as a true overlay, not a flat card; (2) the dialog's action pair is flex flex-col-reverse on mobile and sm:flex-row on desktop, so the primary 'Yes, publish' sits ON TOP on small screens while the cancel stays left on desktop, and the dialog keeps a visible close X + a lock reassurance line so users are never trapped; (3) emerald is rationed to accents (logo glyph, hand-drawn underline, eyebrow pills, dialog top bar + check + primary buttons, anatomy hover borders, library CTA) over otherwise white/slate surfaces; (4) one deep .shadow-dialog drop-shadow is reserved for the floating modal (and card hover); everything else uses the lighter .shadow-soft; (5) the SAME dialog skeleton is shown three ways in the dark Variants band (emerald confirm / amber warning / rose danger), the tone living only in the icon, the accent fill and the verb; (6) text-wrap: balance on the big headlines and a hand-drawn SVG marker underline under the emerald phrase give the otherwise tidy page its warmth. Built/rendered responsive at 1440/768/390 and reproduced 1:1 via the superdesign CLI.