Near-black indigo ink on an airy off-white canvas, lit by a single electric blurple (#635BFF) and a cyan-to-mint brand gradient, typeset in the proprietary Söhne grotesque — tiny radii and soft slate-tinted shadows give every surface a precise, engineered calm.
Set in Söhne (Klim Type Foundry) — shown here in Inter, the nearest free Google substitute. Hierarchy comes from size and tight negative tracking at a confident semibold, not heavy weight.
Marketing surfaces are white “bento” product cards on the off-white wash, with 16–24px radii and a soft slate-tinted shadow that lifts on hover.
An 8px base unit (with a 4px half-step), opening to ~80px for the vertical rhythm between marketing sections.
Small by default — inputs at 8px, buttons and cards 16–24px, pills and badges fully rounded.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Bento grids stack to one column; the 64px display drops to ~40px; nav collapses to a menu. |
| Tablet | 768–1023px | Four-up product grids become two-up; container gutters tighten. |
| Laptop | 1024–1279px | Full multi-column bento grids appear inside a ~1080px centred container. |
| Desktop | ≥ 1280px | Max ~1200px container with wide whitespace gutters; gradient hero art at full bleed. |
Whitespace is preserved aggressively at every breakpoint so the airy, engineered calm survives the collapse.
Stripe leads with transparent per-transaction pricing; the tiers below are illustrative of how that packaging would render in the system.
Dashboard-style payments table — hairline rows, uppercase micro-labels, and quiet status pills.
| Payment | Customer | Amount | Status | When |
|---|---|---|---|---|
| ch_3PqA91 | acme@northwind.com | $129.00 | Succeeded | 2 min ago |
| ch_3PqB44 | rio@lumon.io | $1,499.00 | Succeeded | 11 min ago |
| ch_3PqC18 | dev@browserbase.com | $49.00 | Pending | 24 min ago |
| ch_3PqD72 | finance@hertz.com | $8,420.00 | Succeeded | 1 hr ago |
| ch_3PqE05 | hello@gamma.app | $20.00 | Refunded | 3 hr ago |
Centered cards with a level-1 lift, uppercase field labels, a blurple primary action, and Google SSO.