Design system · Brand

The mark, and the routes we explored.

The Morrison mark is four folded corners around an open centre, set beside a Manrope wordmark. F, the vertex index, was the mark before it. The other routes are kept here for reference.

Back to the design system

Folded corners (current)

Four folded corners around an open centre, one ink colour with a slight opacity step between the pairs.

Works
Solid shapes hold up at 16px without a tuned variant. Pairs with the Manrope wordmark.
Watch
The opacity step is subtle by design; never swap it for separate grays.

F · Vertex index (previous)

The cube’s seven visible corners as points: an index, not a box.

Works
Light, technical, fits ‘reads every page’ and the app’s dot-grid motifs.
Watch
Dots soften at 16px, so favicons use a tuned variant with larger dots and a tighter ring.

A · Reduced grid

Same cube, same three grays, 2×2 tiles per face instead of 3×3.

Works
Closest to today. Reads as the same brand, with half the detail.
Watch
Still twelve shapes; the smallest sizes need a simplified favicon.

B · Solid cube

The tiles merge into three faces. The cube is the idea; the grid was detail.

Works
Bold, calm, holds up at 16px. Matches the app’s quiet style.
Watch
Loses the ‘pages’ cue. A cube is a common mark.

C · Stacked pages

Three top faces stacked: layers of pages, an index you can see through.

Works
Keeps the ‘every page’ story in three shapes; same grays, top to bottom.
Watch
Thinner silhouette; needs care next to the wordmark baseline.

D · Line cube

One outline in one color: the cube as a drawing.

Works
The most minimal option; one color works on any surface, in print and embossed.
Watch
Generic on its own; relies on the wordmark for recognition.

E · Isometric M

The cube’s visible edges without the base: they spell M.

Works
A monogram hidden in the existing geometry. Distinctive at small sizes.
Watch
Strongest departure in feel; the cube is implied rather than shown.

Using the mark

  • One ink colour for all four corners. Keep the built-in opacity step; never recolor the corners individually.
  • The same geometry works at every size, from 16px favicons to the app icon.
  • Keep clear space of a quarter of the mark’s width around it; never place it inside another shape except the app-icon tile.
  • One source of geometry: src/components/m/logo-geometry.json. Regenerate icons with node scripts/build-logo.mjs.