# Letter · Design system migration spec

> Source: https://letter.co  ·  Curated by OpenDesign  ·  en

> The design masterfully blends cinematic photography with clinical layout precision to redefine the expected visual language of financial services.

## 1. Identity DNA

Letter presents wealth management not as a service to be sold, but as a space to be curated. Its identity is built on the analogy of a digital private bank that feels like a contemporary art gallery—refined, spacious, and distinctly premium.

**One-liner:** A refined, modern financial platform for sophisticated wealth management.
**Keywords:** wealth management · modern · thoughtful · high net worth
**Analogy:** A digital private bank that feels like a contemporary art gallery—refined, spacious, and distinctly premium.

## 2. Color

The color system is built on a foundation of light, using crisp whites and deep inks as the primary contrast, with a singular teal accent to signal modern, thoughtful wealth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f6f9f9` | card background |
| `--bg-quiet` | `#e6ebec` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#191b1f` | secondary text |
| `--muted` | `#e7e8e8` | placeholder |
| `--accent` | `#186f64` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A restrained, neutral-dominant palette anchored by a sophisticated teal accent to convey calm, modern wealth.

The principle is restraint, allowing the typography and content to command attention.

## 3. Typography

A transitional-serif establishes authority for prominent display text, while a geometric-sans ensures clarity for all interface elements. This duality mirrors the brand's balance of tradition and modernity.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 1.0 | 500 | -0.5px | Hero headlines, section headers |
| h1 | 46px | 1.2 | 500 | normal | Section titles |
| h2 | 28px | 1.4 | 400 | normal | Subheaders and card titles |
| body | 16px | 2.0 | 400 | normal | Body text, navigation links |

**Type rules:**
- Use transitional-serif for prominent display text to establish authority
- Use geometric-sans for all UI text to ensure clarity and modernity
- Limit weight variation to regular, medium, and semibold to maintain a calm visual rhythm

## 4. Spacing

Generous vertical rhythm and high line-heights create an airy, luxurious feel, giving content room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm with high line-heights (up to 2.0) to create an airy, luxurious feel.

## 5. Surfaces

Surfaces are defined by subtle background color shifts and minimal borders, relying on spatial separation rather than heavy shadows for depth.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Borders:** Minimal use of borders, relying on subtle background color shifts for surface separation.

## 6. Layout

The layout transitions from a dramatic, full-viewport hero introduction into a structured, multi-column grid for feature cards. This skeleton prioritizes both immersion and scannable information hierarchy.

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

**Skeleton:** A structured grid that transitions from a full-bleed, immersive hero to a multi-column layout for feature cards.

## 7. Motion & Interaction

Motion philosophy favors calm over commotion. Subtle fade and slide-up animations reveal content sequentially, while smooth transitions on hover states maintain an unhurried, premium interaction model.

- **Durations:** micro 70ms · small 400ms · medium 750ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Subtle fade and slide-up animations for sequential content reveal
  - Smooth color and opacity transitions on hover states

- **Hover:** Subtle changes in opacity or color for text links and buttons.
- **Click:** Immediate response with subtle transitions to acknowledge user input.
- **Transition:** Elegant, slightly elongated transitions (up to 0.75s) to maintain a calm, unhurried user experience.
- **Keyboard:** Standard focusable elements with clear visual states.

## 8. Voice & Don'ts

The editorial voice is confident, sophisticated, and highly articulate. Headlines are direct and slightly aspirational, while calls to action are clear and understated.

- **Tone:** Confident, sophisticated, and highly articulate.
- **Headline style:** Direct, evocative, and slightly aspirational, using concise phrases.
- **CTA style:** Clear, action-oriented, and understated.
- **Avoid:** Using excessive exclamation points / Employing aggressive or overly urgent sales language / Using complex financial jargon without clear context

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp 2px radius buttons
- ❌ don't use bright, neon accents — screenshot shows a muted teal #186f64 instead
- ❌ don't use dense, cramped layouts — screenshot shows generous padding and high line-heights
- ❌ don't use playful or decorative illustrations — screenshot uses abstract, photographic imagery
- ❌ don't use all-caps for large headings — screenshot uses title case or sentence case
- ❌ don't use dark mode as default — screenshot shows a predominantly white and light gray interface

The system deliberately avoids dense layouts, playful illustrations, bright neon accents, and the visual noise of rounded corners or heavy drop shadows.

## System Prompt (paste into AI tool)

```
This system represents a premium, modern fintech platform for high-net-worth wealth management. The identity is sophisticated and calm, utilizing a restrained palette: crisp white backgrounds (#ffffff, #f6f9f9) paired with deep inks (#000000, #191b1f) and a single muted teal accent (#186f64). Typography is a refined mix of transitional-serif for display headings and geometric-sans for UI elements. Critical constraints: never use heavy drop shadows or bright neon accents, always maintain generous whitespace and high line-heights (up to 2.0), and strictly adhere to the 2px button corner radius. The layout prioritizes cinematic hero sections and large, airy feature blocks, creating a confident and luxurious digital experience.
```