BRAND Stripe 2026 · Recipe: bento-dialogs

HEADER brand: Stripe; design_date: 2026-09; kind: component; used_in: Page: home S4 "Flexible solutions for every business model." evidence: measured from stylesheets and HTML (2026-09-23 and 2026-09-25) unless marked LOOK A calm grid of large white cards, each with a one-line product title at the top left, a small square expand button at the top right, and a rich product UI graphic filling the rest on a warm gradient. Under the pointer the card's thin border lights up with a soft violet-pink glow that follows the mouse, the title and button drift a few pixels, and the expand icon fills with brand indigo. Clicking opens a large white sheet over a pale blue-grey page with colored light blobs in the corners. STRUCTURE Section title (heading-xl, two tones), then a flex-wrap layout with 16px gaps: row 1: Payments 816x676 (two thirds) + Billing 400x676 row 2: Agentic commerce, Issuing, Stablecoins and crypto, 400x676 each row 3: Connect 1232x450 full width Card layers: border layer (#e5edf5, inset -1px, radius 6px) -> optional glowing border layer -> white inner (radius 5px) -> graphic -> text (top left) -> expand button (top right). Dialog: white sheet with intro (title, text, 2 buttons), checklist on the right, then a grid of graphic cards and detail texts, footer with a centered button and "next product" link. KEY PARAMETERS card radius 6px (inner 5px); no shadow at rest title: heading-md (26px/1.12/300 at 940+), capped at min(26px, 2.1vw) at 940+, 3.3vw at 840-939, 2.75vw at 640-839; max width 21ch (42ch on Payments); 24px from top and left at 940+ (16px below); text-wrap balance expand button: 38x38px, 16px from top and right, radius 4px, bg #f5f5ff with #533afd arrows; hover: bg #533afd, white arrows that spread 2px apart (1px below 940) hover border glow: radial-gradient(circle, #7f7dfc, #f44bcc 33%, #e5edf5 66%) at 50% opacity, a square 80% of the card height (130% wide on Payments and Connect), following the pointer, visible at 940+ with a fine pointer graphics: DOM-built UI (terminal, checkout, plan card, usage chart, card issuing, crypto balance) on gradients from the wave palette dialog: width 1184px at 1440 (content column minus 80px), margin 5vh top and bottom, radius 16px, padding 72px sides and top, 112px bottom at 940+ (56px top and 24px sides below); intro: title max 24ch, body; list of 4 check items with 16px icons on the right (columns 8-12); detail grid below with 16px gaps overlay: rgb(229,237,245) at 0.9 (0.7 on some browsers); 4 radial color orbs (left and right blob colors per product) rotated about 26-36 degrees in the lower corners; hidden below 640 close button: 40px ui button top right (bg #e8e9ff, #533afd cross) MOTION card content: title and expand button shift toward the pointer (card-shift variables), 800ms cubic-bezier(0.165,0.84,0.44,1) border glow: opacity 250ms linear; position follows the pointer with 1s cubic-bezier(0.16,1,0.3,1) expand button fill: 600ms cubic-bezier(0.16,1,0.3,1) dialog open: sheet rises from 30px below and fades in (bento-dialog-reveal-fade-in-up), about 400ms (est) ease-out; overlay orbs fade in 800ms dialog close: fade out (est 200ms) agentic card: thin conic gradient border spinning continuously (several seconds per turn) graphics: animate when the section enters the viewport STATES focus and keyboard: cards are buttons; focus ring 3px #5452fbbf on the expand button area (radius 4px); Escape closes; focus stays in the dialog touch: tap opens; no glow or shift mobile (below 640): one column, cards max 576px tall; dialog becomes a bottom sheet (full width, top corners 16px, snap scrolling, drag handle, 28px close button, 30px blur fade at the top) tablet (640-939): 2 columns reduced motion: no shift, no glow, no spinning border; fades only HOW TO BUILD Flex-wrap grid with fixed aspect ratios per card; each card is a button with layered divs for the 1px border, glow and white inner; pointer position written to CSS variables drives the glow translate and a small title shift; dialog as a modal element with a light translucent overlay and absolutely positioned radial gradient orbs. PITFALLS radius is 6px, not 12-16px; no card shadows; titles stay short (one line of 3-8 words); the glow lives only in the 1px border, never in the card fill; the overlay is light blue-grey, not dark. SCREENSHOTS - file: stripe_2026_bento-dialogs_d1440_grid.jpg shows: first bento row at 1440x900 (/en-jp 2026-09-25): Payments 816x676 and Billing 400x676 with UI graphics on warm gradients, expand buttons - file: stripe_2026_bento-dialogs_d1440_dialog.jpg shows: Payments dialog open: white sheet 1184px wide with 16px radius over the light overlay, intro with 2 buttons, checklist, graphic cards do not copy: product UI, photos