--- name: Ledger tagline: White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. updated_at: 2026-05-28T23:13:37.854Z published_at: 2026-05-28T23:13:37.854Z author: webdesignhot source_url: https://www.ledger.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, minimal, clean, crypto, hardware, fintech] preview_swatch: ['#ffffff', '#ff5300', '#000000'] related: [coinbase, kraken, binance] description: 'Ledger''s marketing surfaces read like a security-hardware brand that wants to feel premium and unthreatening at once. The canvas is pure white (`#ffffff`) with near-black ink (`#000000`); body type runs Inter at weight 400, calm and unembellished. The entire brand voltage lives in a single colour — Ledger Orange (`#ff5300`, rgb 255,83,0) — reserved almost exclusively for the primary CTA, a full-pill button at 100px radius. Eyebrows, technical labels, and device-spec captions switch to HMAlphaMono, a monospace accent that signals "engineered hardware" without resorting to neon or cyberpunk cliché. Page rhythm rotates between bright white editorial sections and full-bleed black product chapters where the physical Ledger devices are photographed against deep darkness. The orange-on-white CTA plus monospace technical accents is the whole identity: warm, precise, premium, secure.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent-mono muted: text-muted border: border ring: focus-ring colors: bg: '#ffffff' # canvas — pure white default page floor bg-dark: '#000000' # surface-dark — full-bleed device-photo chapters, footer surface-soft: '#f5f5f5' # bright neutral elevation band between white sections surface-strong: '#ebebeb' # secondary surface, hovered light cards surface-card: '#ffffff' # default card surface (white separated by hairline) surface-dark-elevated: '#141414' # elevated cards / tiles inside black chapters text: '#000000' # ink — primary headlines, strong body text-body: '#3d3d3d' # body — running paragraph text on white text-muted: '#6b6b6b' # captions, spec labels, secondary meta text-subtle: '#999999' # disabled, lowest hierarchy brand: '#ff5300' # Ledger Orange — single brand voltage, primary CTA only brand-hover: '#e64a00' # primary-hover — pressed/darker orange brand-disabled: '#ffb999' # desaturated orange used on disabled primary CTA on-brand: '#ffffff' # white text on the orange pill on-dark: '#ffffff' # white text on black chapters on-dark-soft: '#a3a3a3' # muted text on black surfaces on-dark-faint: 'rgba(255,255,255,0.02)' # near-invisible dark tile fill (tertiary CTA bg) accent-mono: '#000000' # HMAlphaMono technical labels (black on white, white on dark) eyebrow-tint: 'rgba(212,160,255,0.30)' # rare lilac eyebrow-highlight wash seen on hero kicker border: '#000000' # full-strength black outline border on secondary CTA border-hairline: '#e0e0e0' # hairline — default 1px divider on white border-on-dark: 'rgba(255,255,255,0.12)' # divider on black chapters semantic-up: '#16a34a' # success / "secured" green semantic-down: '#dc2626' # error / warning red focus-ring: 'rgba(255,83,0,0.40)' typography: display: family: 'HMAlphaMono, "SF Mono", ui-monospace, Menlo, monospace' weights: [500, 600, 700] body: family: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' weights: [400, 500, 600] mono: family: 'HMAlphaMono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-strong: { size: 16, weight: 600, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 14, weight: 500, lineHeight: 1.4, tracking: '0.04em', family: display } spec-mono: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: mono } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } button: { size: 16, weight: 500, lineHeight: 1.15, tracking: '0', family: body } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 100 full: 9999 spacing: base: 4 scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 24, lg: 32, xl: 48, xxl: 64, section: 96 } layout: page-width: 1280 prose-width: 720 header-height: 64 components: button-primary: { bg: brand, text: on-brand, padding: '16px 32px', height: 56, radius: pill, font: button } button-secondary: { bg: bg, text: text, border: '1px solid border', padding: '15px 31px', height: 56, radius: pill, font: button } button-secondary-dark: { bg: transparent, text: on-dark, border: '1px solid on-dark', padding: '15px 31px', height: 56, radius: pill, font: button } button-tertiary-text: { bg: transparent, text: text, font: button } device-tile-dark: { bg: on-dark-faint, text: on-dark, radius: none, padding: lg } card: { bg: surface-card, border: '1px solid border-hairline', radius: lg, padding: md } card-dark: { bg: surface-dark-elevated, text: on-dark, radius: lg, padding: md } card-feature: { bg: surface-soft, radius: lg, padding: lg } badge-pill: { bg: surface-strong, text: text, radius: pill, padding: '6px 12px', font: caption } badge-mono: { bg: transparent, text: text, border: '1px solid border-hairline', radius: sm, padding: '4px 8px', font: spec-mono } input-text: { bg: bg, border: '1px solid border-hairline', radius: md, padding: '12px 16px', height: 48 } top-nav-light: { bg: bg, text: text, height: 64, font: label } top-nav-dark: { bg: bg-dark, text: on-dark, height: 64, font: label } footer-dark: { bg: bg-dark, text: on-dark-soft, padding: '64px 0', font: body-sm } motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — device-rotation loops and parallax freeze to a static frame; hover lifts collapse to colour-only' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(0,0,0,0.04) 0 1px 2px' standard: 'rgba(0,0,0,0.08) 0 8px 24px -6px' elevated: 'rgba(0,0,0,0.12) 0 24px 48px -12px' on-dark: 'rgba(0,0,0,0.50) 0 24px 64px -16px' ring: '0 0 0 3px rgba(255,83,0,0.40)' accessibility: contrast-text-on-bg: 21.0 contrast-text-on-brand: 3.6 contrast-onbrand-on-brand: 3.0 contrast-body-on-bg: 10.8 focus-ring: '3px solid rgba(255,83,0,0.40)' reduced-motion-honored: true dark-mode: dual --- ## 1. Visual Theme & Atmosphere Ledger reads like a precision-engineered security product that has decided not to look like one. The canvas is **pure white** (`#ffffff`) carrying **true-black ink** (`#000000`) — the highest-contrast possible base, which says "nothing to hide, nothing to soften." Where most crypto brands reach for neon gradients and cyberpunk grids, Ledger does the opposite: a clinically calm white page that lets a single warm colour do all the talking. That colour is **Ledger Orange** (`#ff5300`, rgb 255,83,0), and it is rationed with discipline — it appears almost exclusively on the primary call-to-action, a **full-pill button at 100px radius** with white text. The orange is hot and confident but, because it is the only chroma on the page, it never tips into loud. Body type is **Inter at weight 400** — quiet, neutral, endlessly legible. Inter carries the running paragraphs and most UI labels without drawing attention to itself. The brand's signature typographic move is the **HMAlphaMono accent**: a monospaced face used on eyebrows, section kickers, device-spec captions ("3.7" CURVED"), and technical labels. The monospace does the heavy lifting on identity — it whispers "hardware, firmware, engineering" the way a serial-number plate does, and it pairs against Inter the way a spec sheet pairs against marketing copy. This is the core tension of the whole system: warm friendliness (the orange pill) against cool precision (the mono labels), arbitrated by a neutral white-and-Inter substrate. Page rhythm rotates two dominant surface modes. The **white editorial sections** are the default — hero, feature grids, comparison blocks, education chapters. Punctuating them are **full-bleed black chapters** (`#000000`) where the physical Ledger devices — Nano, Stax, Flex — are photographed against deep darkness, edge-lit so the brushed metal and glass catch the light. On black, text flips to white, the orange pill stays orange (the one constant across both modes), and secondary actions become white-outlined ghost pills. Inside the black chapters, near-invisible tiles (`rgba(255,255,255,0.02)`) hold device close-ups and spec callouts. Depth is restrained. Ledger does not decorate with shadows on its white surfaces; cards separate by a hairline (`#e0e0e0`) or a one-step jump from white to `#f5f5f5`. The drama is reserved for the product photography itself — the devices float on black with a soft contact shadow, and that is where elevation lives. Iconography is geometric and minimal, often line-weight, never skeuomorphic. The overall register is **premium-secure**: the visual restraint signals trust the way a private bank's lobby does, and the single hot CTA signals that the trustworthy thing is also easy to start. It is crypto without the casino. **Key Characteristics:** - Pure white canvas (`#ffffff`) with true-black ink (`#000000`) — maximum-contrast clinical calm - Single brand voltage: **Ledger Orange `#ff5300`**, rationed to the primary CTA almost exclusively - Primary CTA is a **full-pill at 100px radius**, white text on orange — the brand's most repeated gesture - Inter at weight 400 for body and UI — quiet, neutral, legible - **HMAlphaMono** accent for eyebrows, kickers, and device-spec captions — the "engineered hardware" signal - Two surface modes: white editorial default + full-bleed **black device chapters** (`#000000`) - Devices photographed on black, edge-lit, floating on near-invisible tiles (`rgba(255,255,255,0.02)`) - Secondary CTA is a white-bg, black-text, **black-outlined pill** (100px) — same shape, no chroma - Depth comes from product photography, not UI shadows — white cards separate by hairline - Crypto identity expressed through restraint, not neon — no gradients, no cyberpunk grids ## 2. Color Palette & Roles ### Primary - **Canvas** (`#ffffff`) [→ `bg`]: Pure white default page floor — every editorial section. - **Surface Dark** (`#000000`) [→ `bg-dark`]: Full-bleed device-photo chapters and footer ground. - **Ink** (`#000000`) [→ `text`]: Primary headlines and strong body text on white. - **Brand** (`#ff5300`) [→ `brand`]: Ledger Orange — the single voltage, reserved for the primary CTA. ### Brand & Dark - **Ledger Orange** (`#ff5300`) [→ `brand`]: rgb 255,83,0. White text on this pill is the "Discover the Ledger Wallet" gesture. Constant across white and black chapters. - **Brand Hover** (`#e64a00`) [→ `brand-hover`]: Darker orange on hover / press of the primary CTA. - **Brand Disabled** (`#ffb999`) [→ `brand-disabled`]: Desaturated orange used on disabled primary CTAs. - **Surface Dark Elevated** (`#141414`) [→ `surface-dark-elevated`]: The +1 step on black — cards and tiles inside device chapters. - **On-Dark Faint** (`rgba(255,255,255,0.02)`) [→ `on-dark-faint`]: Near-invisible tile fill inside black chapters; also the tertiary device-CTA background. ### Accent - **Mono Accent** (`#000000`) [→ `accent-mono`]: HMAlphaMono technical labels render in ink on white, white on black. The accent here is the *typeface*, not a hue — the mono is the technical signal. - **Eyebrow Tint** (`rgba(212,160,255,0.30)`) [→ `eyebrow-tint`]: A rare lilac highlight wash observed behind a hero kicker label. A single-surface accent, not a system token — use sparingly or omit. ### Interactive - **Primary CTA** = Brand `#ff5300`, white text, 100px pill - **Hover** — primary CTA darkens to `#e64a00`; secondary outline pill fills to `#f5f5f5`; text links gain underline - **Active / Pressed** — Brand Hover `#e64a00` on the CTA - **Disabled** — `#ffb999` background (primary) or `#999999` text - **Focus** — 3px orange ring `rgba(255,83,0,0.40)` on every interactive element - **Selected** — light `#ff5300` 8% tint background with ink text ### Neutral Scale `#ffffff` (Canvas) → `#f5f5f5` (Surface Soft) → `#ebebeb` (Surface Strong) → `#e0e0e0` (Border Hairline) → `#999999` (Text Subtle) → `#6b6b6b` (Text Muted) → `#3d3d3d` (Body) → `#141414` (Surface Dark Elevated) → `#000000` (Ink / Surface Dark). ### Surface & Borders - **Surface Soft** (`#f5f5f5`) [→ `surface-soft`]: Bright neutral elevation band between white sections; soft feature-card ground. - **Surface Strong** (`#ebebeb`) [→ `surface-strong`]: Secondary surface; status-pill background; hovered light cards. - **Surface Card** (`#ffffff`) [→ `surface-card`]: Default card surface — white separated by hairline. - **Border** (`#000000`) [→ `border`]: Full-strength black outline on the secondary CTA — a deliberate high-contrast gesture, not a soft divider. - **Border Hairline** (`#e0e0e0`) [→ `border-hairline`]: Default 1px divider and card edge on white. - **Border on Dark** (`rgba(255,255,255,0.12)`) [→ `border-on-dark`]: Divider inside black chapters. ### Shadow Colors Ledger uses neutral black-tinted shadows at low opacity on white (`rgba(0,0,0,0.04–0.12)`), and a deeper shadow under devices on black (`rgba(0,0,0,0.50)`). There are no brand-tinted shadows except the focus ring. Most white cards carry no shadow at all — they rely on hairlines and surface steps. ### Semantic - **Up / Secured** (`#16a34a`) [→ `semantic-up`]: Success and "secured" confirmation states. - **Down / Error** (`#dc2626`) [→ `semantic-down`]: Error, warning, and "at risk" states. - **Info** = Ink `#000000` with mono label (no dedicated info hue) - Semantic colours appear as text, icon, or pill colour only — never as a CTA background, which stays orange. ## 3. Typography Rules ### Font Family - **Display / Accent** — `HMAlphaMono`, fallback `"SF Mono", ui-monospace, Menlo, monospace`. The signature monospace face, used on eyebrows, kickers, hero accents, and spec captions. - **Body** — `Inter`, fallback `system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`. Weight 400 default; 500/600 for emphasis and titles. - **Mono** — `HMAlphaMono` (shared with display), fallback `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. Used for device specs, dimensions, firmware versions, addresses. - **OpenType** — Inter runs with default features for prose; mono surfaces benefit from `tnum` for aligned spec columns. The mono's fixed advance width is itself the feature — it forces the "engineered" grid. ### Hierarchy | Role | Font | Size | Weight | Line Height | Tracking | Notes | |------|------|-----:|-------:|------------:|---------:|-------| | display-hero | HMAlphaMono | 80 | 700 | 1.00 | -0.03em | Brand-anchor hero on landing pages | | display-lg | HMAlphaMono | 56 | 700 | 1.05 | -0.02em | Major chapter heads, product reveals | | h1 | HMAlphaMono | 40 | 700 | 1.10 | -0.018em | Page title / primary section head | | h2 | HMAlphaMono | 32 | 600 | 1.20 | -0.012em | Section heads | | h3 | HMAlphaMono | 24 | 600 | 1.25 | -0.005em | Sub-section heads, card titles (mono) | | h4 | Inter | 20 | 600 | 1.30 | 0 | Card titles, feature labels (drops to Inter) | | body-lg | Inter | 18 | 400 | 1.55 | 0 | Lead paragraphs, hero sub-copy | | body | Inter | 16 | 400 | 1.55 | 0 | Default running text | | body-strong | Inter | 16 | 600 | 1.55 | 0 | Inline emphasis in body | | body-sm | Inter | 14 | 400 | 1.50 | 0 | Secondary body, footer copy | | label | Inter | 13 | 500 | 1.40 | 0 | UI labels, nav links | | eyebrow | HMAlphaMono | 14 | 500 | 1.40 | 0.04em | Section kickers above heads — the mono signal | | spec-mono | HMAlphaMono | 13 | 500 | 1.40 | 0.02em | Device dimensions, firmware, technical specs | | caption | Inter | 12 | 500 | 1.40 | 0.02em | Meta labels, fine print, table headers | | button | Inter | 16 | 500 | 1.15 | 0 | All CTAs | ### Principles - **Two-voice system** — HMAlphaMono for headlines/eyebrows/specs (the engineered voice) and Inter for body/UI (the human voice). The contrast between them is the brand. - **Mono on display, sans on body** — display-hero through h3 are mono; h4 and below switch to Inter. The handoff happens at the 24→20px boundary. - **Tight negative tracking on mono display** (-0.03em to -0.005em) — monospace runs wide by nature, so large heads pull letters back together for density. - **Positive tracking on mono labels** (+0.02em to +0.04em) — small eyebrows and specs open up slightly so the monospace reads as a "stamped" technical label. - **Inter stays at 400** for prose — no bombastic bold body; emphasis is 600, sparingly. - **Specs always mono** — every dimension, weight, screen size, and firmware version uses HMAlphaMono so they align like a datasheet. - **No uppercase shouting** — eyebrows may use a mono-stamp look but stay sentence-or-title case; uppercase appears only on the smallest caption tags. - **Substitutes**: Space Mono, IBM Plex Mono, or JetBrains Mono approximate HMAlphaMono; Inter is itself open-source and needs no substitute. ## 4. Component Stylings ### Buttons **`button-primary`** — The primary CTA. Background **Ledger Orange `#ff5300`**, white text, 16px × 32px padding, ~56px height, **100px full-pill radius**, Inter 500. Hover → `#e64a00`. Disabled → `#ffb999`. This is the single most repeated gesture in the system ("Discover the Ledger Wallet"). The pill shape plus the hot orange is the brand's whole "start here" energy — it stays orange on both white and black chapters. **`button-secondary`** (light) — On white surfaces. Background `#ffffff`, **black text**, **1px black `#000000` border**, 100px pill, matched 56px height. The full-strength black outline (not a soft gray) is a deliberate high-contrast choice — same pill silhouette as the primary, zero chroma. Hover → fills to `#f5f5f5`. Used as the "Compare Ledger signers" companion to the orange primary. **`button-secondary-dark`** (ghost on black) — Inside black device chapters. Transparent background, **white text**, **1px white border**, 100px pill, 56px height. The dark-mode twin of the light secondary. **`button-tertiary-text`** — Inline text-link button. Transparent background, ink text on white (white on black), Inter 500, no underline by default; underline on hover. Used for "Learn more" / "See specs" affordances. ### Cards **`card`** — Default white card. Background `#ffffff`, 1px `#e0e0e0` hairline border, 12px (`lg`) radius, 24px padding. Holds icon + h4 title (Inter 600) + body. No shadow at rest; subtle `rgba(0,0,0,0.08) 0 8px 24px -6px` on hover for interactive cards. **`card-dark`** — Card inside black chapters. Background `#141414`, white text, 12px radius, 24px padding. Used for spec callouts and feature tiles against the device photography. **`card-feature`** — Soft-elevation explainer card. Background `#f5f5f5`, 12px radius, 32px padding. Icon top, h4 title, 1–2 line body. The surface step provides the separation; no border needed. **`device-tile-dark`** — Near-invisible product tile inside black chapters. Background `rgba(255,255,255,0.02)`, white text, **0 radius** (square edges — the device photography is the focus, not the container). Holds an edge-lit device close-up plus a mono spec caption. ### Badges / Tags / Pills **`badge-pill`** — Status / category pill. Background `#ebebeb`, ink text, 100px radius, 6px × 12px padding, caption type. For "New", "Best seller", "Bluetooth". **`badge-mono`** — Spec/technical tag. Transparent background, ink text, 1px `#e0e0e0` border, 4px (`sm`) radius, 4px × 8px padding, HMAlphaMono spec type. Used for "3.7" CURVED", firmware versions, supported-coin counts — the square-ish corner + mono reads as a stamped datasheet tag, distinct from the friendly status pill. ### Inputs / Forms **`input-text`** — Standard text input. Background white, 1px `#e0e0e0` border, 8px (`md`) radius, 12px × 16px padding, 48px height, Inter 400. Focus → 3px orange ring `rgba(255,83,0,0.40)` and border tightens to `#000000`. Placeholder in `#999999`. **`input-mono`** — Address / recovery-phrase field. Same shell, but value renders in HMAlphaMono with `tnum`, so long hex strings and seed words align on a fixed grid. ### Navigation **`top-nav-light`** — 64px tall, `#ffffff` background, 1px bottom hairline `#e0e0e0`. Ledger wordmark left, primary nav (Products, Discover, Security, Support) centre/left, right cluster (cart, account, primary orange "Buy now" pill). Nav links in Inter 500 / 13–14px. **`top-nav-dark`** — `#000000` background, white menu items. Used at the top of full-bleed black device chapters; the orange CTA persists. **`footer-dark`** — Dark footer closing every page. Background `#000000`, `#a3a3a3` link colour, 64px vertical padding. Multi-column link list (Products, Learn, Company, Support, Legal) plus a mono build/version stamp at the very bottom. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Tokens**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96. - **Section padding (vertical)**: 96px on marketing — generous, premium breathing room. - **Card internal padding**: 24px (default), 32px (feature). - **Gutters**: 32px between cards in 3-up grids; 24px in denser 4-up spec grids. ### Grid & Container - **Max content width**: ~1280px centred. - **Prose width**: ~720px for running editorial copy — narrow measure keeps Inter readable. - **Editorial body**: 12-column grid with 24–32px gutters. - **Hero split**: copy on one side (5–6 cols), edge-lit device render on the other (6–7 cols). - **Black chapters** often go full-bleed edge-to-edge so the device photography bleeds past the content container. ### Whitespace Philosophy Ledger leans **airy and premium**. Long white sections breathe at 96px section padding with a narrow 720px prose measure. The restraint is intentional — white space is how a security brand signals "we have nothing to clutter or hide." Density appears only in spec grids and comparison tables, where the mono type does the compression. ### Section Cadence White hero → white feature grid → **full-bleed black device chapter** → white education/comparison → black product chapter → **dark footer**. The black chapters are the dramatic punctuation; they appear 1–3 times per page wherever the physical hardware deserves a stage. White is the connective tissue; black is the spotlight. ## 6. Shapes & Radius Scale - **Micro** 2 — tiny inline chips (rare) - **Standard** 4 (`sm`) — mono spec tags, the stamped-datasheet corner - **Comfortable** 8 (`md`) — inputs, small interactive controls - **Relaxed** 12 (`lg`) — cards, feature tiles, the default container radius - **Large** 16 (`xl`) — large media cards, hero panels - **Pill** 100 — **every CTA and status pill** — the friendliness signal that offsets the hard black/white - **Full** 9999 — circular avatars, icon buttons, dots Two radii carry the brand: **0 (square)** for the device tiles inside black chapters — the hardware photography wants square edges, not soft containers — and **100 (pill)** for every CTA. The pill at 100px (rather than 9999 stadium) keeps a hint of straight horizontal edge on wide buttons that reads "considered," matching the engineered register. The contrast between square device tiles and pill CTAs is part of the system's voice: square for the *object*, pill for the *action*. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 Flat | No shadow, no border | White body sections, black chapters, footer | | 1 Hairline | 1px `#e0e0e0` | Inputs, default cards, dividers on white | | 2 Surface step | `#ffffff` → `#f5f5f5` ground | Soft elevation bands, feature cards | | 3 Dark tile | `#141414` / `rgba(255,255,255,0.02)` on black | Cards & device tiles inside black chapters | | 4 Subtle drop | `rgba(0,0,0,0.08) 0 8px 24px -6px` | Hovered interactive cards | | 5 Elevated | `rgba(0,0,0,0.12) 0 24px 48px -12px` | Floating menus, modal dialogs | | 6 Device float | `rgba(0,0,0,0.50) 0 24px 64px -16px` | Product render contact shadow on black | | Focus ring | `0 0 0 3px rgba(255,83,0,0.40)` | All keyboard focus | **Shadow Philosophy**: On white, depth is minimal — hairlines and surface steps do the work, with a single soft drop on hover. The real elevation drama is reserved for the **product photography**: devices float on black with a deep `rgba(0,0,0,0.50)` contact shadow, the only place the system commits to dramatic depth. No brand-tinted shadows anywhere except the orange focus ring. The discipline mirrors the colour discipline — depth, like chroma, is rationed. ## 8. Interaction & Motion - **Easing standard** — `cubic-bezier(0.4, 0, 0.2, 1)` for hover transitions, fades, and most UI motion - **Easing emphasized** — `cubic-bezier(0.2, 0, 0, 1)` for device-reveal animations and chapter scroll-ins - **Durations** — fast 150ms (hover/colour), standard 240ms (cards, fades), slow 320ms (chapter transitions, device rotations) - **Primary CTA hover** — orange darkens `#ff5300` → `#e64a00` at 150ms; no scale jump - **Secondary CTA hover** — light outline pill fills to `#f5f5f5`; dark ghost pill fills to `rgba(255,255,255,0.06)` - **Card hover** — interactive cards gain `rgba(0,0,0,0.08) 0 8px 24px -6px` and lift ~2px at 240ms - **Device motion** — black chapters often feature a slow scroll-driven rotation or parallax of the hardware render; emphasized easing, 320ms+ loops - **Text links** — gain underline on hover, 150ms - **Page / chapter transition** — white-to-black chapters fade and cross-dissolve the background at 320ms with emphasized easing - **Reduced motion** — `prefers-reduced-motion: reduce` freezes device rotations and parallax to a static frame and collapses hover lifts to colour-only changes ## 9. Accessibility & A11y - **Contrast**: Ink `#000000` on white `#ffffff` = **21.0:1** (AAA — maximum possible). Body `#3d3d3d` on white = **10.8:1** (AAA). White on Ledger Orange `#ff5300` = **3.6:1** — this passes **AA for large text** (≥18px / ≥14px bold) but **falls short of AA 4.5:1 for small body text**. Because the orange is used on CTA buttons with ≥16px/500 (large-text territory) this is compliant for its actual use, but never set small white body copy on orange. For belt-and-braces compliance, the CTA label can be bumped to 18px or the orange darkened to `#e64a00` (≈4.0:1) — still short of 4.5:1, so prefer the large-text size lane. - **Black-on-orange alternative**: Black text on `#ff5300` = **5.9:1** (AA for all text) — available if a higher-contrast CTA is required, though the brand ships white-on-orange. - **Focus indicator**: 3px solid `rgba(255,83,0,0.40)` ring on every interactive element; input borders tighten to `#000000` on focus. The orange ring is visible against both white and black grounds. - **ARIA patterns**: Comparison tables use `role="table"` with proper header scope; the spec datasheet uses a definition-list pattern. Device carousels use `role="region"` with `aria-roledescription="carousel"` and accessible prev/next controls. Cart/account menus use `role="menu"`. - **Keyboard nav**: Top nav supports left/right arrow traversal; mega-menu panels are reachable and dismissible with Escape. All CTAs are real buttons/links, focusable and Enter/Space-activatable. - **Screen reader hints**: Decorative device imagery is `aria-hidden`; spec values carry visible mono text that doubles as the label. Orange CTA colour is never the sole carrier of meaning — the verb ("Discover", "Buy") states intent. Semantic up/down states pair colour with an icon and text ("Secured" / "At risk"). - **Reduced motion**: Honoured — see §8. ## 10. Responsive Behavior | Breakpoint | Width | Key Changes | |------------|------:|-------------| | Mobile | < 640 | Top nav → hamburger sheet; display-hero 80 → 40px; hero splits stack (copy then device); CTAs full-width pills; spec grids collapse to single column | | Tablet | 640–1024 | Nav condenses; hero device shrinks beside copy; feature grids 2-up; comparison tables gain horizontal scroll | | Desktop | 1024–1280| Full nav + mega-menu; hero split 5/7; feature grids 3-up; black chapters full-bleed | | Wide | > 1280 | More margin around the 1280px container; device renders enlarge; spec grids 4-up | **Touch Targets**: Primary and secondary CTA pills render at ≥48px height (56px on marketing) — comfortably above the 44px minimum. Mobile CTAs go full-width. Nav and menu items maintain ≥44px tap height. **Collapsing Strategy**: Top nav collapses to a hamburger opening a full-screen sheet with the orange "Buy now" CTA pinned. Hero device-and-copy splits stack vertically (copy first). Comparison/spec tables become horizontally scrollable on mobile rather than reflowing, to preserve the datasheet alignment. Footer columns stack to a single accordion column. Black device chapters keep their full-bleed treatment but reduce vertical padding. **Image Behavior**: Edge-lit device renders are high-resolution responsive PNG/WebP, art-directed to crop tighter on mobile so the hardware stays heroic at small sizes. The contact shadow scales with the device. ## 11. Content & Voice - **Tone** — confident, precise, reassuring. Security is framed as empowerment, not fear: "own your crypto" rather than "don't get hacked." Avoids both crypto-bro hype and FUD. - **Microcopy** — verbs are direct and ownership-anchored: "Discover the Ledger Wallet", "Buy now", "Compare signers", "Set up", "Secure". Specs are stated plainly in mono ("3.7" CURVED", "Bluetooth", "5,500+ coins"). - **CTA verbs** — "Discover the Ledger Wallet" (primary marketing), "Buy now" (commerce), "Compare Ledger signers" (secondary), "Learn more" (education). The orange always carries the single most-wanted action on the page. - **Empty states** — calm and instructive. A wallet with no assets reads "Your assets will appear here once you receive them," paired with a single secure-receive CTA. - **Error messages** — clear and remediable, never alarmist: "This address isn't valid — double-check and try again." Recovery-critical warnings use the red semantic and an explicit consequence. - **Spec/technical copy** — always HMAlphaMono, datasheet-precise, locale-aware units. The mono voice signals "this is the engineered truth," distinct from the marketing prose in Inter. ## 12. Dark Mode & Theming Ledger is **dual-mode by intent** — the dark surfaces are a functional design device, not a user toggle. White editorial sections are punctuated by full-bleed **black device chapters** (`#000000`), and the footer is always dark. The shared tokens — **Ledger Orange `#ff5300`**, the orange focus ring, and semantic up/down — thread through both modes unchanged; the orange CTA in particular is the one constant that reads identically on white and black. The black-chapter mode uses: - `bg-dark` `#000000` (canvas) - `surface-dark-elevated` `#141414` (cards/tiles) and `rgba(255,255,255,0.02)` (faint device tiles) - `on-dark` `#ffffff` (text), `on-dark-soft` `#a3a3a3` (muted text) - `border-on-dark` `rgba(255,255,255,0.12)` (dividers) - Secondary CTA becomes a white-outlined ghost pill; primary CTA stays orange A user-preference dark theme for the **Ledger Live product app** exists but is out of scope for this marketing-surface document. When adapting components, flip text and surfaces but **never recolour the orange CTA** — its constancy across modes is load-bearing for the brand. ## 13. Lineage & Influences Ledger's design language sits at the intersection of **premium consumer-hardware marketing** (the Apple/Teenage Engineering school of photographing an object as a hero on a controlled ground) and **institutional-finance restraint** (white canvas, single accent, high typographic discipline). The decision to render the entire identity in black-and-white and then ration one hot orange to the CTA is a direct descendant of the Swiss/International-Typographic tradition — neutral grid, one accent, content first — fused with the product-photography theatre that consumer electronics brands use to make a small device feel monumental. The HMAlphaMono accent is the crypto-native twist: monospace reads as firmware, serial numbers, and on-chain addresses, so it grounds the premium veneer in "this is real engineered security hardware," distancing Ledger from the neon-and-gradient crypto-casino aesthetic of its noisier peers. What it borrows: the **single-accent-on-white** discipline shared by Coinbase, Stripe, and Wise; the **full-pill CTA at 100px** that signals consumer-friendly-but-considered; and the **dark-chapter product theatre** that Apple and Linear use to stage hardware and UI respectively. What it rejects: gradients, glassmorphism, neon palettes, cyberpunk grids, illustration-heavy heroes, and fear-based security messaging. The orange is warm precisely to counteract the coldness that "hardware security" could otherwise project. Influences: - **Apple** — Hero product photography on controlled grounds, premium restraint, spec-sheet typography. https://www.apple.com - **Teenage Engineering** — Engineered-object-as-hero, monospace technical labelling, minimalist hardware presentation. https://teenage.engineering - **Coinbase** — Single brand accent on a pure white canvas, full-pill CTAs, crypto-without-the-casino register. https://www.coinbase.com - **Stripe** — Disciplined single-accent system, dark-chapter punctuation in long-scroll marketing. https://stripe.com - **Inter (Rasmus Andersson)** — The neutral, highly legible sans that carries the human voice of the system. https://rsms.me/inter ## 14. Do's and Don'ts ### Do - Reserve `#ff5300` for the primary CTA and a few signature accents — its scarcity is what makes it carry the brand - Keep the primary CTA a full-pill at 100px radius, white text on orange — the most repeated gesture in the system - Use HMAlphaMono for eyebrows, headlines, and all device specs — the mono is the "engineered hardware" signal - Run body copy in Inter 400 on a true-black `#000000` ink — maximum legible calm - Stage physical devices on full-bleed black `#000000` chapters with a deep contact shadow — that's where depth lives - Use square (0-radius) tiles for device photography and pills (100px) for actions — square object, pill action - Keep the secondary CTA a black-outlined white pill — same silhouette as primary, zero chroma - Anchor sections at 96px vertical padding for a premium, airy rhythm - Align all specs on a mono grid with `tnum` so they read like a datasheet - Close every page with the dark footer (`#000000`) plus a mono build stamp ### Don't - Don't introduce a second brand colour or use the orange decoratively — one voltage only - Don't set small white body text on the orange pill — it's only AA at large-text sizes (3.6:1); keep CTA labels ≥16px/500 - Don't reach for neon, gradients, or cyberpunk grids — Ledger's crypto identity is restraint, not noise - Don't use rectangle (6–8px) CTAs — the 100px pill is mandatory - Don't put rounded soft containers around device photos — square tiles keep the hardware heroic - Don't soften the white canvas to cream or the ink to gray — Ledger commits to pure `#ffffff` / `#000000` - Don't use HMAlphaMono for long prose — only for heads, eyebrows, and specs - Don't add brand-tinted shadows — the only orange shadow is the focus ring - Don't frame security with fear ("get hacked") — frame it as ownership ("own your crypto") - Don't recolour the orange CTA in dark chapters — its constancy across modes is load-bearing ## 15. Agent Prompt Guide ### Quick Color Reference - Brand: Ledger Orange `#ff5300` (rgb 255,83,0) - Brand hover: `#e64a00` - Canvas: `#ffffff` - Surface dark: `#000000` - Surface dark elevated: `#141414` - Text ink: `#000000` - Body: `#3d3d3d` - Border hairline: `#e0e0e0` - On-brand text: `#ffffff` - Focus ring: `rgba(255,83,0,0.40)` ### Example Component Prompts - "Create a Ledger hero: pure white `#ffffff` background, an HMAlphaMono eyebrow in `#000000` with +0.04em tracking, an 80px HMAlphaMono weight-700 headline with -0.03em tracking in `#000000`, body-lg sub in `#3d3d3d`, and a primary full-pill CTA `#ff5300` with white text at 100px radius / 16×32 padding labelled 'Discover the Ledger Wallet', plus a secondary white pill with black `#000000` 1px outline labelled 'Compare signers'. Place an edge-lit device render on the right." - "Design a full-bleed black device chapter: `#000000` background, 96px section padding. White HMAlphaMono 56px headline, `#a3a3a3` sub-copy, the orange `#ff5300` pill CTA persisting unchanged, and a near-invisible `rgba(255,255,255,0.02)` square tile (0 radius) holding an edge-lit Ledger device with a deep `rgba(0,0,0,0.50)` contact shadow and an HMAlphaMono spec caption '3.7" CURVED'." - "Build a spec/comparison card: white `#ffffff` bg, 1px `#e0e0e0` hairline border, 12px radius, 24px padding. Inter 600 20px title, then a stack of mono spec tags — transparent bg, 1px `#e0e0e0` border, 4px radius, HMAlphaMono 13px — for 'Bluetooth', '5,500+ coins', '3.7\" CURVED'." - "Compose a 3-up feature grid: `#f5f5f5` soft cards, 12px radius, 32px padding, 32px gutters. Each card: line-weight icon, Inter 600 h4 title `#000000`, body `#3d3d3d`." - "Make a primary CTA: full-pill 100px radius, `#ff5300` background, white `#ffffff` Inter-500 16px label, 16×32 padding; hover darkens to `#e64a00`; focus shows a 3px `rgba(255,83,0,0.40)` ring." ### Iteration Guide 1. Start with pure white `#ffffff` and true-black `#000000` — no cream, no gray-softening. Maximum contrast is the base. 2. Ration the orange. If `#ff5300` appears more than once or twice per viewport, you've broken the brand — pull it back to the single primary CTA. 3. Make the primary CTA a full-pill at 100px with white text — never a rectangle, never stadium 9999. 4. Split the type into two voices: HMAlphaMono for heads/eyebrows/specs, Inter 400 for body. The contrast between them is the identity. 5. Stage hardware on full-bleed black chapters with a deep contact shadow — that's the only place to be dramatic with depth. 6. Use square (0-radius) tiles for device photos and pills for actions — the square-object / pill-action contrast is intentional. 7. Keep white surfaces flat — hairlines and `#ffffff`→`#f5f5f5` steps for depth, not shadows. 8. Watch the orange contrast: white-on-orange is large-text-only (3.6:1), so keep CTA labels ≥16px/500 and never set small copy on the orange. --- *Theme-toggle audit: score=0, signals=[none]*