Trezor Design System

Overview

Trezor's marketing site argues security through omission. Scale-as-credential: the hero headline runs at 144px uppercase in Satoshi Bold — a scale so large that the text crops at the viewport edge, demanding the reader scroll to see its full two-word message ("TAKE CONTROL / WITH TREZOR"). This is not decorative maximalism; the extreme scale communicates that Trezor controls the terms. Where Ledger layers gradient blues over product renders to signal modernity, and where most crypto brands deploy lock icons and shield motifs as hero art, Trezor puts the product and the typeface in the same room and steps back.

The single chromatic move is the electric-mint CTA button — a mint-green fill in deep forest-green text that appears exactly once above the fold. The mint does not appear in the nav, the section headings, or the background anywhere on the page. This is the inverse of how most hardware-wallet brands use color: not "use the brand color everywhere to reinforce awareness," but "use the brand color once, on the exact action that generates revenue." The Satoshi family's four named weight cuts (Regular for body, Medium for sub-headings, Demibold for buttons, Bold for display) give the system typographic range without a second family.

The shape language is small-step: 4px is the dominant radius (43 occurrences on chips, nav, and inputs), 8px handles cards, and 32px handles the primary CTA button and large panels. There is no pill-style rounding anywhere — the system never tips into the approachable-consumer direction that circular elements would suggest.

Key Characteristics:

• Near-black canvas (#1d1f23) for the hero and dark sections — not the charcoal-grey of typical fintech brands, but a slightly blue-shifted near-black.
• Single electric-mint voltage (the CTA fill) with deep forest-green text — appears in 4 background occurrences total on the page, all on one button.
• Satoshi Bold at 144px uppercase with -5.6px letter-spacing for the hero h1 — the most extreme display moment in the 71-file directory.
• Photography-driven feature sections: lifestyle shots and device product photography replace any decorative illustration.
• Near-black ink (#1d1f23) carries 221 of 225 text occurrences — near-mono color for text throughout the white body sections.
• 4px as the dominant UI radius (43 occurrences); 32px for buttons and prominent panels (14 occurrences).
• Section transitions alternate between near-black hero and a cool off-white canvas (#f0f1f3) below the fold.

Colors

Brand

• Primary Mint ({colors.primary} — #60e198): frequency 4. Used as background only — the single primary CTA button. Wired in CSS as --color-light-green-300, --color-light-green-alpha-150/100/50/300. The system's one chromatic voltage; no other brand-layer color appears in the rendered page.
• Primary Text ({colors.primary-text} — #062d16): frequency 9. Used as text (8) and background (1). Deep forest green — the CTA button label and the small "Physical protection" accent heading in the feature section. Wired as --color-light-green-900.

Surface

• Canvas Dark ({colors.canvas-dark} — #1d1f23): frequency 225. Used as text (221) and background (4). The dominant page tone — used as both the hero section background fill and the near-black body text color across the off-white sections. Wired as --color-light-cool-grey-900. Not split into separate ink and background tokens in the CSS; the same value serves both roles.
• Canvas ({colors.canvas} — #f0f1f3): frequency 14. Used as background (11) and border (3). The off-white page floor below the hero. Wired as --color-light-cool-grey-75 and --color-pageBg (a near-identical value merged into this cluster).
• Off-white ({colors.off-white} — #ffffff): frequency 142. Used as text (112), background (21), and border (9). Pure white — appears on the card surfaces, the nav logo zone, and text-on-dark elements.

Text

• Ink ({colors.ink} — #1d1f23): primary text color across the page. The same token as canvas-dark; see above.
• Ink Muted ({colors.ink-muted} — #5d6268): frequency 22. Used as text (19) and border (3). Secondary body copy, captions. Wired as --color-light-neutral-grey-600 and --color-light-cool-grey-600.
• Ink Faint ({colors.ink-faint} — #6b7280): frequency 25, text only. Lighter secondary text. Wired as --color-gray-500.
• Ink Subtle ({colors.ink-subtle} — #7c8187): frequency 4, text only. Tertiary labels. Wired as --color-light-cool-grey-500.

Structural

• Surface-1 ({colors.surface-1} — #2e3952): frequency 11. Background (9) and border (2). Dark card surfaces inside the hero sections. Wired as --color-light-cool-grey-alpha-50 and --color-gray-700.
• Hairline ({colors.hairline} — #dee0e4): declared as --color-light-cool-grey-150. Appears in the card borders and input field outlines.
• Shadow Ink ({colors.shadow-ink} — #002847): frequency 22, shadow only. The tinted shadow used on the surface-action and surface-fixed shadow tokens (--shadow-surface-fixed).

Typography

Font Family

The system runs Satoshi across every typographic surface — a contemporary geometric sans-serif available on Fontshare. Four named CSS weight variables handle the full range: satoshiRegularFont (400) for body, nav, and captions; satoshiMediumFont (500) for sub-headings and the secondary display tier; satoshiDemiboldFont for button labels and category chips; satoshiBoldFont for the colossal hero display. There is no second family; the variation is weight and scale, not typeface.

Hierarchy

Principles

Letter-spacing runs negative at every display tier — from -5.6px at 144px to -0.16px at 16px. This tight tracking is the typographic signature: it reads as precision engineering rather than marketing exuberance. The weight ceiling is the Bold cut used only for the two largest display moments; everything below 64px uses Medium or Regular. The system does not use any uppercase-tracked small-caps labels (unlike Cloudflare or Stripe).

Note on Font Substitutes

Satoshi is open-source on Fontshare. For teams that cannot load it, Plus Jakarta Sans at equivalent weights is the closest commercial alternative. Inter transfers cleanly for the 14-20px body tiers but lacks the slightly-wider cap height that makes Satoshi read confidently at 80px+.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.2xl} 64px.
• Section padding: ~96px vertical on the hero; ~48px between below-fold sections.
• Card internal padding: 32px uniform.
• Navbar height: declared as --navbar-height: 96px — the same value as the hero top-padding, which means the hero text starts at exactly 192px from the page top.

Grid & Container

• Max content width: --max-w-desktop: 120rem declared in CSS but the captured hero constrains content to approximately 1232px wide.
• Hero: near-black full-bleed canvas, centered text column at about 720px. The 144px heading overflows this container and crops at the right edge intentionally.
• Feature sections: 2-column layout pairing photography on the left with text on the right; at narrower widths collapses to 1-column.
• Spec/feature grid: a 2-up card grid with 32px internal padding per card, divided by a 1px hairline border.

Rhythm

The page alternates between dark (the hero and the two large uppercase sections) and light (the off-white photography sections). The dark sections carry all the typographic muscle; the light sections are image-led with minimal heading copy. This alternation prevents the page from feeling either purely dark-themed or purely corporate-light.

Elevation

The system uses shadow-with-color-tint rather than neutral black shadows. The declared CSS variables --shadow-surface-action and --shadow-surface-fixed both use a tinted navy ({colors.shadow-ink} — #002847) as their shadow ink, at low opacity (0f through 14 alpha). This gives card and surface elevations a cool, trust-signaling undertone rather than a neutral grey.

• Flat: hero band, typography sections, footer — no shadow.
• Surface action: the mint CTA button carries a faint navy shadow (using {colors.shadow-ink} at very low opacity) on the resting state, tightening to a tighter inset on hover.
• Surface fixed: sticky nav and modal surfaces use a stronger two-layer navy shadow.

Shapes

The radius scale is functional and grounded, with one clear outlier:

• {rounded.xs} 2px — rare, for microchip-level accents.
• {rounded.sm} 4px — the dominant radius, 43 occurrences. Small chips, nav hover states, input fields.
• {rounded.md} 8px — cards and panels, 23 occurrences.
• {rounded.lg} 16px — larger feature panels, 10 occurrences.
• {rounded.xl} 24px — 5 occurrences, large card blocks.
• {rounded.2xl} 32px — 14 occurrences. The primary CTA button and the hero cookie-consent panel. The single large-radius moment.

There is no pill (9999px) anywhere. The scale is binary in practice: tight-4px for UI chrome, and 32px for the one large-radius promotional surface.

Components

button-primary — Electric-mint fill (#60e198) with deep-forest-green text (#062d16), Satoshi Demibold 16px, 32px radius, 10×20px padding, 44px height. "Get Trezor now" is the canonical instance — it appears once in the hero and once in the sticky footer band.

button-secondary — Transparent fill, near-black text, 1px hairline border, 32px radius, same dimensions as primary. Used for "Learn more" and secondary actions below the fold.

top-nav — Near-black canvas-dark fill, 96px height, white text in 14px/400 Satoshi Regular. Logo (Trezor shield mark + wordmark) flush left, nav links center (Products, App, Core, Learn & Support), country/language selector + search + cart icon flush right.

nav-link — Transparent background, white text, 14px/400, 4px hover-state radius. No hover background in the captured surface — hover is a color shift, not a fill.

hero-section — Near-black full-bleed, 96×32px padding. Houses the 144px uppercase headline stacked across two lines, a one-sentence sub-paragraph in 24px/400 Regular, and the mint CTA below.

hero-heading — Near-black text (or white when on the dark hero) at Satoshi Bold 144px / -5.6px tracking. The two-word stacked display.

section-heading — Body-section headings at Satoshi Medium 32px / -0.8px, near-black text on the off-white canvas.

body-paragraph — Satoshi Regular 20-24px, near-black text. Runs at 20px in feature cells and 24px in the hero sub-paragraph.

body-paragraph-muted — Ink-muted (#5d6268) text at 14px/400 for captions and metadata.

card — Off-white fill, 1px hairline border, 8px radius, 32px padding. The default feature card below the fold, housing a heading + 2-3 line description.

card-dark — Surface-1 (#2e3952) fill, white text, 16px radius, 32px padding. Used inside dark sections for product-spec cards.

feature-cell — Off-white canvas fill, hairline border, 8px radius, 32px padding. 2-column grid in the "What makes Trezor different" section.

text-input — Off-white fill, near-black text, 1px hairline border, 4px radius, 10×20px padding, 44px height.

cookie-banner — Off-white fill, hairline border, 12px radius. Three-tab interface (Consent / Details / About) with the primary mint "OK" button.

tab-pill — Transparent, hairline border, 4px radius, 6×12px padding. The inactive tab state on the cookie-banner and category selectors.

tab-pill-active — Mint fill, forest-green text, 4px radius — the same mini-CTA treatment scaled down to tab size.

Do's and Don'ts

Do use the mint CTA (#60e198) for exactly one primary action per viewport. The mint's impact comes from its scarcity — it appears once above the fold because there is one action Trezor wants visitors to take.

Do run display headings at negative letter-spacing: -5.6px at 144px, -2.8px at 72px, -2.72px at 80px. The tightened tracking is the visual signal of precision; tracking the same sizes loosely makes the headline read as casual.

Do use the tinted navy shadow (#002847 at 0a-14 alpha) rather than a neutral rgba(0,0,0,0.08) for elevated surfaces. The cool undertone adds brand depth without a second chromatic accent.

Do alternate dark and light section bands. The near-black sections carry the typographic authority; the light photography sections provide relief. Running the entire page on one surface tone would either feel oppressive (all dark) or weak (all light).

Don't use the mint fill on more than one CTA per viewport. Multiplying the mint across section headings, card accents, or icon fills destroys the scarcity that makes the button read as the single most important element on the page.

Don't run the hero h1 below 72px. The Satoshi Bold at 144px-72px is the system's emotional argument; at 48px it looks like a standard fintech section heading, not a claim of control.

Don't add a pill-radius (9999px) to buttons or chips. The system's maximum is 32px — which is already generous for this identity. Pill rounding introduces consumer-app warmth that conflicts with the security-hardware posture.

Don't use #f0f1f3 as a text color. It is the canvas background (11 background occurrences) — placing any text in this color on a white surface produces near-zero contrast.

Known Gaps

• Green CTA hover state: the mint button's hover and active states are not captured from the marketing surface. The CSS declares --shadow-surface-action-hover (a slightly stronger navy shadow) but the hover background color change is not in the extraction.
• Dark mode: the near-black hero and the light body are both declared in the same CSS; there is no declared dark-mode media query variant. The product app (Trezor Suite) ships a full dark mode, not captured here.
• Mobile nav: the top-nav at 96px collapses to a hamburger on mobile; the mobile menu styles are not exposed on the desktop-captured surface.
• Form states: the text input carries only the resting state. Error, focus, disabled, and success states are present in the product app but not on the marketing site.
• Animation: the hero text animates in on load (a fade-up keyframe declared as --animate-fade-up), and the marquee section runs a scroll animation (--animate-marquee-left). Duration and easing values are in the CSS but not captured as token values.
• Product surfaces: this DESIGN.md captures the marketing site only. Trezor Suite (the desktop and web app for managing wallets) has a distinct token system with dark-mode-first surfaces and a richer component library.