MSPACEZDesign System v1.1
Downloads
Composition modes

One system, six controlled expressions.

Modes are not directions. They share the grid, the colours, the type and the red signal; they differ in how much space, image, information and colour a message needs. Choose the mode from the content, then build.

Guideline

From guidelines/19-composition-modes.md

Principle

One system, six controlled expressions.

Rule

A Pure minimal · B Photo hero · C Measured information · D Editorial/information · E Campaign/impact · F Occasion. One mode per surface; modes share grid, colour, type and the one-signal rule.

When to use

Every communication surface.

When not to use

Product UI (keeps its component logic).

Do
  • Choose the mode from the message
  • Vary modes across a feed or campaign
Don’t
  • Combining devices from several modes
  • Using E for everyday content

ExampleSee board Composition modes (06).

The board

Six controlled composition modes — pure minimal, photo hero, measured information, editorial, campaign, occasion — with examples and when to use each

Board 06 · Composition modes · 1760 × 3330
Open full size ↗
Loading board

The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.