Action List Modal — Teal

Summary

An action-list modal presented as the live hero of a product page for the placeholder brand 'ModalDesign' (a prompt-to-UI modal-recipe kit). The page opens on a clean white + slate-ink system with a single deep-teal accent, and the action-list dialog is the anchored hero centerpiece: a max-w-[420px] white rounded-2xl card with a centered bold title 'Choose an action', a vertical stack of FOUR action rows (each a circular icon + a label + a one-line description), with the 3rd row highlighted (teal tint + ring + filled teal icon + a return-key kbd and right chevron) as the likeliest choice, and a footer with a full-width Cancel plus a corner close button. Around the modal: a sticky frosted nav, a two-column hero (a status chip + a black headline with a teal highlight-marker underline + a lead + two CTAs + a keyboard-ready / responsive / WCAG-AA check row, beside the live modal floated over a dot-grid with a teal glow), an uppercase trust strip, a four-card 'Anatomy' band (Title / Action rows / Affordance / The way out), a full-bleed dark teal-950 'Patterns' band (three when-to-use cards), a 'Design tokens' band pairing a swatch list with a three-state row spec (rest / selected / disabled), a 'The prompt' CTA band with a dark teal-950 prompt.txt code panel, and a footer. The system is white-on-slate with a single reserved teal accent. Built on Inter, Solar icons via Iconify.

Style

A clean, calm, product-grade aesthetic built to make a generated action-list dialog feel deliberate rather than default. The mood is bright and airy: near-white slate surfaces (ink-50 #f8fafc) for the body and light bands, pure white for cards and the modal, with a single near-black slate for ink and a deep-teal accent that does ALL the work. Color is strictly disciplined: the slate 'ink' ramp (#f8fafc -> #0f172a) carries every surface and all text, and a single teal ramp (teal-50 #f0fdfa / teal-700 #0f766e / teal-950 #042f2e) is RESERVED for intent only (the brand 'Design' suffix, the logo tile, primary CTAs, the highlighted action row's tint + ring + filled icon + chevron + kbd, eyebrow labels, check icons, the dark 'Patterns' band and the dark prompt panel). No second accent competes, so the highlighted row always wins the eye. The hero floats the modal over a teal dotgrid (radial teal/0.18 dots at 18px) inside a soft teal-glow shadow (0 30px 60px -22px rgba(15,118,110,0.45) + 0 12px 26px -16px rgba(2,47,46,0.55)), with two faint teal blur orbs and a grain dot texture (radial teal/0.10 dots at 22px) behind it. Surfaces are hairlined with ink-200/70 borders, generous rounding (rounded-lg controls, rounded-xl rows + buttons, rounded-2xl cards + the modal, rounded-3xl on the prompt CTA card, rounded-full pills + the close target), and a soft-shadow on cards (0 22px 48px -24px rgba(15,23,42,0.30)) plus a row-shadow on the highlighted row (0 14px 30px -16px rgba(15,118,110,0.45)). Type is a single Inter family across weights 400-900: black (900) display headlines with tight tracking (-0.03em), bold section H2s, semibold labels and row titles, and uppercase widely-tracked (0.14-0.16em) eyebrows + trust-strip text. The headline carries a teal highlight-marker bar behind 'every next move.'; nav links use an .underline-grow that wipes a 2px teal underline in on hover. Motion is restrained and intentional: a .reveal utility fades + lifts sections in on scroll (IntersectionObserver), anatomy cards lift -translate-y-1 and gain a teal border on hover, rows tint to ink-50 (or teal-100/70 for the active row) on hover. The whole point: teal is the only accent, so it reads as a single deliberate 'intent' color and the likeliest choice in the list is unmissable.

Layout & Structure

A single vertically-scrolling product page on a shared mx-auto max-w-6xl px-5 sm:px-8 container, with the action-list modal as the anchored hero centerpiece (shown live, in context, not floated on a blank artboard). Order: (1) a sticky top-0 z-50 frosted nav (bg-ink-50/80 + backdrop-blur-xl, border-b border-ink-200/70); (2) a full-bleed hero on a from-white via-ink-50 to-ink-100 gradient with a .grain overlay and two teal blur orbs, holding a two-column grid (lg:grid-cols-[1.05fr_0.95fr]) — left a copy column (eyebrow chip + a black headline with a teal highlight-marker bar + a lead + two CTAs + a three-item check row), right the live action-list MODAL floated over a teal .dotgrid inside a .teal-glow card; (3) a white full-bleed uppercase trust strip (centered dot-separated facts); (4) a bg-ink-50 'Anatomy' band with a copy block + a four-card responsive grid (sm:grid-cols-2 lg:grid-cols-4); (5) a full-bleed dark teal-950 'Patterns' band (eyebrow + H2 + a 'Get the prompt' pill, over a three-card lg:grid-cols-3 grid of translucent teal-900/40 cards) with two teal blur orbs; (6) a white 'Design tokens' band with a two-column grid (lg:grid-cols-[0.9fr_1.1fr]) pairing a swatch <dl> with a 'Row spec' mini-preview card showing three row states; (7) a bg-ink-50 'The prompt' CTA band holding a rounded-3xl card split lg:grid-cols-[1fr_1fr] into a white copy half (eyebrow + H2 + lead + Copy/Preview CTAs) and a dark teal-950 prompt.txt code half; then a white footer. It reflows cleanly to mobile: the hero two-column grid collapses to one column (the modal stacks under the copy), the anatomy grid steps 1 -> 2 -> 4, the patterns grid steps 1 -> 3, the tokens + prompt grids collapse to one column (the prompt code panel moves below the copy with border-t instead of border-l), the nav center links hide (md:flex) and the 'Copy prompt' text link hides (sm:inline-block) while the teal 'Open in canvas' pill persists, the trust-strip dot separators hide on small screens (sm:block), and inside the modal the active row's kbd+chevron cluster collapses to a single chevron (sm:flex / sm:hidden).

Sticky frosted nav

Full-bleed hero (copy + live modal)

Trust strip (full-bleed)

Anatomy band (four cards)

Patterns band (full-bleed dark teal)

Design tokens band (swatches + row spec)

The prompt CTA band + footer

Special Notes

One Google Font: Inter (wght 400;500;600;700;800;900, font-sans, with -webkit-font-smoothing antialiased + text-rendering optimizeLegibility) used across the whole page (black 900 display headlines, bold H2s, semibold labels/row titles, mono only on the prompt.txt panel + kbd + token values via font-mono). Icons are Solar via Iconify (solar:layers-minimalistic-bold, solar:arrow-right-up-linear, solar:list-check-bold, solar:copy-bold, solar:arrow-down-linear, solar:check-circle-bold, solar:close-circle-linear, solar:magic-stick-3-bold, solar:gallery-add-bold, solar:import-bold, solar:arrow-right-linear, solar:menu-dots-bold, solar:text-bold-square-bold, solar:list-bold, solar:cursor-bold, solar:exit-bold, solar:share-circle-bold, solar:add-square-bold, solar:settings-bold, solar:ruler-pen-bold, solar:widget-2-bold, solar:lock-keyhole-bold, solar:eye-bold, solar:document-text-bold, solar:book-bold) plus ri:twitter-x-fill + ri:github-fill in the footer. EXACT tokens (Tailwind config) — teal ramp 50 #f0fdfa / 100 #ccfbf1 / 200 #99f6e4 / 300 #5eead4 / 400 #2dd4bf / 500 #14b8a6 / 600 #0d9488 / 700 #0f766e / 800 #115e59 / 900 #134e4a / 950 #042f2e; ink (slate) ramp 50 #f8fafc / 100 #f1f5f9 / 200 #e2e8f0 / 300 #cbd5e1 / 400 #94a3b8 / 500 #64748b / 600 #475569 / 700 #334155 / 800 #1e293b / 900 #0f172a / 950 #020617. Body bg ink-50 #f8fafc, text ink-900 #0f172a; ::selection bg #99f6e4 / color #042f2e. THE CORE DISCIPLINE (the point of this item): the slate-ink ramp carries every surface and all text, and a single deep-teal accent (#0f766e) is RESERVED for intent only — the brand 'Design' suffix + logo tile, primary CTAs (bg-teal-700 hover bg-teal-800), the highlighted action row (bg-teal-50 + ring-teal-200 + filled bg-teal-700 icon + teal chevron + teal kbd), uppercase eyebrows (text-teal-700/teal-300), check icons (text-teal-600), the dark teal-950 Patterns band and the teal-950 prompt panel — so no second accent competes and the likeliest choice in the list is unmissable. Radii: rounded-lg controls, rounded-xl rows + hero buttons, rounded-2xl cards + the modal, rounded-3xl on the prompt CTA card, rounded-full pills + the modal close + icon circles. Effects (custom CSS): .grain (radial teal/0.10 1px dots at 22px), .dotgrid (radial teal/0.18 1px dots at 18px), .teal-glow (0 30px 60px -22px rgba(15,118,110,0.45), 0 12px 26px -16px rgba(2,47,46,0.55)), .soft-shadow (0 22px 48px -24px rgba(15,23,42,0.30), 0 6px 16px -10px rgba(15,23,42,0.18)), .row-shadow (0 14px 30px -16px rgba(15,118,110,0.45)); two faint teal blur-3xl orbs on the hero and Patterns bands; a frosted sticky nav (bg-ink-50/80 + backdrop-blur-xl). Motion: a .reveal utility (opacity 0 + translateY(18px) -> in over .7s cubic-bezier(.16,1,.3,1)) driven by an IntersectionObserver (threshold 0.12, unobserve once shown) with staggered transition-delays; an .underline-grow nav-link hover (a 2px teal underline wiping 0% -> 100% over .3s); anatomy cards hover -translate-y-1 + hover:border-teal-200; default rows hover:bg-ink-50, the active row hover:bg-teal-100/70; ::selection paints teal-200-on-teal-950. Layout: a sticky top-0 z-50 frosted nav over a shared mx-auto max-w-6xl px-5 sm:px-8 container — a full-bleed gradient hero (copy column + the live action-list modal floated over a teal .dotgrid in a .teal-glow card), a white uppercase trust strip, a bg-ink-50 four-card Anatomy band, a full-bleed dark teal-950 Patterns band (three cards), a white Design-tokens band (a swatch <dl> + a three-state Row-spec preview), a bg-ink-50 'The prompt' CTA band (a rounded-3xl split card: white copy + a dark teal-950 prompt.txt panel), and a white footer. Responsive reflow: the hero lg:grid-cols-[1.05fr_0.95fr] collapses to one column (the modal stacks under the copy), the anatomy grid steps sm:grid-cols-2 lg:grid-cols-4, the patterns grid steps lg:grid-cols-3, the tokens lg:grid-cols-[0.9fr_1.1fr] + prompt lg:grid-cols-[1fr_1fr] collapse to one column (the prompt code panel moving below the copy with border-t replacing the lg:border-l), the nav center links hide (md:flex) and the 'Copy prompt' text link hides (sm:inline-block) while the teal 'Open in canvas' pill persists, the trust-strip dot separators hide (sm:block), and inside the modal the active row's kbd+chevron cluster collapses to a single chevron (sm:flex / sm:hidden). Accessibility intent: aria-label 'Close' on the modal close button, WCAG-AA contrast claimed in the hero check row, full-width keyboard-reachable button rows, and a return-key kbd hint on the active row.