Opening the vault…
Opening the vault…
Style sheet · 1 reference
Asymmetrical grid of rounded cards (bento boxes) with subtle hairline borders, micro-badges, and rich feature callouts.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Bento Grid / Apple Modular Layout — style sheet > Asymmetrical grid of rounded cards (bento boxes) with subtle hairline borders, micro-badges, and rich feature callouts. Derived from 1 curated reference(s) in the `bento-grid-modular` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images. ## Type - Söhne — 1/1 ## Color - `#030b16` dark neutral — 1/1 - `#543afc` chromatic — 1/1 - `#807dfd` chromatic — 1/1 - `#fea04d` chromatic — 1/1 - `#f9fafe` light neutral — 1/1 Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1): - `#030b16` / `#f9fafe` — 18.9:1 - `#030b16` / `#fea04d` — 9.7:1 - `#543afc` / `#f9fafe` — 5.9:1 - `#030b16` / `#807dfd` — 5.9:1 ## Moves ### grid/layout - [model draft] The grid runs a 2:1 top row (a wide payments card beside a narrow billing card) over a row of three equal cards, and every card puts a two-line title top-left and a square expand button top-right. Steal the uneven row over an even row, with the same title-plus-corner-control frame on every tile so spans can vary without the cards looking unrelated. — 75-stripe-product-card-grid ### component pattern - [model draft] Each card's art is a working-looking UI at small scale: a terminal reading "Pay Roastery $5.46" over an itemized receipt, a checkout with Link and Apple Pay above five payment methods, and a "Pro Plan" usage meter over a 30-day bar chart of 2,010,569,010 tokens. Steal feature cards illustrated with mockups carrying plausible line items and totals instead of icons. — 75-stripe-product-card-grid ### color - [model draft] An orange-to-violet gradient bleeds behind the mockups while the mockups stay white with near-black text; the one solid saturated control is the indigo expand button on the first card. Steal gradient as a backdrop layer behind white UI, and keep the solid accent for the single control in focus. — 75-stripe-product-card-grid ## References - 75-stripe-product-card-grid — Stripe — product card grid
The grid runs a 2:1 top row (a wide payments card beside a narrow billing card) over a row of three equal cards, and every card puts a two-line title top-left and a square expand button top-right. Steal the uneven row over an even row, with the same title-plus-corner-control frame on every tile so spans can vary without the cards looking unrelated.
Stripe — product card grid · model draft
Each card's art is a working-looking UI at small scale: a terminal reading "Pay Roastery $5.46" over an itemized receipt, a checkout with Link and Apple Pay above five payment methods, and a "Pro Plan" usage meter over a 30-day bar chart of 2,010,569,010 tokens. Steal feature cards illustrated with mockups carrying plausible line items and totals instead of icons.
Stripe — product card grid · model draft
An orange-to-violet gradient bleeds behind the mockups while the mockups stay white with near-black text; the one solid saturated control is the indigo expand button on the first card. Steal gradient as a backdrop layer behind white UI, and keep the solid accent for the single control in focus.
Stripe — product card grid · model draft