Layout and bento
NorthStar
Your desk. Your data. Your models.
48h
Keeps working offline
Mai is drafting three replies
Structure creates calm
North layouts feel like a clear night: lots of open space, a few bright points, and everything exactly where you expect it.
- Generous space. When in doubt, take something away and add space.
- A strong left edge. Align to the grid margin; let the right side breathe.
- One hero. Every layout has a single focal point: a headline, a number, an image or the star.
- Consistent rhythm. Spacing comes from the 4px scale, never from eyeballing.
The grid
12, 8 and 4 columns
Content width tops out at 1280px. Reading text stays under 75 characters per line, whatever the grid allows.
| Columns | Gutter | Margin | |
|---|---|---|---|
| Desktop (≥1280px) | 12 | 32px | 64px |
| Tablet (960–1279px) | 8 | 24px | 32px |
| Mobile (<960px) | 4 | 16px | 16px |
| Slides (1920×1080) | 12 | 40px | 112px |
| A4 print | 6 | 5mm | 20mm |
Spacing rhythm
Near things belong together
Use spacing to show relationships. Elements that belong together sit close; groups are separated by a clearly bigger step.
- Inside a component: 4–16px
- Between components: 24–48px
- Between sections: 64–128px
- Around the logo: its clear space, at minimum
Bento compositions
Many small stories, one picture
Bento layouts arrange content in boxes of different sizes, like a lunch box. They are perfect for overviews: a product launch, a capability summary, the homepage of a sub-brand.
- One box leads. Make it at least twice the size of any other.
- Five boxes at most. Fewer is usually better.
- Mix content types: one image, one number, one UI moment, one line of text.
- Consistent gaps and radius: 16px gap and 24px radius on desktop; 12px and 16px on mobile.
- No charts or complex diagrams inside a bento; they need their own space.
Nested bento
A nested bento places small boxes over a hero image: a UI card, a number, a button. It adds context without competing with the picture. Keep nested boxes to two, anchored to corners, with at least 24px from the edge.
Licence check
15 min
Formats
| Format | Size | Margin | Logo |
|---|---|---|---|
| Presentation | 1920 × 1080 | 112px sides, 88px top | Top left on covers, icon top right on content slides |
| Document (A4) | 210 × 297mm | 20–22mm | Header, top left, 7mm wordmark height |
| Social post | 1080 × 1350 | 88px | Top left |
| Story | 1080 × 1920 | 80px sides, 250px top and bottom safe zone | Top centre |
| Web hero | Fluid | Grid margin | Header |
| Roll-up banner | 850 × 2000mm | 60mm | Top, centred; nothing below 800mm from the floor that matters |
Dos and don'ts
Do
- Start from the grid and the spacing scale.
- Give every layout one clear hero.
- Leave real empty space.
- Mirror layouts for Arabic.
Don't
- Fill every gap with content or decoration.
- Make every bento box the same size.
- Use more than five bento boxes.
- Centre long passages of text.
- Distort images to fit a box.
Last updated on 14 October 2026