---
title: "BRAND Stripe 2026 · Recipe: bento-dialogs"
url: https://memocore.ai/memos/6ab4cfc3af51aac421da8808
project: "Brand Styles"
tags: "brand-stripe"
updated_at: "2026-09-25T07:20:23.784Z"
---

# 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