What is Trezor's primary brand color?

Trezor's brand voltage is electric mint, rendered as the CTA button fill. The captured button shows a background of the green-family clustered around the light green tier in the CSS (--color-light-green-300, wired as #60e198 in the extraction). It appears in just four background occurrences on the page — all on the single primary CTA. Deep forest green text (#062d16) sits on top. The brand's own name and all surrounding chrome remain achromatic near-black and white; the mint is reserved exclusively for the one action the brand wants every visitor to take.

What typeface does Trezor use, and what should I substitute?

Trezor runs the Satoshi family across all tiers — a contemporary geometric sans with four named CSS weights: satoshiRegularFont (400), satoshiMediumFont (500), satoshiDemiboldFont (semi-bold), and satoshiBoldFont (700+). The hero h1 hits 144px in the Bold cut with -5.6px tracking; section h2 elements run at 32-80px in the Medium cut with tracking from -0.8px to -2.72px. Body and nav use Regular at 14-16px. Satoshi is open-source and available from the Fontshare foundry. The closest alternative for the display tier is Plus Jakarta Sans at the same weights; for body copy, Inter transfers cleanly.

Why does Trezor use near-black rather than a branded color for the hero?

The hero canvas is #1d1f23 — a very slightly blue-tinted near-black wired as --color-light-cool-grey-900. Using a branded color (mint, green) in the hero background would signal approachability; near-black signals vault-like security. Hardware wallets compete on the trust axis, not the warmth axis. The black-to-light-grey transition below the fold (the page body is #f0f1f3, a cool off-white) mirrors the physical Trezor device: dark shell, light screen. The photography lifestyle sections are lit in warm ambient light, providing visual relief against the dark hero without requiring any brand-color decoration.

What is Trezor's corner-radius philosophy?

The radius scale is small-step with one generous exception. The dominant radius is 4px — appearing 43 times across chips, nav elements, input fields, and small surface tiles. 8px is the card default (23 occurrences). 16px (10) and 24px (5) appear on larger feature cards. 32px (14 occurrences) is the most generous option — used on primary and secondary CTA buttons and on the large hero panel. 12px appears on the alert/cookie-banner component. There is no pill-style rounding anywhere on the page; Trezor's radius scale stays anchored in the 4-32px range without ever going to fully circular.

Can I use this DESIGN.md to build a hardware-security marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool. The agent will reproduce Trezor's specific moves: near-black canvas (#1d1f23) instead of a lighter neutral, single mint CTA voltage used exactly once above the fold, Satoshi type at four weight cuts including the 144px uppercase hero moment, and a small-step 4px radius scale with a 32px exception on buttons. All tokens reference extracted ground-truth values. The one move that requires care: the 144px uppercase heading only works in very short copy (two words — 'TAKE CONTROL'). Longer hero copy at that scale collapses into illegibility.

Trezor Design System

Trezor's marketing-site design system as a DESIGN.md file.

About Trezor DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source trezor.io

Fintech & Crypto

Trezor's marketing page is architecturally austere in a way that is unusual even for crypto hardware brands. The hero opens on a near-black canvas where the product name appears at 144px uppercase with -5.6px tracking — the typographic equivalent of stamping PROPERTY in a legal document. The sole chromatic moment is the CTA button: an electric-mint fill in deep forest green text that reads "Get Trezor now." No gradient wash, no floating geometric shapes, no hero illustration. The hardware device appears in a product photograph, not a render. Where Ledger leans on premium-product gradients and Coldcard commits fully to monospace terminal aesthetics, Trezor achieves its security posture through typographic scale and restraint.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens anchored around a near-black canvas (the page floor and the dominant ink), a single electric-mint brand voltage that appears as the primary CTA fill, and a structural grey tier for secondary text and background bands. Twelve typography tokens run the Satoshi family at four cuts — Regular (body, nav), Medium (sub-headings, supporting display), Demibold (button labels, category chips), and Bold (the colossal hero h1 at 144px and a secondary uppercase display at 72px). Six radius tokens run from a tiny 4px for small chips to a 32px large card. Seventeen components cover the hero, mint CTA, photography-anchored feature cards, and hairline-bordered nav.

Feed this file to Claude or Cursor and it will reproduce Trezor's specific moves: near-black canvas with photography-first sections, single electric-mint voltage reserved for the primary action, Satoshi Bold at extreme scale for the headline, and a 4px small-step radius on most UI surfaces with a 32px generous-card exception. The system is worth studying as an example of how to communicate security credibility without design clichés — no shield icons as hero art, no lock animations, just scale and restraint.

What makes it distinct

Mint reserved for one actionthe electric-mint CTA button is the only chromatic element on an otherwise achromatic page; it appears exactly once above the fold
144px uppercase displaythe hero h1 runs Satoshi Bold at 144px uppercase with -5.6px tracking, dwarfing typical SaaS hero conventions
Photography over decorationlifestyle and product shots carry all the visual energy; the brand never places colored shapes or gradients in the chrome
Satoshi type family in four cutsRegular, Medium, Demibold, Bold all appear in the same sans stack with no second family
Near-black not pure blackthe canvas is a slightly blue-grey near-black, not flat zero, softening the hardware-wallet gravity without losing the security signal

Live at trezor.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

trezor.io

Explore Trezor

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Trezor design system FAQ

Common questions about Trezor's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Trezor — official site

Trezor's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.