MB Brand System — Layout
— Layout

Where things sit,
and how they behave.

The grid decides positions; the components decide what fills them. Both follow the same discipline as the rest of the brand — structure clear enough to look like decoration, ornament that turns out to be architecture.

— Grid

Where things sit.

Twelve columns and an eight-pixel rhythm. Every page on this system, every printed piece, every collateral object sits on this scaffold.

— Twelve columns

The base grid.

Twelve columns, equal width, with a 24-pixel gutter. Editorial layouts subdivide into 4-4-4 (triptych), 8-4 (lead + side), or 5-7 (asymmetric pair).

4
4
4
8
4
5
7
12 — full
— Spacing

Eight-pixel rhythm.

All spacing — margins, padding, gaps — derives from a single eight-pixel base unit. Half-steps (4px) are allowed only at the smallest scale.

s-14px · ½ unit
s-28px · base
s-312px · 1.5×
s-416px · 2×
s-524px · 3×
s-632px · 4×
s-748px · 6×
s-864px · 8×
s-996px · 12×
s-10128px · 16×
— Compositions

Three editorial layouts.

Each is a starting point — a known-good arrangement of grid, type, and image. Modify the content; do not modify the proportions.

A line drawn from the air

VOL. II · 2026
Composition · Cover12 col · full bleed image
— Capsule 03 · Tidelands

Shifting Sands — a body of work.

The work is divided across four sequences: dunes at first light; the wadi after rain; coastline at dusk; the saltflats, which keep their own time.

Composition · Editorial spread5 / 1 / 5 — asymmetric
Composition · Triptych4 / 4 / 4 — equal weight
— Components

How they behave.

Buttons, forms, cards, tokens — the working parts of the site. Each follows the typographic discipline rather than the conventions of UI. Restraint scales down to the smallest interaction.

— Buttons

Three weights.

Primary (filled), Secondary (outline), and Tertiary (underline). Always tracked uppercase with a 12px label and a 1.5em hit area.

Primarybtn-primary
Secondarybtn-secondary
Tertiarybtn-tertiary
— Forms

Inputs as rules.

Form fields are a single underline. The label sits above in tracked caps; help text below in monospace. No filled boxes.

— required
— On dark
— Project card

The portfolio unit.

The recurring container across portfolio listings. A frame, a number, a title, a year, and a single line of metadata.

— Tags & tokens

Small surfaces.

Filter tags, status pills, breadcrumbs. Always 24px tall; always tracked uppercase.

Tag · default
Aerial Nature Editorial Archive
Tag · selected
Aerial Nature Editorial
Status
Available Archived Edition · 12 of 25
Breadcrumb
WorkAerialA line drawn from the air
— A closing note

Position is meaning.

The grid is the brand's spine, the components are its joints. Both are silent unless they're broken — which is exactly the point.

Next · Motion →