Illustrations - Trezor Design

Illustration is how we make the invisible visible. From abstract crypto concepts to step-by-step flows, our hand-drawn approach turns complex topics into something anyone can grasp.

What illustration does for our brand

Illustration is what makes the abstract feel tangible — and what gives Trezor its distinctly human character in a category dominated by sterile, machine-perfect aesthetics.

Hand-drawn by intention

Every Trezor illustration is hand-drawn. Organic lines, intentional imperfection, the visible trace of a human hand. This is how the warmth and approachability that define our brand show up visually — security that feels human, made by people for people.

Trezor illustrations serve two distinct roles. Knowing which one you need is the first decision in any illustration work — and it shapes everything that follows.

Contextual

Contextual illustrations support and symbolize meaning. They accompany text, headlines, or product moments — adding warmth, character, and visual interpretation of the topic. Used across marketing, e-shop, and product surfaces wherever an image needs to carry feeling alongside content.

Informative

Informative illustrations explain and instruct. They build infographics, step-by-step manuals, knowledge base diagrams, and security flow visuals. Visually simpler than Contextual, but with the same hand-drawn character — clarity is their primary job.

Shared style principles

Both types share four principles that define how Trezor illustrations look and behave — regardless of role.

Hand-drawn quality

Every Trezor illustration is hand-drawn. Organic lines, intentional imperfection, the visible trace of a human hand. This is not stylistic preference — it's how the warmth and approachability that define our brand show up visually. A vector-perfect illustration is not a Trezor illustration.

Function first

Every illustration earns its place by doing a job. Contextual illustrations carry meaning. Informative illustrations explain something. There is no Trezor illustration that exists purely as decoration. If you can't articulate what an illustration does, it shouldn't be there.

Restraint over abundance

One strong illustration outperforms three average ones. Resist the impulse to fill empty space — empty space is part of the composition. When in doubt, use fewer illustrations, not more. Density signals visual noise; restraint signals confidence.

Clarity over cleverness

When a clever idea and a clear one conflict, clarity wins. Trezor illustrations communicate first and impress second. We can be playful, surprising, or original — but never at the expense of being understood. If the viewer has to work to grasp the illustration, the illustration has failed its job.

Contextual illustrations carry meaning. They support text, headlines, and product moments — adding warmth, character, and visual interpretation of the topic. Used wherever an image needs to do more than explain — it needs to evoke.

Definition

Contextual illustrations are the expressive arm of Trezor's illustration system. Where Informative illustrations explain how things work, Contextual illustrations communicate what something means or feels — security, ownership, freedom, trust.

You'll find them in marketing campaigns, e-shop pages, product onboarding, blog posts, and brand communications. Anywhere the goal is to support a message rather than instruct, this is the right type to reach for.

Levels of detail

Levels of detail provide a consistent framework for illustration sizing and simplify the creation process. Each level can be enhanced with animation to bring added clarity and character.

L — Large

Designed for use at large sizes where illustration space is generous. Rich in detail, ideal for communicating complex concepts and supporting in-depth storytelling. Used in hero placements, full-screen onboarding, and feature highlights.

M — Medium

Simplified forms for medium-sized placements. Clear and easy to understand, these visuals support messaging by reinforcing the context without overwhelming it. Used in section headers, feature blocks, and content cards.

S — Small

Minimal and icon-like, optimized for small-scale use. Perfect for statuses, UI indicators, or quick visual cues where clarity and distinction are key. Used in inline references, list items, and compact UI elements.

Color combinations

Contextual illustrations use four defined color combinations. Each combination has a specific role — choose based on the surface and context of the illustration, not personal preference.

Neon green illustration

Green 300 + Black. The most prominent combination. Used mainly in marketing. The only style suitable for application on photography backgrounds.

Soft green illustration

Green 100 + Green 700. For use mainly in Trezor digital products. The subtle illustration style does not interfere with the visual prominence of surrounding interface elements. Always apply to a white or light background.

Dark green illustration

Green 800 + Green 300. Inverted version of soft green. For use mainly in Trezor digital products. Always apply to a dark green background.

White illustration

White + Black. For use on backgrounds in secondary brand colors, or on light backgrounds — for example in Trezor package infographics.

Examples

Do's & Don'ts

Use Contextual illustrations to support messaging, never to fill empty space.

Use Contextual illustrations as decoration to enhance otherwise plain layouts.

Match the level of detail to the size of the placement — L for hero, M for medium, S for icon-like.

Apply detail levels inconsistently — a hero placement with S detail looks underwhelming; a small UI element with L detail overwhelms the interface.

Choose the color combination based on the background and context, following the defined options.

Modify or recolor existing illustrations outside the defined combinations.

Pair illustrations with headlines or short text where they add meaning to the content.

Combine multiple competing illustrations in one layout — restraint over abundance.

Maintain consistent character — every Contextual illustration should feel like part of the same family.

Mix color combinations within a single composition or related set of materials.

Informative illustrations explain and instruct. They build the visuals behind setup manuals, knowledge base articles, and packaging infographics — turning multi-step processes and technical concepts into something anyone can follow.

Definition

Informative illustrations are the functional arm of Trezor's illustration system. Where Contextual illustrations carry feeling and meaning, Informative illustrations do work — they explain, instruct, and clarify.

You'll find them in printed setup manuals, packaging infographics, knowledge base diagrams, and any context where the user needs to understand a process or sequence. Function leads. Form supports.

Style

Informative illustrations are simpler, more geometric, and more restrained than Contextual. The hand-drawn character is still present — it's what keeps these visuals consistent with the rest of the Trezor system — but it takes a back seat to clarity, precision, and readability. Form follows function.

Most Informative illustrations are outline-based rather than filled, which keeps them light and easy to compose into larger diagrams. Selective fills are allowed where they aid recognition — for example, badge elements or numbered step markers.

Color combinations

Informative illustrations are typically rendered in a single color, chosen to provide strong contrast against the background. Below are the defined combinations.

Black on white

The default combination. Used in printed manuals, packaging infographics, and any light-background context where high readability is the priority.

White on dark green

Inverted version of the default. Used on dark green backgrounds — printed materials, packaging panels, or product surfaces where the dark green is established.

Neon green on dark green

Used on dark green backgrounds where additional brand presence is needed. The neon green combination signals brand more strongly than white but reduces legibility — use it where recognition matters more than maximum contrast.

Composition

Informative illustrations are designed to be composed. They rarely stand alone — they combine with numbered step markers, callouts, arrows, and typography to form complete diagrams. To support this, they're built from a library of reusable assets, some fixed, some flexible.

There are no fixed rules for layout — a setup guide may use a vertical step list, a packaging insert a horizontal flow, a knowledge base diagram a non-linear structure. The right composition is whichever makes the process easiest to follow. Clarity, simplicity, and readability come before visual impact.

Examples

Do's & Don'ts

Use Informative illustrations to explain processes, sequences, and technical concepts where text alone would be insufficient.

Use Informative illustrations where Contextual would be more appropriate — they communicate differently and carry different weight.

Compose diagrams from the library of reusable assets — consistency comes from shared building blocks.

Improvise standalone illustrations outside the asset library when composing for KB or printed materials — consistency depends on shared components.

Default to outlines; use fills only where they aid recognition (badges, numbered markers, key icons).

Over-stylize Informative illustrations. The hand-drawn character is present but restrained — clarity comes first.

Choose the color combination based on the background, prioritizing readability above all else.

Mix multiple color combinations within a single diagram or related set of materials.

Pair illustrations with numbered steps, labels, or callouts to reinforce the instructional purpose.

Add decorative elements that don't serve the instructional purpose. Every line should explain something.

Production guidelines for everyone creating new Trezor illustrations. Tool-agnostic by design — what matters is the resulting style, not the software used to make it.

Source files and tools

Trezor illustrations should be created in vector software that supports brush-based drawing with pen pressure simulation. Figma is the current preferred environment; legacy assets exist in Adobe Illustrator and remain valid until replaced.

The principle is the same regardless of tool: every illustration must match the established Trezor style — hand-drawn character, defined stroke hierarchy, uniform line weight, consistent fill behavior. Tool choice is a means to that end, not the end itself.

Two views

When creating illustrations we use two views: a frontal 2D view or a spatial 3D view.

2D view

3D spatial view

Stroke hierarchy

Every Trezor illustration follows a clear stroke hierarchy:

Outline (bolder) — defines the primary contour of the object. The strongest stroke in the illustration.
Internal lines (thinner) — describe internal structure, detail, and form. Visually subordinate to the outline.
Hatching — used for 3D enhancement or visual enrichment. Adds texture, depth, and hand-drawn character without competing with the primary structure.
Background fill — uses Green 300 (or the appropriate color from the defined combinations). Solid, no gradients.

This hierarchy keeps illustrations readable at any size and consistent across the system.

Line weight when scaling

Vector outlines do not scale automatically with the illustration. When an illustration is enlarged, lines appear too thin; when reduced, lines become too thick. Both break the visual consistency of the system.

For best results, prepare each illustration at the approximate final size before exporting. After resizing, manually adjust the line thickness to match the original ratio.

When composing visuals with multiple illustrations side-by-side, all illustrations must have visually unified line thicknesses — even if they originated at different source sizes.

Drawing technique

The hand-drawn character of Trezor illustrations comes from organic, pressure-sensitive strokes. The ideal setup is a drawing tablet with a stylus that simulates pen pressure — the stroke should respond to drawing speed and pressure, producing natural variation.

When a tablet isn't available, use a brush that simulates pen pressure variation. Reference the existing illustration library for stroke character. Multiple brushes can be combined within a single illustration to match different needs.

The goal is the same regardless of method: strokes should feel made by a human hand, with intentional imperfection and visible character.

Informative illustrations — production notes

Informative illustrations follow the same stroke language as Contextual, but reduced. The hand-drawn character is preserved through stroke variation — but simplified, geometric, and outline-based.

Key differences:

Outline only, no fills (with rare exceptions for badges and numbered markers)
No hatching — clarity takes priority over decorative texture
Reduced stroke variation — pen pressure variation is present but more restrained than in Contextual
Single color per illustration — chosen from the Informative color combinations, not from Contextual's filled palette

When composing Informative diagrams, draw from the shared asset library. Avoid creating standalone illustrations outside the library — consistency depends on shared building blocks.

Supportive elements

When illustrations are placed within other visuals — most often photography — it's possible to add supporting elements that extend the illustration's character into the surrounding composition. Examples include waves, motion lines, or small graphic accents.

These elements must follow the same production specifications as the illustration itself: same stroke hierarchy, same line weight ratios, same hand-drawn character. They are extensions of the illustration, not separate decorative elements.

AI-generated illustrations

For low-exposure placements where production cost outweighs craft fidelity, AI-generated illustrations are acceptable. A dedicated internal tool is in development to generate illustrations consistent with the Trezor style.

This applies only to contexts where the illustration is supportive rather than central — internal materials, low-traffic surfaces, rapid-iteration content. High-stakes touchpoints (marketing campaigns, product onboarding, hero placements, packaging) continue to require hand-crafted illustrations from the asset library.