Skip to content
Living Pagebrand
Chapter 02

The mark

Five pages fanning from a spine on an indigo tile. The fan sits open at rest, so the animation reverses first — open, closed, open — instead of snapping shut. Hover the drawing to replay it.

Fig. 1 — the mark, dimensioned · units 1/48 of tile

Clear space and the lockup

The tile — app icon, favicon, avatar
Living Page
Horizontal lockup — gap = 28% of mark width

Minimum sizes

48
32
24
16

Below 20px the two outer pages drop out — five pages at 16px reads as a smudge. Never set the lockup below 20px mark height; use the tile alone.

Don’t

Correct on the left, wrong on the right. The tile keeps its own indigo in both themes — it’s a fixed app-tile mark, not a themed illustration.

Scroll sideways →
Correct
Wrong

Don’t recolour the tile

The indigo is fixed in both themes. It is an app tile, not a themed illustration.

Correct
Wrong

Don’t strip the tile

The pages never sit on a bare background. The tile is the mark.

Correct
Wrong

Don’t stretch it

Scale proportionally. The tile is always a square with an 11/48 radius.

Correct
Wrong

Don’t rotate it

The spine stays vertical. The fan is the only thing that moves.

Correct
Wrong

Don’t add effects

No drop shadows, glows, bevels, gradients or outlines on the tile.

CorrectLiving Page
WrongLiving Page

Don’t crowd it

Keep clear space of 22% of the tile width on every side — including type.

Next — 03Colour