# Ledger · Design system migration spec

> Source: https://www.ledger.com  ·  Curated by OpenDesign  ·  en

> A prime example of high-impact, minimalist dark mode design for premium financial technology, effectively balancing stark typography with a single, high-energy accent color to build trust and drive conversion.

## 1. Identity DNA

Ledger's design system is built as a digital vault for the decentralized age, translating the core principles of cryptocurrency security into a tangible visual language. It is a system of stark contrasts and deliberate restraint, engineered to communicate trust and precision in a domain where these qualities are paramount.

**One-liner:** Premium hardware and software wallet ecosystem for secure crypto asset management.
**Keywords:** crypto · hardware · wallet · security · decentralized · trust
**Analogy:** A digital vault for the decentralized age

## 2. Color

The palette is a disciplined study in high-contrast monochrome, built on a foundation of deep black and crisp white. A single, energetic orange is reserved for critical actions, acting as a precise guide through the secure environment.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#949494` | placeholder |
| `--accent` | `#FF5E00` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast monochrome with a singular energetic accent for critical actions.

This restraint enforces clarity, ensuring the user's focus is never divided between competing signals.

## 3. Typography

The typographic system pairs a bold, geometric sans-serif for headlines with a highly legible humanist sans-serif for body copy. This creates a clear hierarchy, where impactful, modern statements anchor the interface while detailed information remains effortlessly readable.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1.5px | Hero and section headlines |
| heading | 32px | 1.1 | 500 | -0.5px | Section titles |
| body | 16px | 1.5 | 400 | 0px | Body text and descriptions |
| caption | 13px | 1.5 | 400 | 0px | Small supporting text |
| label | 12px | 1.2 | 600 | 1.5px | Uppercase category labels and tags |

**Type rules:**
- Use geometric-sans for impactful, modern headings
- Use humanist-sans for highly legible body copy
- Apply tight negative letter-spacing to large display text for a bold, premium feel

## 4. Spacing

Spacing adheres to a consistent 4px base grid, establishing a tight, controlled vertical rhythm throughout the composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid providing tight, controlled vertical rhythm.

## 5. Surfaces

Surfaces are defined by minimal, crisp details. Subtle inset highlights and thin, low-opacity borders provide definition without relying on soft, blurry shadows, maintaining the sharp, technical aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(255,255,255,0.1) 0px -2px 1px 0px inset
  - rgba(0,0,0,0.25) 0px 2.4px 2.4px 0px
- **Borders:** Thin 1px solid borders using subtle white or grey with low opacity.

## 6. Layout

The layout skeleton is an asymmetric split, pairing a narrow, readable text column with a wide, visually dominant product showcase area. This structure balances authoritative information delivery with compelling product presentation within a strict grid framework.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric split hero layout with a wide container and narrow content column for readability.

## 7. Motion & Interaction

Motion is purposeful and minimal, designed to guide rather than distract. Transitions are smooth and consistent, primarily using opacity fades and subtle background shifts to reveal content and provide feedback.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Standard transitions for background colors and basic transforms
  - Smooth opacity fades for reveal effects
  - Background gradient transitions on scroll

- **Hover:** Background color shifts or subtle opacity changes on interactive elements.
- **Click:** Immediate visual feedback via background color update or scale transform.
- **Transition:** Global 0.2s ease-out transition for most interactive state changes.
- **Keyboard:** Logical focus order with visible focus rings for navigation.

## 8. Voice & Don'ts

The editorial voice is authoritative, secure, and empowering, matching the precision of the visual system. Headlines are direct and action-oriented, while calls-to-action are clear and imperative.

- **Tone:** Authoritative, secure, and empowering.
- **Headline style:** Direct, action-oriented, and benefit-focused.
- **CTA style:** Clear and imperative, often paired with a directional arrow.
- **Avoid:** Jargon-heavy or overly complex technical language / Playful or casual tones that undermine the security aspect / Visual clutter or unnecessary decorative elements / Low-contrast text that hinders readability / Generic or unbranded imagery / Aggressive or jarring transitions

### Don'ts
- ❌ Don't use rounded, playful shapes — screenshot shows sharp, precise pill buttons and geometric icons instead.
- ❌ Don't use a light or white background — screenshot shows a dominant, deep black background throughout.
- ❌ Don't use thin, weak typography — screenshot shows bold, tightly tracked geometric sans-serif headlines.
- ❌ Don't use a wide variety of accent colors — screenshot shows a strict monochrome palette with a single orange accent.
- ❌ Don't use soft, blurry drop shadows — screenshot shows minimal, crisp inset box-shadows and thin 1px borders.
- ❌ Don't use small, cramped containers — screenshot shows generous whitespace and a wide, expansive layout.

The system deliberately rejects visual clutter, playful tones, and any element that could undermine the perception of security and control.

## System Prompt (paste into AI tool)

```
This design represents a premium, secure fintech product, specifically a crypto hardware wallet ecosystem. It utilizes a stark, high-contrast monochrome palette (black #000000 and white #FFFFFF) with a single, high-chroma orange (#FF5E00) for primary calls-to-action, paired with subtle grey (#949494) for secondary text. Typography features a bold geometric sans-serif for display text and a humanist sans-serif for body copy, both rendered with tight, modern tracking. Critical design constraints include: Do not introduce multiple competing accent colors, maintain the strict dark mode aesthetic, avoid thin or weak typography, use minimal and crisp borders instead of soft shadows, avoid overly rounded or playful geometry, and ensure generous whitespace for a premium, uncluttered feel.
```
