What is Ledger's primary brand color?

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.

What typefaces does Ledger use, and what are the substitutes?

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.

How does Ledger's black-white banding work?

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.

Why is Ledger's CTA orange when the brand is black and white?

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.

Can I use this DESIGN.md to build a hardware or security product site?

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.

Ledger Design System

Ledger's marketing system runs pure black and white with a single vivid orange CTA and lavender feature highlights.

About Ledger DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ledger.com

Fintech & Crypto

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.

What makes it distinct

Binary black-white alternationhero sections are jet black with white text; body sections are pure white with black text; no gray canvas exists
Single orange CTAthe primary button fills with vivid orange-red (#ff5300) on an otherwise achromatic page, the only warm-temperature accent
HMAlphaMono for category chipsuppercase monospace labels at 12–14px sit over section headings, creating a technical-editorial split between display and annotation
Lavender highlight fillsa soft purple (#d4a0ff) appears 8 times as a feature-tile background, the only hue besides the CTA orange on the marketing surface
Weight 600 displayInter at 50px / weight 600 with -2.25px tracking is the heaviest typographic moment; no 700 or 800 tier

Live at ledger.com

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

ledger.com

Explore Ledger

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Ledger design system FAQ

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

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

Browse all design systems

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

Ledger — official site

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

The DESIGN.md specification

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