Logo: files, lockups and clear space

1.1 The mark

Three squares, one direction.

The three squares are your people, your systems and a new practice. The arrow, always in the top-right cell and always in Signal, is the momentum they create together.

Fig. 1.1 — Construction on a 36-unit grid

A 36-unit grid: four 12-unit cells with a 4-unit gutter, and a 4-unit margin built into the grid files and the icon tiles.
Three squares fill the top-left, bottom-left and bottom-right cells.
The arrow fills the top-right cell: a mitered head and a diagonal shaft, one 3.4-unit stroke, outlined to a single shape.
The wordmark is veridive in Funnel Display 600, tracking −0.045em, always lowercase and outlined. In the lockup, the mark box is 1.08 em and the gap 0.30 em, with the mark centered on the letters.
The masters are final. Use the files; never redraw the mark or retype the wordmark.

1.2 Lockups

Horizontal by default.

Use the horizontal lockup wherever it fits. On Midnight and dark imagery, the squares and the wordmark are White and the arrow is Signal. On White and light surfaces, the squares and the wordmark turn Midnight and the arrow stays Signal. The stacked lockup is for square spaces.

Fig. 1.2 — Horizontal · on dark (default)

Fig. 1.3 — Horizontal · on light

Fig. 1.4 — Stacked · on dark

Fig. 1.5 — Stacked · on light

1.3 One color

When one color is all you have.

Use a one-color version when the arrow can’t be Signal: White on Signal or on photography, Black for print, fax and engraving, Midnight for light documents. The whole mark changes together; never recolor one part.

Fig. 1.6 — White · on Signal or photography

Fig. 1.7 — Black · print, fax, engraving

Fig. 1.8 — Midnight · light documents

1.4 Mark, wordmark, icons

Each part on its own.

The mark alone is for avatars, favicons and small spaces. The wordmark alone is for places where the mark is already present, such as a slide footer under a large mark. Icon tiles put the mark at half the tile, for avatars and app icons.

Fig. 1.9 — The mark

On dark

On light

Fig. 1.10 — The wordmark

On dark

On light

Midnight tile

Black tile

Signal tile

White tile

1.5 Clear space

Room to move.

Keep at least one square of clear space on every side: 12 grid units, three sevenths of the mark’s height. Nothing enters it: no text, no other logo, not the edge of the page.

Fig. 1.11 — Clear space: one square on every side, for the mark and for every lockup

1.6 Minimum size

Small, never smaller.

Below 88 px wide, use the mark alone; the mark itself goes no smaller than 16 px. Favicons use a Midnight tile with the mark at 14 of 16 pixels, so the squares land on whole pixels. Shown here at actual size.

160 px

120 px

88 px · minimum

32 px

24 px

16 px · minimum

1.7 Misuse

Six things never to do.

Every one of these has happened to a logo somewhere. None of them should happen to ours.

Don’t

Recolor the arrow. It is always Signal, unless the whole mark is one color.

Don’t

Move the arrow to another cell. It lives in the top-right cell.

Don’t

Rotate or tilt the mark, not even a little.

Don’t

Stretch, squash or skew it. Scale it only proportionally.

Don’t

Add effects: no glows, gradients, shadows, outlines or bevels.

Don’t

Place it on a busy or low-contrast background. Give it quiet field.

1.8 Files

Every file, one at a time.

SVG for screens and print; PNG at 1024 and 2048 px with a transparent background; icon tiles for avatars and app icons. Pick the version for the surface: on dark, on light, white, black or midnight.

Logo.

Three squares, one direction.

Horizontal by default.

When one color is all you have.

Each part on its own.

Room to move.

Small, never smaller.

Six things never to do.

Every file, one at a time.