Visual identity
Layout
Give every subject a place.
Build a clear reading order with a measured grid, consistent spacing and room around each subject.
Start with the structure
One subject per panel
Give the image, message and attribution distinct places. Let a photograph fill its frame, cropped only by the panel edge.
A consistent structure
Use one margin, one gutter and one corner radius. Every panel spans whole grid modules.
Find your format ↓These values apply to a 1200 × 1200 px piece. For other sizes, use the format table.
Find your format
| Format | Margin | Gutter | Modules | Module size | Radius |
|---|---|---|---|---|---|
| 1080 × 1350 | 43 | 14 | 8 across × 10 down | 112 wide × 113–114 tall | 22 |
| 1200 × 1200 | 48 | 16 | 8 × 8 | 124 × 124 | 24 |
| 1200 × 627 | 25 | 8 | 16 across × 8 down | 64–65 wide × 65–66 tall | 13 |
| 1080 × 1920 | 43 | 14 | 8 across × 15 down | 112 wide × 109–110 tall | 22 |
| 1920 × 1080 | 43 | 14 | 15 across × 8 down | 109–110 wide × 112 tall | 22 |
| 816 × 1056, Letter | 33 | 11 | 8 across × 11 down | 84–85 wide × 80 tall | 16 |
| 1128 × 191, banner | 8 | 15 | 12 columns | 78–79 wide | 4 |
| 1584 × 396, LinkedIn banner | 16 | 21 | 12 columns | 110–111 wide | 8 |
| 600 × 200, email header | 8 | 8 | 12 columns | 41–42 wide | 4 |
| 1200 × 240, email banner | 10 | 16 | 12 columns | 83–84 wide | 5 |
For a framed piece, the border is 4% of the short side, equal on all four sides. In print, keep it at least ⅛ inch. Formats 3:1 or wider use 12 full-height columns. Full-bleed pieces, environmental bands and apparel are exceptions.
Choose an arrangement
One message and one image, clearly separated.
A useful starting point for a communication.
A broader story for a larger format.
An overview for a poster, booth or brochure. Avoid crowding a feed ad.
Keep the composition clean
Alternate the surfaces
Bone holds White panels; a White panel may hold Bone compartments. The surrounding surface becomes the border.
Keep images intact
Use the photograph’s real setting and light. Keep cut-outs, shadows, bevels, glows and blur effects out of the design.
Recompose for the format
Preserve the reading order and each element’s role. Change the arrangement and crop when the aspect ratio changes.
Detailed measurements
Border sizes in print and on screen
| Artboard | Short side | Border |
|---|---|---|
| Slide or screen, 1920 × 1080 px | 1080 px | 43 px |
| Letter brochure or flyer, 8.5 × 11 in | 8.5 in | 0.34 in (about 11/32 in) |
| Poster, 24 × 36 in | 24 in | 0.96 in |
| Card, 5 × 7 in | 5 in | 0.2 in (3/16 in is inside the range) |
| Business card, 3.5 × 2 in | 2 in | 1/8 in, the print minimum |
How the grid scales
Margin: 4% of the short side. Gutter: 1/75 of the short side. Eight modules across the short side; choose rows on the long side to keep modules closest to square. Corner radius: 1/50 of the short side.
At 3:1 or wider, use 12 columns and a gutter of 1/75 of the long side. Round to whole pixels; modules may differ by 1 px.