Composition - Trezor Design

Composition is how Trezor's visual elements relate to space — and to each other through space. It is how Radical Simplicity operates in practice, on every surface.

Most products in our category fill layouts with information. Trezor doesn't. We compose with space and pause — because that's how the product itself feels: calm, direct, and without noise. The way we design should match how the product works.

Negative space is our primary compositional tool — not residue, not styling preference, not what's left after content is placed. Space carries hierarchy, pacing, and emphasis. It does the work that other brands typically do with size, weight, and density.

Everything in a composition is chosen

Every element and every structural choice should be the result of a decision, not a default. Each item in a layout carries something — meaning, function, or hierarchy. Each column, section, or layer exists because the message asks for it. When something is added because the canvas feels empty or the layout looks bare, it tends to dilute everything around it rather than reinforce it.

Compose with negative space

The empty areas of a layout are part of the composition, not the space surrounding it. They separate ideas, direct attention, and give the eye time to move. A layout where the empty space is doing visible work feels intentional; one where it's only waiting to be filled feels unresolved.

Hierarchy through space

Space and isolation are usually the strongest hierarchy signals on a Trezor surface — often stronger than size or weight. An element with room around it reads as important without being made louder. Type weight, scale, and contrast amplify hierarchy that's already established compositionally; they don't substitute for it.

Negative space is the primary tool of composition at Trezor. It does three jobs: isolates what matters, paces the eye, and activates the frame. Most composition decisions reduce to one of these three operations.

Hierarchy through isolation

The most important element gets the most space around it — not the most weight inside it.

Isolation creates hierarchy by separating a single element from everything else, letting it occupy attention without competing. The eye is drawn to what stands alone as much as to what stands out. Generosity of space is itself a hierarchy signal — possibly the strongest one we have.

When something needs to feel important, increase the space around it before you increase its size or weight. If space alone makes it read as primary, you don't need anything else.

Pause as composition

The space between sections is part of the composition, not the gap between two compositions.

Vertical pacing on a long surface — landing page, scroll, document, packaging panel — is a compositional decision, not a default. Generous breaks between sections give the eye time to absorb one idea before encountering the next, and they make the rhythm of the page feel deliberate rather than templated.

When two sections sit next to each other, give them more vertical space than feels comfortable. If they feel like they're crowding each other, the ideas in each one weaken.

Edge-to-edge

The frame is part of the composition. Cropping is a tool, not an accident.

Edge-to-edge treats the boundary of the composition as an active element. Subjects don't need to sit comfortably inside safe margins — they can bleed off the frame, run against the edge, or use the edge as a counterbalance. This produces a kind of tension that centered, padded layouts can't.

When framing a product or image, ask whether the subject needs to be fully visible to land. If it doesn't, push it against an edge or beyond it.

Negative space is an optional tool. Use it where it strengthens a brand moment or supports user comprehension — not by default, and never at the cost of usability.

The principle is universal across Trezor design. The application is not. Some touchpoints are best built composition-led, with generous negative space carrying the message. Others are best built task-led, using familiar, denser patterns that users already know how to navigate.

Composition-led touchpoints

Use composition-led layouts when the touchpoint is about experiencing the brand, not completing a task:

Marketing touchpoints — landing pages, hero sections, product introductions, campaign creative
Onboarding moments where attention should rest on a single idea
Packaging, retail, and physical brand touchpoints
Editorial or storytelling contexts

Here, negative space carries the message. It signals confidence, calm, and intent — and reinforces what Trezor stands for before a user reads a word.

Task-led touchpoints

Use task-led layouts when the touchpoint supports a user task that needs efficiency:

Trezor Suite portfolio, dashboard, and transaction flows
E-shop product detail pages and checkout
Settings, account management, and configuration screens
Documentation and support content

Here, density serves the user. Forcing extra space would slow comprehension, hide useful context, and add friction to flows where speed and clarity matter.

How to decide

Ask one question first: what does the user need from this touchpoint?

If they need to feel something → composition-led
If they need to do something → task-led

Both modes are Trezor. The discipline doesn't change between them: every element still earns its place, hierarchy is still deliberate, nothing is decorative. What changes is the scale of negative space — generous on composition-led touchpoints, calibrated on task-led touchpoints.

Both touchpoints are Trezor. The first is composition-led because it carries a brand moment. The second is task-led because it supports a user task. The discipline behind both is the same; only the scale of negative space changes.