Release 0.3.0-draft.1 · Development standards
Choose the treatment that serves the moment. A person arriving, reading and completing a task needs different levels of visual intensity within the same recognisable brand.
Treatment selector
| Treatment | Best suited to | Composition | Restraint |
|---|---|---|---|
| A — Cinematic continuity | Awareness, homepage entry, brand introduction | Wide material environment, generous dark copy field, large regular headline | One dominant scene; static equivalent; reading stays stable |
| B — Quiet precision | Guidance, tools, proposals, policies, reports | Strong type hierarchy, thin dividers, modest panels, generous margins | Detail earns its place; no decorative obstacle to a task |
| C — Material focus | Campaigns, covers, details, feature announcements | Close crop of a purposeful cobalt/metal/ivory object, concise copy | Keep a service descriptor and a clear route onward |
These coexist. A cover may use C and the report inside B; an entry scene may use A before a form uses B. Do not assign different fonts or palettes to them.
Composing from content
Start with one dominant message, one supporting explanation and one primary next action. Use a common left edge for mark, headline and supporting text when appropriate. Align fields, labels and data precisely. Campaign imagery may cross a grid; functional controls should not.
For digital layouts, start with 20–24 px side margins on small screens and increase with space. For A4 documents, start with 18–24 mm margins. For campaigns, reserve at least 8–10% of each edge as a working safe area before platform overlays are known. These are starting choices, not universal export specifications.
Use a simple spacing rhythm based on 4/8 units digitally or an equivalent small modular interval in print. Distinguish related items with a small gap, groups with a larger gap and sections with a clearly larger pause. Avoid tuning dozens of unrelated values by eye.
Crop and density
Protect the mark, main message and CTA at every target crop. An image that works in landscape may need a separately composed portrait version. Keep key subject detail away from type. A busy image plus a gradient is not automatically a reading field: inspect the brightest and most detailed frame or crop beneath text.
For an overfull layout, first shorten or sequence the content, then increase space or pages. Do not shrink everything equally. For a quiet layout that feels empty, strengthen hierarchy or add a useful example before adding decorative cards.
Example route: A homepage introduction establishes possibility → B service detail explains scope → B enquiry form completes the action. Campaign route: C portrait ad introduces one workflow → B landing page provides evidence → a truthful request CTA.
Operating rules
LAY-001 — Choose a treatment by reader task
- Do: Select A for entry, B for reading/tasks, C for campaign/detail emphasis.
- When: New layouts across media
- Variation: Combine treatments across an experience with a consistent core.
- Avoid: Treating them as competing sub-brands or applying cinematic density everywhere.
- Check: Explain the treatment choice in one sentence tied to the reader’s task.
LAY-002 — Give each composition one lead
- Do: Establish a dominant idea, supporting detail and a primary next action.
- When: Campaign, page, slide and cover layouts
- Variation: Secondary actions when clearly subordinate.
- Avoid: Multiple equally loud messages or decorative hierarchy.
- Check: A quick first glance reveals the intended message.
LAY-003 — Design for each crop
- Do: Keep copy, mark and useful subject matter safe at target sizes.
- When: Responsive layouts and multi-format campaigns
- Variation: Purpose-built re-crops or separate compositions.
- Avoid: Stretching one artwork or hiding content behind platform overlays.
- Check: Inspect each actual output at normal viewing size.