Brand Guidelines
Grid & Layout
08
Brand Guidelines
Grid & Layout
08
Overview
The 161 grid gives every layout the same architectural order: generous margins, an even modular grid, and a signature split between a navy panel and photography. This section covers margins and columns, the grid systems, the split layout, headline and logo placement, and the core formats for digital, social and print.
Overview
The 161 grid gives every layout the same architectural order: generous margins, an even modular grid, and a signature split between a navy panel and photography. This section covers margins and columns, the grid systems, the split layout, headline and logo placement, and the core formats for digital, social and print.
Margins & Columns
All layouts are built on a modular grid with generous margins. Digital formats use 80 px margins with 24 px gutters, social formats 60 px margins with 20 px gutters, and print uses 12 mm margins with 5 mm gutters. Columns and rows always divide evenly.
Keep text and logos inside the margins. Only photography and color panels bleed to the edge.
Margins & Columns
All layouts are built on a modular grid with generous margins. Digital formats use 80 px margins with 24 px gutters, social formats 60 px margins with 20 px gutters, and print uses 12 mm margins with 5 mm gutters. Columns and rows always divide evenly.
Keep text and logos inside the margins. Only photography and color panels bleed to the edge.
Grid Systems
Three grids cover most work: A4 portrait (6 columns, 8 rows) for print, square posts (6 × 6) and stories (4 columns, 8 rows) for social. Presentations and screens use the 12-column, 8-row digital grid shown above. Panels, photos and text blocks always snap to whole modules.
Grid Systems
Three grids cover most work: A4 portrait (6 columns, 8 rows) for print, square posts (6 × 6) and stories (4 columns, 8 rows) for social. Presentations and screens use the 12-column, 8-row digital grid shown above. Panels, photos and text blocks always snap to whole modules.
Applying Headlines
Headlines always start on a margin or grid line and align with their body copy, left or right. On slides the 161 NORTH EAST label sits on the top margin and the headline starts on the second row. On posts and stories the headline sits on the top margin, one margin below the edge of the photo, or rests with its body copy on the bottom margin.
Headlines are set in 29LT Bukra Bold: white on slides and full-bleed photos, gold on navy social panels and navy on cream. A short gold hairline separates the headline from the body copy. Keep headlines to two or three lines within their columns.
Applying Headlines
Headlines always start on a margin or grid line and align with their body copy, left or right. On slides the 161 NORTH EAST label sits on the top margin and the headline starts on the second row. On posts and stories the headline sits on the top margin, one margin below the edge of the photo, or rests with its body copy on the bottom margin.
Headlines are set in 29LT Bukra Bold: white on slides and full-bleed photos, gold on navy social panels and navy on cream. A short gold hairline separates the headline from the body copy. Keep headlines to two or three lines within their columns.
Applying Our Logo
The logo always rests exactly on the margins, in a corner away from the headline. On split layouts it anchors the bottom of the panel, bottom-left, or bottom-right when the layout is mirrored. On full-bleed photos it can move to the top-left, balancing text set top-right.
Use the bilingual lockup on slides, stories, print and full-bleed posts, and the brandmark alone on smaller square posts with a panel or band. Never place the logo over the busiest part of a photograph.
Applying Our Logo
The logo always rests exactly on the margins, in a corner away from the headline. On split layouts it anchors the bottom of the panel, bottom-left, or bottom-right when the layout is mirrored. On full-bleed photos it can move to the top-left, balancing text set top-right.
Use the bilingual lockup on slides, stories, print and full-bleed posts, and the brandmark alone on smaller square posts with a panel or band. Never place the logo over the busiest part of a photograph.
The Split Layout
The signature 161 composition is a split. A solid block of brand colour holds the headline, a gold hairline and the body copy, while photography fills the rest. On slides the navy panel spans 5 of 12 columns. On square posts it spans 3 of 6 columns or becomes a navy or cream band below the photo, and on stories it becomes a navy band under the image.
When the photo runs full bleed, a Slate Mid colour overlay unifies the image, and the text sits in open sky or shadow, never over busy detail. Text and logo always sit exactly on the margins shown in red, aligned left or right (mirror it for Arabic layouts).
The Split Layout
The signature 161 composition is a split. A solid block of brand colour holds the headline, a gold hairline and the body copy, while photography fills the rest. On slides the navy panel spans 5 of 12 columns. On square posts it spans 3 of 6 columns or becomes a navy or cream band below the photo, and on stories it becomes a navy band under the image.
When the photo runs full bleed, a Slate Mid colour overlay unifies the image, and the text sits in open sky or shadow, never over busy detail. Text and logo always sit exactly on the margins shown in red, aligned left or right (mirror it for Arabic layouts).
Layout Digital
For presentations, screens and web banners, use either the split layout, with a navy panel for the message and a large window for photography, or a full-bleed photo with a Slate Mid colour overlay and the text mirrored to the right.
Horizontal Digital Layout
1920 × 1080 px
Modular Grid
80 px margins
12 columns
8 rows
24 px gutter
Split: navy panel over 5 columns
Full bleed: Slate Mid overlay, text in the last 5 columns
Layout Digital
For presentations, screens and web banners, use either the split layout, with a navy panel for the message and a large window for photography, or a full-bleed photo with a Slate Mid colour overlay and the text mirrored to the right.
Horizontal Digital Layout
1920 × 1080 px
Modular Grid
80 px margins
12 columns
8 rows
24 px gutter
Split: navy panel over 5 columns
Full bleed: Slate Mid overlay, text in the last 5 columns
Layout Social Media
Social layouts keep the same logic at small sizes: a navy panel, a navy or cream band, or a full-bleed photo with the Slate Mid overlay, with the headline and logo resting on the margins.
Story Layout
1080 × 1920 px
Modular Grid
60 px margins
4 columns
8 rows
20 px gutter
Square Post Layout
1080 × 1080 px
Modular Grid
60 px margins
6 columns
6 rows
20 px gutter
Layout Social Media
Social layouts keep the same logic at small sizes: a navy panel, a navy or cream band, or a full-bleed photo with the Slate Mid overlay, with the headline and logo resting on the margins.
Story Layout
1080 × 1920 px
Modular Grid
60 px margins
4 columns
8 rows
20 px gutter
Square Post Layout
1080 × 1080 px
Modular Grid
60 px margins
6 columns
6 rows
20 px gutter
Layout Print Vertical
For brochures, reports and leasing documents, the A4 page follows the same principles as every other format. The featured cover borrows its structure from the story: photography fills the top half, and in the navy field below, the headline, gold hairline and body copy sit right-aligned across the four right-hand columns, one margin below the photo, with the logo bottom-left.
Designers are free to apply any of the layouts shown on this page to print: a split navy panel, a navy or cream band, or a full-bleed photo with the Slate Mid overlay. Whatever the layout, text and logo rest on the margins and every element snaps to the grid.
Vertical Print Layout
210 × 297 mm (A4)
Modular Grid
12 mm margins
6 columns
8 rows
5 mm gutter
Layout Print Vertical
For brochures, reports and leasing documents, the A4 page follows the same principles as every other format. The featured cover borrows its structure from the story: photography fills the top half, and in the navy field below, the headline, gold hairline and body copy sit right-aligned across the four right-hand columns, one margin below the photo, with the logo bottom-left.
Designers are free to apply any of the layouts shown on this page to print: a split navy panel, a navy or cream band, or a full-bleed photo with the Slate Mid overlay. Whatever the layout, text and logo rest on the margins and every element snaps to the grid.
Vertical Print Layout
210 × 297 mm (A4)
Modular Grid
12 mm margins
6 columns
8 rows
5 mm gutter
Foundations
Identity
Visuals
Application
Foundations
Identity
Visuals
Application
Foundations
Identity
Visuals
Application