Content Planning Sheet
Style guide
Announcements
Subscribe
Bento grid
The Bento Grid is a modern, modular layout system that uses a grid structure inspired by Bento boxes, with compartments for each content block. Often used in Apple interfaces and websites, it organizes content into neat, symmetrical boxes with clear visual separation.
Key principles
1.
Modular layout
2.
Alignment
3.
Consistent spacing
4.
Icons and text
5.
Typography
1. Modular layout
•
Content is divided into distinct, flexible "compartments" or boxes, which can be resized and rearranged depending on the screen or device size.
2. Alignment
•
The design follows a symmetrical structure with content aligned neatly in rows and columns, often providing balance and harmony across the layout.
3. Consistent spacing
•
The whitespace that surrounds each compartment should have even width. Following a grid ensures uniformity in the placement of elements, creating a consistent user experience across different pages and platforms.
4. Icons and text
•
Placing icons, numbers, and text with of different sizes can be used to create emphasize and increase readability of information.
source: Apple Inc.
5. Typography
•
Emphasizes modularity and harmony with sense of good legibility.
🖼️ MiriCanvas template showcase
