About Bento Grid UI
Bento Grid UI is the layout language Apple surfaced on the iPhone 14 product page in 2022: asymmetric rounded tiles of varied sizes sharing one tight grid, with a few large cells carrying the headline and smaller cells holding features.
This is the dark variant Apple alternates with white — a near-black ink canvas, flat tiles differentiated by subtle surface lightness, crisp negative-tracked SF Pro headlines, and a single Action Blue carrying all interaction.
- Origin
- Global / internet (Apple product marketing)
- Era
- 2022 onward (iPhone 14 product page popularized the modern bento grid); 2010s–now
- Key figures
- Apple Marketing · Apple Human Interface Design
- Movements
- Bento layouts · Modular grid marketing pages · Apple keynote design
Bento Grid UI design spec
Colors
Background
Surface
Primary
Secondary
Accent
Text
Typography
SF Pro DisplayHeadings
SF Pro TextBody
SF MonoMono
Unlock for 1 credit
The other 11 sections — buttons, cards, spacing, motion, techniques and more — open once you unlock. Download the DESIGN.md or send it to your AI in one click. Unlock once, yours forever.
Sign up nowHave an account? Sign in
Styles similar to Bento Grid UI
Also inspired by brands & products, with a close feel.
Dark Mode UICalm night interfaces. Charcoal layers rise by overlay lightness, not shadow.
Uber 2024Motion made severe. Black surfaces, white Inter, one green pill turns the whole system on.
Resend 2024Clean code becomes brand. Pure black, JetBrains Mono, and one green delivered signal.
Linear 2024Precision down to the millisecond. Near-black, indigo-violet accents, Inter Display, no decoration.