Trezor

Overview

Trezor is a hardware wallet brand serving 2+ million cryptocurrency users worldwide, built on a design philosophy of **Technical Minimalism with Organic Warmth**. The aesthetic combines austere, grid-based layouts with a vibrant emerald-green accent (#60e198) that signals trust, security, and forward momentum. The UI evokes a sense of controlled power: clean typography, generous whitespace, and purposeful color placement create an interface that feels both authoritative and approachable. The brand personality is direct, educational, and reassuring—never patronizing, never breathless. Voice example: "Your private keys never leave your device. That's the entire point." The design system prioritizes clarity over decoration, using the Satoshi typeface family (Regular, Medium, Demibold, Bold) to establish a contemporary yet grounded presence. Every interaction—from button hover states to form validation—is designed to reinforce the core message: you are in control.

Colors

The color system is anchored by a signature emerald green primary (#60e198), used exclusively for call-to-action buttons, active states, and key interactive elements. This accent appears infrequently but with high visual weight, creating a focal point against the neutral light background (#f4f5f7). The secondary green (#219352) and tertiary green (#00b67a) provide supporting depth for status indicators, badges, and secondary actions. The surface stack ranges from near-white (#ffffff) for elevated cards to cool grey (#dee0e4) for container backgrounds, with on-surface text anchored at #1d1f23 for maximum legibility. Outline colors (#7c8187 for primary, #afb3b9 for variant) define subtle borders and dividers. The error palette (#fa757e on #82262c background) is reserved for validation states

Typography

The type system uses Satoshi across all weights (Regular 400, Medium 500, Demibold 600, Bold 700), creating a cohesive, contemporary voice. Display (72px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (48px, 700 weight) breaks major sections; Headline-md (32px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and prominent descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to buttons and form labels; Label-sm (12px, 500 weight, 16px line-height, 0.02em tracking) for secondary labels and metadata. All headlines use negative letter-spacing (-0.02em to -0.01em) to

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining a fluid responsive behavior via clamp() functions (clamp(28.75rem, 90vw, 120rem)). The gutter spacing is consistently 24px (md spacing token), applied between grid columns and as the primary margin unit for section separation. Hero sections use lg spacing (40px) for vertical rhythm, creating breathing room between major content blocks. The page background is #f4f5f7 (surface color), with card and container elements elevated to #ffffff (surface-bright) using the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Input fields and form containers sit at surface-container-low (#f0f1f3) with 12px padding and 0.5rem border-radius. Whitespace is treated as a design element: generous margins around CTAs

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reinforces visual hierarchy without introducing darkness or opacity overlays. Level 1 (sm elevation): 0 1px 2px rgba(0, 0, 0, 0.06) is applied to subtle UI elements like badges and inline components. Level 2 (md elevation): 0 3px 8px rgba(0, 0, 0, 0.15) is the default for cards, input fields, and standard containers—this is the most frequently used shadow, creating a soft lift from the background. Level 3 (lg elevation): 0 8px 16px rgba(0, 0, 0, 0.12) is reserved for modals, dropdowns, and floating elements that demand maximum visual se

Shapes

The shape philosophy is **Geometric Precision with Soft Edges**—a balance between technical authority and human approachability. Buttons use 12px border-radius (1rem in rem units), creating a soft-cornered rectangle that feels modern without being overly rounded. Cards and containers use 16px border-radius (1.5rem), providing a more generous curve for larger surfaces. Input fields and small UI elements use 4px border-radius (0.25rem), maintaining a subtle, technical appearance. The full-radius token (9999px) is applied only to badges and pill-shaped elements. This hierarchy—12px for primary ac

Components

Action Elements Buttons are the primary interactive currency. The button-primary component uses background #60e198 (primary), text #062d16 (on-primary), padding 12px 24px, height 48px, and border-radius 12px. The label-md typography (14px, 600 weight) ensures legibility at small sizes. On hover, the background transitions to #5fffa1 (primary-fixed-dim) with a 120ms ease-out timing function (transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1)). On active/pressed state, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) to create a subtle depth inversion. Button-secondary uses a transparent background with a 1px border in outline-variant (#afb3b9), text color primary (#60e198), and the same padding/height/radius. On hover, apply background-color: {colors.surface-container-

Do's and Don'ts

**Do**

• Do use primary green (#60e198) exclusively for CTAs, active states, and high-priority interactive elements—never for backgrounds or body text.
• Do apply 24px (md spacing) as the default margin between major content sections and 12px (sm spacing) between related elements within a section.
• Do use Satoshi Demibold (600 weight) for all button labels and form labels to establish clear visual hierarchy and scanability.
• Do maintain minimum 48px height for all touch targets (buttons, input fields) to meet accessibility and usability standards.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers as the default; reserve lg elevation for modals and floating elements.
• Do use 12px border-radius on buttons and 16px on cards to maintain the Geometric Precision aesthetic without appearing playful or overly rounded.

**Don't**

• Don't use the primary green (#60e198) for body text, backgrounds, or decorative elements—reserve it for interactive affordances only.
• Don't apply border-radius: 0 (sharp corners) to any interactive element; the minimum is 4px (sm) for inputs, 12px for buttons.
• Don't mix Satoshi weights within a single component; use consistent weight pairing (e.g., 600 for labels, 400 for body) to avoid visual confusion.
• Don't apply shadows larger than lg elevation (0 8px 16px rgba(0, 0, 0, 0.12)) to standard UI elements; reserve maximum elevation for modals and overlays.
• Don't use color alone to communicate state; always pair color changes with text labels, icons, or other visual cues for accessibility.
• Don't exceed 1280px container width on desktop; use clamp() functions to maintain responsive fluidity without breaking the layout rhythm.