A loud page still has to look built. Everything sits on its medium's grid, with more space between groups than within them, one hero per view and paper between saturated areas. Art may bleed off the edge; text never does.
Rules#
| Id | Rule | Why | Checked by |
|---|---|---|---|
| BB-LAYOUT-01Must | Set everything on its medium's grid; art may bleed, text never does.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | The grid is what makes a loud page still look built. Text in the bleed is lost to the trim or the screen edge. | Press checkrule 14 at 320 px; the press artwork tests |
| BB-LAYOUT-02Must | Print one hero per view, with paper gutters of 16 px or more (4 mm in print) between saturated areas.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | One hero is a focal point (D-B10); a gutter keeps saturated areas from vibrating against each other. | Press checkrules 7 and 9 |
| BB-LAYOUT-03Must | Keep text square at rest.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | Words that lean are harder to read and look accidental (D-B9). The art around them can lean instead. | Press checkrule 12; lint mk/tilt |
| BB-LAYOUT-04Must | Keep print type 5 mm or more inside the trim on cards and stickers, and nothing meaningful in the bleed.Applies to: Print | The guillotine and the die drift by a millimetre or two; the safe area keeps every word on the card. | Testthe press artwork's type boxes |
| BB-LAYOUT-05Must | Keep social text inside the safe zones; on a story, clear of the top 220 px and the bottom 260 px.Applies to: Social | Platforms print their own chrome over those strips; text there disappears behind it. | Testthe card layout tests |
Specs#
The screen grid#
| At | 390 px | 768 px | 1440 px | 1920 px |
|---|---|---|---|---|
| Columns | 4 | 8 | 12 | 12 |
| Margin (px) | 16 | 33 | 64 | 64 |
| Gutter (px) | 16 | 22 | 32 | 32 |
| Sheet, the content box (px) | 358 | 701 | 1312 | 1440 |
split layout. Art may bleed past the margin; text never does.Named layouts#
| Layout | Spans | Use |
|---|---|---|
broadside | 12 · 8 · 4 | One idea across the sheet: a hero, a statement |
spread | 6 + 6 · 4 + 4 · stacked | Two facing halves; art may bleed on its outer edge |
split | 7 + 5 · stacked 8 · stacked | Words and art side by side, the words first |
lead | 8 + 4 · stacked · stacked | A main column with an aside |
columns-3 | 4 · 4 · 4 | Three, two or one per row |
columns-4 | 3 · 4 · 2 | Four, two or two per row |
proof | 2 · 2 · 2 | Contact sheets: six, four or two per row |
Rhythm#
Space comes from one scale on an 8-point rhythm, and there is always more space between groups than within them.
| Token | Value | Pixels | Size |
|---|---|---|---|
--mk-space-0 | 0 | 0 | |
--mk-space-1 | 0.25rem | 4 | |
--mk-space-2 | 0.5rem | 8 | |
--mk-space-3 | 0.75rem | 12 | |
--mk-space-4 | 1rem | 16 | |
--mk-space-5 | 1.25rem | 20 | |
--mk-space-6 | 1.5rem | 24 | |
--mk-space-7 | 1.75rem | 28 | |
--mk-space-8 | 2rem | 32 | |
--mk-space-9 | 2.25rem | 36 | |
--mk-space-10 | 2.5rem | 40 | |
--mk-space-11 | 2.75rem | 44 | |
--mk-space-12 | 3rem | 48 | |
--mk-space-13 | 3.25rem | 52 | |
--mk-space-14 | 3.5rem | 56 | |
--mk-space-15 | 3.75rem | 60 | |
--mk-space-16 | 4rem | 64 | |
--mk-space-20 | 5rem | 80 | |
--mk-space-24 | 6rem | 96 | |
--mk-space-32 | 8rem | 128 | |
--mk-space-40 | 10rem | 160 |
Plates and gutters#
Saturated areas never touch: a paper gutter separates them, on screen and in print (BB-LAYOUT-02, BB-COLOUR-08).
Document sheets#
| Sheet | Size | Sides | Top | Bottom |
|---|---|---|---|---|
| A4 | 210 × 297 mm | 18 mm | 18 mm | 20 mm |
| Letter | 8.5 × 11 in | 0.75 in | 0.75 in | 0.8 in |
Cards and stickers#
| Format | Trim (mm) | Bleed (mm) | Type inside (mm) | Cut |
|---|---|---|---|---|
Business card, North America, 3.5 × 2 incard-na · the uncoated profile | 88.9 × 50.8 | 3.175 | 5 inside the trim | Guillotined to the trim |
Business card, ISO, 85 × 55 mmcard-iso · the uncoated profile | 85 × 55 | 3 | 5 inside the trim | Guillotined to the trim |
Mark sticker, die-cut, 50 mmsticker-mark · the coated profile | 50 × 50 | 2 | 2 inside a 3 white border | Die-cut to the mark plus its white border |
Wordmark sticker, pill, 76 × 25 mmsticker-wordmark · the coated profile | 76 × 25 | 2 | 2 inside a 3 white border | A pill |
Line badge sticker, 38 mm squaresticker-line · the coated profile | 38 × 38 | 2 | 2 inside a 3 white border | A rounded square, 3 mm corners |
POW! sticker, die-cut burst, 76 mmsticker-pow · the coated profile | 76 × 76 | 2 | 2 inside a 3 white border | A die-cut burst |
Made by MAKR Labs sticker, 50 mm circlesticker-made-by · the coated profile | 50 × 50 | 2 | 2 inside a 3 white border | A circle |
Sticker sheet, 8.5 × 11 in, kiss-cutsticker-sheet-letter · the coated profile | 215.9 × 279.4 | 2 | 2 inside a 3 white border | Kiss-cut per sticker, through-cut at the sheet edge |
Social sizes and safe zones#
| Size | Pixels | Layout |
|---|---|---|
og | 1200 × 630 | Link previews: the words on the left plate, the art on the right |
square | 1080 × 1080 | Feeds: art on top, the text plate below |
portrait | 1080 × 1350 | Feeds: art on top, the text plate below |
story | 1080 × 1920 | Stories: no text in the top 220 px or the bottom 260 px |
Slides and email#
| Medium | Grid |
|---|---|
| Slides | 1920 × 1080 px, 96 px margins, 12 columns, 32 px gutters (DECK_CANVAS) |
| One column, 480 px or narrower |
Do and don't#
Do
Taking projects
Q4Don't
Taking projects
Do
WebsitesGrowth
Don't
WebsitesGrowth
Do
Pebblepath
Don't
Pebblepath
Related#
- Space and grid: the tokens.
- Grid, Section and Container: the components.