---
version: alpha
name: "Ledger"
website: "https://www.ledger.com"
description: >-
  A hardware crypto wallet brand whose marketing site flips between a jet-black hero surface and a pure-white below-fold canvas — a binary black-white alternation with no gray middle ground. Inter carries every text tier from 50px display at weight 600 down to 13px caption at weight 400, with HMAlphaMono appearing for uppercase product-label chips. The only chromatic color on the page is a soft lavender-purple (#d4a0ff) used exclusively for feature highlight fills — eight occurrences, all backgrounds. The primary CTA fills with a vivid orange-red (#ff5300), the single temperature break from the otherwise achromatic system.

seo:
  title: "Ledger Design System for React — black and white, Inter, 16 components"
  metaDescription: "Ledger's marketing system runs pure black and white with a single vivid orange CTA and lavender feature highlights. Inter at weight 600 for display, HMAlphaMono for category labels. 15 colors, 16 components for React and Next.js."
  highlights:
    - "Binary black-white alternation — hero sections are jet black with white text; body sections are pure white with black text; no gray canvas exists"
    - "Single orange CTA — the primary button fills with vivid orange-red (#ff5300) on an otherwise achromatic page, the only warm-temperature accent"
    - "HMAlphaMono for category chips — uppercase monospace labels at 12–14px sit over section headings, creating a technical-editorial split between display and annotation"
    - "Lavender highlight fills — a soft purple (#d4a0ff) appears 8 times as a feature-tile background, the only hue besides the CTA orange on the marketing surface"
    - "Weight 600 display — Inter at 50px / weight 600 with -2.25px tracking is the heaviest typographic moment; no 700 or 800 tier"
  tags:
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Ledger's homepage is built on a premise most crypto brands abandon: pure restraint. The hero is jet black (#000000) with a white Inter headline at 50px and weight 600. No gradient, no illustration, no abstract art — just black canvas, white text, and a vivid orange-red pill CTA centered beneath. Below the fold, the page inverts to pure white with black Inter body text and gray secondary labels. Then it inverts again for the product section (black), then back to white for testimonials and footer. The page runs a strict two-surface alternation — dark then light then dark then light — with no intermediate gray canvas between them. Where Phantom fills its hero with abstract ribbon art and Coinbase lays down cobalt blue, Ledger commits to monochrome contrast and lets the hardware product photography carry every visual interest.

    The DESIGN.md packages the system for React and AI tools. Inside: 15 color tokens dominated by white (frequency 1066) and black (frequency 612), with mid-grays for muted text. The single chromatic exception is a soft lavender (#d4a0ff) used as background fills in 6 feature highlight tiles and one card accent — 8 total occurrences. The orange-red CTA (#ff5300) appears once. Two typefaces share the system: Inter for everything spoken and HMAlphaMono for everything labeled — category chips, small-caps product tags, section eyebrow text. Display sits at 50px / 600 with tight -2.25px tracking; body at 16px / 400; mono labels at 12px / 500 in uppercase.

    Feed this spec to an AI tool and it will reproduce Ledger's specific choices: strict black-white band alternation (no charcoal, no off-white), a single saturated warm CTA dropped onto the achromatic system, Inter at weight 600 for display (not 700), and HMAlphaMono uppercase for category chips. The move worth borrowing broadly is the band alternation — it creates page rhythm without any surface-level decoration, the page's sections read as structurally distinct without a single background-color decision being made.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.ledger.com"
      title: "Ledger — official site"
      description: "Ledger's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Ledger's primary brand color?"
      answer: "Ledger's marketing system is achromatic: the dominant colors are pure white (frequency 1066) and pure black (frequency 612), used in strict alternating bands across the page. The single warm-temperature accent is a vivid orange-red (#ff5300) used exclusively as the primary CTA button background — one instance captured on the marketing surface. The only other chromatic color is a soft lavender-purple (#d4a0ff), appearing 8 times as background fills in feature-highlight tiles. Neither the orange nor the lavender maps to what most brands would call a 'primary color'; the system is fundamentally achromatic with two sparse chromatic exceptions for CTA and feature accents."
    - id: "typography"
      title: "What typefaces does Ledger use, and what are the substitutes?"
      answer: "Ledger runs two typefaces: Inter for every spoken surface (display, heading, body, button, nav) and HMAlphaMono for every annotated surface (category chips, uppercase eyebrow labels, product-tag spans). Inter handles 52-count small caption text at 13px / 400 through to 8-count display at 50px / 600; the display weight tops out at 600 with -2.25px tracking. HMAlphaMono appears 8 times at 12–14px / 500 weight in uppercase with 0.36–0.42px tracking. Inter is already open-source and a direct substitute for itself. For HMAlphaMono (a proprietary mono face), JetBrains Mono or IBM Plex Mono in uppercase with equivalent tracking transfer cleanly."
    - id: "black-white-bands"
      title: "How does Ledger's black-white banding work?"
      answer: "The page alternates between two surfaces with no intermediate tone: jet black (#000000) and pure white (#ffffff). The above-fold hero is black; the first below-fold section (product comparison) is white; the hardware-device section is black again; the testimonial and 'Ledger Live' section returns to white. Each band switch is a hard cut — no gradient, no divider illustration, no transitional element. The alternation is structural rather than decorative: it makes each section feel distinctly separated without any background artwork. Gray tones appear only as text color within sections (muted body copy at #949494, secondary labels at #525252), never as canvas surfaces."
    - id: "cta-color"
      title: "Why is Ledger's CTA orange when the brand is black and white?"
      answer: "The vivid orange-red (#ff5300) CTA is a deliberate temperature break against the achromatic system. On the black hero canvas, warm orange reads at maximum contrast against the dark surface — it is simultaneously the warmest and the most saturated element on the page. Most achromatic brands use a saturated blue (Coinbase, Kraken) or a neutral white as their CTA on dark backgrounds; Ledger's choice of orange signals energy and urgency without departing from the 'security hardware' register. The orange appears once in the extraction — on the button labeled 'Discover the Ledger Wallet app.' Any additional orange usage would diminish this singular impact."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a hardware or security product site?"
      answer: "Yes — the file is structured for Claude, Cursor, and similar AI tools. Feed it the spec and it will reproduce Ledger's core system: strict black-white band alternation (no surface in between), a single vivid orange-red CTA pill, Inter at weight 600 for display with tight -2.25px tracking, HMAlphaMono uppercase for category labels, and a soft lavender (#d4a0ff) for feature-tile background fills. Token references resolve cleanly — {colors.canvas} for dark sections, {colors.ink} for text on white, {colors.cta-orange} for the primary button. The band-alternation pattern is the most transferable move: it works for any brand where surface simplicity and product photography need to share equal billing."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  cta-orange: "#ff5300"
  accent-lavender: "#d4a0ff"
  accent-lavender-light: "#f2e2ff"
  ink: "#ffffff"
  ink-on-light: "#000000"
  ink-muted: "#949494"
  ink-soft: "#525252"
  ink-medium: "#6a6a6a"
  ink-dark: "#262626"
  canvas: "#000000"
  surface-1: "#ffffff"
  hairline: "#e5e5e5"
  hairline-dark: "#a3a3a3"
  shadow: "#000000"
  deep-violet: "#6a3794"

typography:
  display-xl:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 50px
    fontWeight: 600
    lineHeight: 56px
    letterSpacing: "-2.25px"
  display-lg:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 38px
    fontWeight: 600
    lineHeight: 42px
    letterSpacing: "-1.71px"
  heading-md:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: "-1.08px"
  heading-sm:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 25.2px
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0
  label-md:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 19.6px
    letterSpacing: 0
  button-md:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, \"Times New Roman\", arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  mono-label:
    fontFamily: "HMAlphaMono, \"Open sans\", arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.36px"
  mono-label-lg:
    fontFamily: "HMAlphaMono, \"Open sans\", arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: "0.42px"

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  pill: "100px"
  full: "100%"

spacing:
  xs: "8px"
  sm: "16px"
  md: "20px"
  base: "24px"
  lg: "40px"
  xl: "80px"
  2xl: "100px"
  section: "40px 40px 100px"

components:
  button-primary:
    backgroundColor: "{colors.cta-orange}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "13px 24px"
    height: "50px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "12px 20px"
    height: "46px"
    borderColor: "{colors.hairline-dark}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.nav-link}"
    padding: "0px 24px"
    height: "56px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.display-xl}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  mono-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-label}"
  card-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.hairline-dark}"
  card-light:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  card-lavender:
    backgroundColor: "{colors.accent-lavender}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "13px 13px 13px 30px"
    height: "52px"
    borderColor: "{colors.ink-soft}"
  category-chip:
    backgroundColor: "{colors.accent-lavender}"
    textColor: "{colors.deep-violet}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
    height: "24px"
  product-tile:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "40px 24px"
---

## Overview

Ledger's marketing site runs the most binary chromatic system in the hardware-security category. **Security Through Contrast.** The page alternates between jet black and pure white in strict bands — no gray middle-ground canvas, no charcoal, no off-white tint. Where Phantom uses a lavender-washed surface and Spline uses a near-black charcoal, Ledger commits to absolute values: #000000 dark sections and #ffffff light sections, cut hard against each other. The effect is a claim of certainty — a brand that deals in absolute protection uses absolute tones.

The chromatic restraint is almost total. The only warm-temperature color on the page is the primary CTA button in vivid orange-red (#ff5300) — one instance, one button, one temperature break from the achromatic system. A second chromatic note is soft lavender (#d4a0ff) used as background fills in 6 feature-highlight tiles. Everything else — 1066 white occurrences, 612 black occurrences, 181 gray occurrences — is grayscale.

Typography splits between Inter (display through body) and HMAlphaMono (category chips and uppercase eyebrow labels). Display sits at 50px / weight 600 with -2.25px tracking — tight, authoritative, but measured (not 700+). The mono voice appears for product category labels ("SECURITY CHIP", "HARDWARE WALLET") in uppercase 12–14px — the technical annotation layer over the editorial display.

**Key Characteristics:**
- Strict jet-black / pure-white band alternation; no intermediate canvas tone anywhere on the page.
- Single vivid orange-red (#ff5300) CTA — one occurrence — as the only warm-temperature accent on an achromatic system.
- Soft lavender (#d4a0ff) fills 6 feature-highlight tiles — 8 total occurrences; the only hue besides the orange CTA.
- Inter at weight 600 for display (50px, -2.25px tracking); weight 400 for body. No 700+ tier.
- HMAlphaMono in uppercase for category chips and eyebrow labels — technical annotation distinct from editorial display.
- Near-total pill radius for buttons and email inputs (100px); 4–8px for cards; no mid-range 12–24px tier.
- Hardware product photography (Nano S, Nano X, Stax, Flex devices) carries every visual accent — no illustration or abstract art.
- Gray muted text (#949494 — 181 occurrences) serves the secondary/tertiary text role across both dark and light sections.

## Colors

### Brand

- **CTA Orange** (`{colors.cta-orange}` — #ff5300): frequency 1. Used as background only — the single primary CTA button fill. The only warm-temperature accent on the page. A vivid orange-red that reads with maximum temperature contrast against both the black hero and the white body canvas.
- **Accent Lavender** (`{colors.accent-lavender}` — #d4a0ff): frequency 8. Used as background (6), border (1), text (1). The only hue beside the orange on the marketing surface — fills feature-highlight tile backgrounds and a single category-chip border.
- **Accent Lavender Light** (`{colors.accent-lavender-light}` — #f2e2ff): frequency 2. A paler lavender used as background in secondary feature tiles.
- **Deep Violet** (`{colors.deep-violet}` — #6a3794): frequency 4. Used as text (2) and border (2) — appears as the text color inside lavender category chips, creating a tonal pairing.

### Canvas & Surfaces

- **Canvas** (`{colors.canvas}` — #000000): frequency 612. Used as text (276), background (17), border (274), shadow (10), gradient (35). The dark-band surface — pure black, the floor of all dark sections. Wired as --wp--preset--color--black.
- **Surface-1** (`{colors.surface-1}` — #ffffff): frequency 1066. Used as text (507), background (52), border (496), gradient (11). The light-band surface — pure white for all white-band sections. Wired as --wp--preset--color--white.

### Text

- **Ink** (`{colors.ink}` — #ffffff): frequency 507 as text — the dominant text color on dark-band sections.
- **Ink On Light** (`{colors.ink-on-light}` — #000000): frequency 276 as text — the dominant text color on white-band sections.
- **Ink Muted** (`{colors.ink-muted}` — #949494): frequency 181. Used as text (91) and border (90) — the dominant muted-text tone across both surfaces. Secondary body copy, muted labels, caption rows.
- **Ink Soft** (`{colors.ink-soft}` — #525252): frequency 41. Used as text (14) and border (27) — slightly darker than ink-muted, used for input field borders and tertiary text.
- **Ink Medium** (`{colors.ink-medium}` — #6a6a6a): frequency 16. Used as text (8) and border (8) — a mid-gray text tone for less-prominent body elements.
- **Ink Dark** (`{colors.ink-dark}` — #262626): frequency 37. Used as text (18) and border (18) — near-black for text on light surfaces where pure black would feel too heavy.

### Hairlines

- **Hairline** (`{colors.hairline}` — #e5e5e5): frequency 22. Used as text (11) and border (11). Light card borders on the white-band sections.
- **Hairline Dark** (`{colors.hairline-dark}` — #a3a3a3): frequency 6. Used as text (3) and border (3). Card dividers and input-field borders where the standard hairline is too faint.

### Semantic

- **Shadow** (`{colors.shadow}` — #000000): frequency 10 as shadow ink — neutral black used for card drop shadows on the white-band sections.

## Typography

### Font Families

The system runs two voices: **Inter** for every spoken surface and **HMAlphaMono** for every annotated surface. The Inter stack includes "Times New Roman" and arial as fallbacks — an unusual pairing for a grotesk, suggesting the fallback declaration may be a CMS artifact rather than a deliberate typographic choice. HMAlphaMono is a proprietary mono face used for uppercase category labels.

The Inter / HMAlphaMono split divides labor cleanly: Inter speaks for the brand (headlines, body, buttons, nav); HMAlphaMono labels the product (categories, feature types, section eyebrows). The mono voice is uppercase-only and tiny (12–14px) — it reads as technical metadata rather than a display accent.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 50px | 600 | 56px | -2.25px | Hero h2 / section h2 ("Go beyond exchanges") |
| `{typography.display-lg}` | 38px | 600 | 42px | -1.71px | Sub-section display headings |
| `{typography.heading-md}` | 24px | 600 | 32px | -1.08px | Feature-tile headings, card titles |
| `{typography.heading-sm}` | 20px | 400 | 28px | 0 | Section sub-headings, pull-quote |
| `{typography.body-lg}` | 18px | 600 | 25.2px | 0 | Strong/bold inline text inside body |
| `{typography.body-md}` | 16px | 400 | 28px | 0 | Default body paragraphs |
| `{typography.body-sm}` | 13px | 400 | 19.5px | 0 | Captions, legal text, footnotes |
| `{typography.label-md}` | 14px | 500 | 19.6px | 0 | Medium label weight for secondary UI |
| `{typography.button-md}` | 16px | 400 | 24px | 0 | CTA button label |
| `{typography.nav-link}` | 16px | 400 | 24px | 0 | Top-nav link labels |
| `{typography.mono-label}` | 12px | 500 | 16px | 0.36px | Uppercase category chips, eyebrow labels |
| `{typography.mono-label-lg}` | 14px | 500 | 18px | 0.42px | Larger uppercase mono labels, h1 eyebrow |

### Principles

Display weight stops at 600, not 700+. The 50px / 600 / -2.25px combination at the top of the hierarchy delivers authority through tight tracking and substantial size — weight 600 is already more assertive than Cloudflare or Spline (both 500), but stops short of the aggressive 700+ that gaming or high-energy brands use. The gap between display weight (600) and body weight (400) creates clear visual hierarchy without requiring a bold tier.

The monospace uppercase labels sit at the opposite extreme from the display scale — small, tracked, functional. They carry no decorative weight; they are system annotations for feature categorization.

### Note on Font Substitutes

Inter is already open-source and freely available. For HMAlphaMono, **JetBrains Mono** or **IBM Plex Mono** in uppercase with 0.4em letter-spacing are the closest open-source substitutes. Preserve the uppercase rendering — the HMAlphaMono labels only work at uppercase; lowercase monospace would read as code rather than product taxonomy.

## Layout

### Spacing System

- **Base unit:** 8px (73 occurrences — the dominant padding value).
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.md}` 20px · `{spacing.base}` 24px · `{spacing.lg}` 40px · `{spacing.xl}` 80px · `{spacing.2xl}` 100px · `{spacing.section}` 40px top, 40px side, 100px bottom.
- **Card internal padding:** 24px on product tiles; 12–24px on content cards.
- **Top-nav padding:** 12px vertical, 24px horizontal.
- **Section rhythm:** 40px top / 100px bottom on dark sections; tighter on white sections.

### Grid & Container

- **Max content width:** ~1200px at desktop — the page is wide by marketing standards, accommodating 4-column product grids.
- **Hero band:** full-bleed black canvas, centered headline + body + CTA stack at ~700px max-width.
- **Product comparison section (white):** 4-column device grid showing Nano S, Nano X, Stax, and Flex side-by-side with price + rating beneath.
- **Feature grid:** 3-column card grid on the white surface; lavender feature tiles sit in alternating slots.
- **App section (dark):** full-bleed black with centered headline, app-store badge row, and feature-chip cluster.

### Rhythm

The band-alternation pattern creates rhythm without decoration. Each black band is large and sparse — one or two focal elements with generous vertical padding. Each white band is dense and informational — product grids, feature lists, comparison tables. The contrast in density between the two surface types is as important as the contrast in color.

## Elevation

The system uses **neutral drop shadows** on white-band cards and near-zero elevation on dark-band surfaces.

- **Flat (no shadow):** hero, dark sections, footer — surfaces on the black canvas have no shadow (the background is dark enough to eliminate any meaningful shadow contrast).
- **Soft shadow on white:** product tiles and content cards on the white surface use `rgba(0,0,0,*)` neutral drops — 10 shadow occurrences total. The depth is subtle; hairline borders (22 occurrences at `{colors.hairline}`) carry most of the card-delineation work.
- **No tinted shadows:** no lavender or warm-tinted shadow is used. All shadows are neutral black-alpha.

## Shapes

The radius scale is **binary**: pill for buttons and inputs, small-step for cards.

- `{rounded.none}` 0px — nav bar, hero section, band dividers.
- `{rounded.sm}` 4px (8 instances) — small card elements, chip backgrounds.
- `{rounded.md}` 8px (6 instances) — product-tile cards, content cards.
- `{rounded.pill}` 100px (9 instances) — primary CTA button, email newsletter input, secondary action buttons.
- `{rounded.full}` 100% (18 instances) — avatar circles, brand-logo circles in the testimonial strip, circular icon badges.

There is no 16px or 24px mid-range radius. Like Cloudflare, Ledger is binary: small-step (4–8px) for content surfaces, pill (100px) for interactive elements, circles for avatar/logo marks.

## Components

**`button-primary`** — Vivid orange-red `{colors.cta-orange}` fill, white `{colors.ink}` text, 100px pill radius, 13×24 padding, 50px height. "Discover the Ledger Wallet app" is the hero canonical instance. The only warm-temperature element on the page.

**`button-secondary`** — Transparent fill, `{colors.ink-on-light}` text, 1px `{colors.hairline-dark}` border, pill radius, 12×20 padding, 46px height. Used for secondary product-comparison CTAs.

**`top-nav`** — Black `{colors.canvas}` surface on the hero; switches to white on scroll-sticky states. 56px height, 12×24 padding. Ledger wordmark flush left, product nav links (Products, App, Enterprise, Support) centered, contact/cart right.

**`nav-link`** — Transparent, `{colors.ink-on-light}` text at `{typography.nav-link}` (16px / 400), 24px horizontal padding.

**`hero-heading`** — White `{colors.ink}` text, Inter 50px / 600, -2.25px tracking. "Go beyond exchanges and software wallets" is the canonical hero h2.

**`section-heading`** — `{colors.ink-on-light}` text on white-band sections, same `{typography.display-xl}` token (50px / 600 / -2.25px).

**`body-paragraph`** — `{colors.ink-on-light}` at `{typography.body-md}` (16px / 400 / 28px line-height). The default body paragraph — generous line-height for hardware-comparison readability.

**`body-paragraph-muted`** — `{colors.ink-muted}` (#949494) at `{typography.body-sm}` — secondary captions, legal footnotes.

**`mono-eyebrow`** — HMAlphaMono uppercase at `{typography.mono-label}` (12px / 500 / 0.36px tracking), in `{colors.ink-muted}`. The section-eyebrow annotation above major headings ("HARDWARE WALLET", "SECURITY CHIP").

**`card-dark`** — Black `{colors.canvas}` fill, white text, `{rounded.md}` 8px radius, 24px padding, `{colors.hairline-dark}` border. Dark-band content cards.

**`card-light`** — White `{colors.surface-1}` fill, black text, `{rounded.md}` 8px radius, 24px padding, `{colors.hairline}` border. White-band content and feature tiles.

**`card-lavender`** — Soft lavender `{colors.accent-lavender}` fill, black text, `{rounded.md}` 8px radius, 24px padding. Feature-highlight tiles — the only hued card surface on the page.

**`text-input`** — White `{colors.surface-1}` fill, black text, 100px pill radius, 13×13×13×30 padding, 52px height, `{colors.ink-soft}` border. The email newsletter input at the footer — pill radius matching the CTA button.

**`category-chip`** — Lavender `{colors.accent-lavender}` fill, `{colors.deep-violet}` text, HMAlphaMono uppercase at `{typography.mono-label}`, 100px pill radius, 4×12 padding.

**`product-tile`** — White `{colors.surface-1}` fill, black text, `{rounded.md}` 8px, 16px padding, `{colors.hairline}` border. The product-comparison grid tile (Nano S, Nano X, Stax, Flex) with device image + name + price + rating below.

**`footer`** — Black `{colors.canvas}` fill, muted `{colors.ink-muted}` text at `{typography.body-sm}`, 40×24 padding. No bottom border — the page terminates on the dark canvas.

## Do's and Don'ts

**Do** preserve the black-white band alternation without introducing intermediate surfaces. The binary contrast is the system's structural device — a single gray or off-white section insertion collapses the rhythm.

**Do** use `{colors.cta-orange}` (#ff5300) for exactly one primary CTA per view. The orange is the page's only temperature break; multiplying it into section accents or illustration elements reduces it from a signal to a palette.

**Do** render HMAlphaMono labels in uppercase only. The monospace voice reads as product taxonomy at uppercase; at mixed case it reads as code or terminal output.

**Do** use Inter at weight 600 — not 700 — for display headlines. The system stops at 600 with -2.25px tracking; the tightness does the authority work that weight 700 would normally carry. Weight 700 tips from authoritative to aggressive in an achromatic system.

**Don't** use `{colors.accent-lavender}` (#d4a0ff) for more than 6–8 card fills. The lavender appears exactly 8 times on the marketing surface; it is a feature-highlight accent, not a brand color. Using it for background bands or nav elements would redefine it as a primary color it is not.

**Don't** introduce a mid-range radius (12–24px) between the small-step (4–8px) and pill (100px) tiers. The binary radius scale is as deliberate as the binary canvas scale; a 16px radius on a button would feel like an entirely different system.

**Don't** use product photography for illustration. Ledger's visual interest comes from real device photography against the black or white canvas — not renders, not lifestyle photos, not abstract art. The hardware objects are the brand.

**Don't** apply the gray muted tones (`{colors.ink-muted}`, `{colors.ink-soft}`) to canvas surfaces. They are text-only tones — 91 and 14 text occurrences respectively. Using them as card or section backgrounds introduces a gray tier the system explicitly avoids.

## Known Gaps

- **Dark-mode body sections:** the white-band sections are light-only; whether a complete dark variant exists for the dashboard or product pages is not captured here.
- **Hover and focus states:** only resting-state components are documented. The orange CTA hover state, input focus rings, and nav-link hover fills are not captured from the marketing surface.
- **Motion and transitions:** the page appears to have scroll-triggered section reveals, but easing curves and timing are not part of the marketing-surface extraction.
- **Ledger Live app surface:** the `{component.card-dark}` and mobile UI shown in product screenshots carries a richer token system (status colors, balance displays, transaction states) not represented in the marketing-only capture.
- **Product-tier pricing colors:** pricing tables for Nano S, Nano X, Stax, and Flex may carry per-product accent colors not visible on the captured marketing surface.
- **Form validation states:** `{component.text-input}` documents the resting state only; error, success, and focus variants are undocumented.
- **Tablet breakpoints:** the 4-column product grid collapses at tablet width; no responsive spacing tokens are captured.