Bento product card
White card, 8px radius, fine border, compact feature copy, and a product cue rather than decorative art.
Financial infrastructure design catalog
A compact Stripe-flavored preview of violet actions, deep navy authority, pale technical surfaces, precise pricing rows, payment modules, and developer code panels.
$1.9T
01 / Colors
#533afdMain action fill.
#635bffLinks and active UI.
#0a2540Headings and sober CTAs.
#f6f9fcPale technical page field.
#ffffffCards and form shells.
#fafbfdSubcards and pricing rows.
#e7ecf1Fine product keylines.
#09825dOperational positive status.
#bb5504Pricing and risk caution.
#cd3d64Declines and validation.
#11efe3Gradient energy and uptime.
#ff5996Charts and product graphics.
02 / Typography
03 / Buttons
04 / Cards & Surfaces
White card, 8px radius, fine border, compact feature copy, and a product cue rather than decorative art.
Blue-tinted elevation lifts product UI above the pale canvas without making the interface glossy.
Violet and purple are used as moments of energy, not as a page-wide decorative wash.
Dark navy panels carry code, API details, and technical credibility.
Feature rows, dashed dividers, and restrained CTAs turn complex pricing into a scannable object.
Form fields feel embedded inside the checkout object, with pale fills and low-contrast borders.
05 / Brand-Specific Product Patterns
const stripe = require("stripe")(key); await stripe.paymentIntents.create({ amount: 12800, currency: "usd", automatic_payment_methods: { enabled: true } });
06 / Forms
07 / Spacing
xs 4pxsm 8pxmd 16pxlg 24pxxl 48pxsection 96px08 / Radius
4pxbadges and tiny UI6pxinputs and field groups8pxcards and product modules16pxsegmented containers9999pxCTAs and chips09 / Elevation
Pricing and forms rely on {colors.border}.
Small product artifacts over canvas.
Floating docs and card previews.
Fixed product navigation and popovers.
Large product UI lifted above the pale field.
10 / Extracted Component Tokens
:root {
--brand-primary: #533afd;
--brand-accent: #635bff;
--brand-ink: #0a2540;
--brand-body: #425466;
--brand-muted: #727f96;
--brand-canvas: #f6f9fc;
--brand-surface: #ffffff;
--brand-border: #e7ecf1;
--brand-cyan: #11efe3;
--brand-magenta: #ff5996;
--brand-orange: #ff6118;
--brand-radius-card: 8px;
--brand-radius-pill: 9999px;
--brand-font-display: Inter, SF Pro Display, sans-serif;
--brand-font-code: Source Code Pro, SFMono-Regular, monospace;
--brand-shadow-sticky: 0 15px 35px rgba(49,49,93,.10), 0 5px 15px rgba(0,0,0,.08);
--brand-shadow-hero: 0 20px 80px -16px rgba(0,55,112,.14), 0 10px 60px -16px rgba(0,59,137,.06);
}