---
title: "Letter design system"
variant: extended
source: https://letter.co/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/letter-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Letter · Design System

> Private finance, softened by editorial clarity

**Theme:** light · **Industry:** fintech · **Source:** https://letter.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Letter pairs a cinematic, dark video hero with a restrained financial-services interface. Warm neutral panels, confident display typography, and modular product sections make a broad wealth offering feel approachable.

## North star

Let expressive typography and cinematic imagery introduce the brand, then keep financial choices legible through calm surfaces and precise color-coded modules.

## Overview

The page balances a cinematic opening with a calm, editorial product experience. The hero uses a dark burgundy-and-black video image with centered pale text; those dramatic colors belong to the footage, not the core interface palette. Elsewhere, white canvas and cool mist surfaces provide breathing room, while deep green anchors investment actions and occasional section treatments. Blue and violet are selective service accents, especially on Borrow and Lend cards. Neufile Grotesk Extended carries navigation, body copy, and much of the interface; Albra Sans gives key headings a more expressive, editorial voice. Large headings sit beside concise supporting copy, with imagery treated as an integral part of split layouts and product panels. Sections alternate between open white space, softly tinted bands, and paired cards. The composition is comfortable rather than dense, with square-edged panels and almost no visible elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Letter Ink | `#000000` | `--color-letter-ink` | neutral | Primary navigation and dark text, headings, and selected section backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white text on dark treatments, and light button surfaces. |
| Letter Green | `#186f64` | `--color-letter-green` | brand | Primary investment and marketplace actions, links, and occasional deep-green section backgrounds. |
| Mist Surface | `#f6f9f9` | `--color-mist-surface` | surface | Cool, near-white band behind the opening explanatory split and Deposit content. |
| Cloud Slate | `#e6ebec` | `--color-cloud-slate` | surface | Cool gray Borrow card and pale copy or control surfaces. |
| Guide Blue | `#154ea5` | `--color-guide-blue` | accent | Blue links and calls to action in the Guides area. |
| Soft Charcoal | `#191b1f` | `--color-soft-charcoal` | neutral | Secondary dark link and interface text where pure black is not used. |
| Lend Violet | `#644bc4` | `--color-lend-violet` | accent | Violet product text and action accents, notably on lending-related modules. |
| Signal Periwinkle | `#536eff` | `--color-signal-periwinkle` | accent | Borrow card text and button; also appears in product video or media accents. |
| Lilac Haze | `#e6def0` | `--color-lilac-haze` | surface | Softly tinted product-card surface, especially associated with violet lending content. |
| Mint Wash | `#eefcef` | `--color-mint-wash` | surface | Pale green product-card surface behind marketplace content. |
| Peach Paper | `#fcede1` | `--color-peach-paper` | surface | Warm Invest card surface and pale foreground text on the green primary action. |
| Footer Fog | `#9fabad` | `--color-footer-fog` | semantic | Muted footer text, including the compact copyright line. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f9f9` (Mist Surface) · `--color-surface-2` → `#e6ebec` (Cloud Slate) · `--color-surface-3` → `#000000` (Letter Ink) · `--color-surface-4` → `#186f64` (Letter Green) · `--color-text` → `#000000` (Letter Ink) · `--color-text-muted` → `#191b1f` (Soft Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#186f64` (Letter Green) · `--color-accent-2` → `#154ea5` (Guide Blue) · `--color-accent-3` → `#644bc4` (Lend Violet) · `--color-on-accent` → `#fcede1` (Peach Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f9f9` | 19.84:1 | AAA |
| `#000000` | `#e6ebec` | 17.46:1 | AAA |
| `#191b1f` | `#ffffff` | 17.24:1 | AAA |
| `#191b1f` | `#f6f9f9` | 16.29:1 | AAA |
| `#191b1f` | `#e6ebec` | 14.34:1 | AAA |
| `#191b1f` | `#000000` | 1.22:1 | fail |
| `#ffffff` | `#f6f9f9` | 1.06:1 | fail |
| `#ffffff` | `#e6ebec` | 1.2:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neufile Grotesk Extended | `--font-body` | webfont | 400, 700, 500, 600 | Navigation, body copy, links, captions, and interface text. | DM Sans |
| Albra Sans | `--font-display` | webfont | 600 | Display and selected prominent section headings. | DM Serif Display |

- **Neufile Grotesk Extended:** Extended sans-serif with measured regular, medium, semibold, and bold weights; use restrained tracking and natural casing.
- **Albra Sans:** Measured semibold display face adds an editorial contrast; use for large, high-attention headings without uppercase styling.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.1 | 0 | — | Albra Sans | Cinematic hero headline and high-impact brand statements. |
| h1 | 60px | 700 | 1.4 | 0 | — | Neufile Grotesk Extended | Primary page or section headline, especially explanatory content. |
| h2 | 46px | 600 | 1.2 | 0 | — | Albra Sans | Prominent feature and product-section headings. |
| h3 | 28px | 400 | 1.4 | 0 | — | Neufile Grotesk Extended | Supporting section titles and feature headings. |
| h4 | 22px | 600 | 1.2 | 0.02em | — | Albra Sans | Compact feature labels and card subheads. |
| body | 16px | 400 | 1.33 | 0 | — | Neufile Grotesk Extended | Paragraphs describing services, products, and benefits. |
| caption | 13px | 400 | 1.3 | 0 | — | Neufile Grotesk Extended | Small supporting details and secondary descriptions. |
| nav | 16px | 400 | 2 | 0 | — | Neufile Grotesk Extended | Header navigation and footer navigation labels. |
| link | 16px | 500 | 1 | 0 | — | Neufile Grotesk Extended | Text links such as Learn More. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 8, 12, 13, 16, 19, 24, 27, 32, 44, 48, 52, 64 px.
- Section rhythm 52px · element gap 16px · card padding 52px · max content width 1230px.

The page uses a centered content system capped at a measured 1230px, opening with a full-bleed hero and moving into mixed one- and two-column sections. A two-column explanatory split places copy beside imagery; subsequent feature content alternates single-band product presentations with paired product cards. The Guides block reverses the balance, placing a photo collage opposite right-aligned copy. Section rhythm is spacious and comfortable, with a measured 52px section gap and 16px element gap. White remains the dominant canvas, interrupted by soft surface bands.

## Shape & elevation

- Radius: button `2px` · link `2px` · xs `2px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.75s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows and no visible border system define its hierarchy. Separate content through white space, full-width background bands, and contrasting card fills instead. Cards have square corners; buttons and links use a subtly softened measured 2px radius. Layer photography within panels rather than simulating depth with UI shadows.

## Imagery

A full-bleed cinematic video establishes the hero, with deep burgundy and black tones that should be treated as media rather than interface colors. Product sections use polished still-life and abstract 3D imagery, often cropped into their panels. Guides introduces a collage of human photography. Keep images large and editorial, allow imagery to share the composition with copy, and preserve the soft, low-contrast treatment visible in product media.

## Components

### Hero

Full-bleed video with centered display headline and pale supporting copy over dark footage.

### Primary action

Compact filled button with a measured 2px radius, 12px vertical padding, and 27.2px horizontal padding; color varies by product.

### Product card

Flat, square-corner panel with generous measured 52px padding, tinted background, colored title, copy, and action.

### Feature split

Two-column editorial block pairing a strong heading and concise copy with a large image or video.

### Text link

Medium-weight 16px Neufile Grotesk Extended text; green is primary, with charcoal used as a secondary option.

### Guides collage

Overlapping human-photo tiles paired with right-aligned blue heading, description, and call-to-action.

### Footer navigation

Sparse multi-column link groups on white, followed by a compact muted copyright line.

### Measured component styles

- **Primary button** (“Invest Now”): background #186f64 · text #fcede1 · radius 2px · padding 12px 27.2px · 500 16px Neufile Grotesk Extended
- **Secondary button** (“Borrow Now”): background #536eff · text #e6ebec · radius 2px · padding 12px 27.2px · 500 16px Neufile Grotesk Extended
- **Link** (“Learn More”): transparent background · text #186f64 · radius 2px · padding 12px 8px · 500 16px Neufile Grotesk Extended
- **Card** (“Invest Powerful passive investment strat”): background #fcede1 · text #186f64 · radius 0px · padding 52px · 400 16px Neufile Grotesk Extended
- **Navigation item** (“Deposit”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Neufile Grotesk Extended

## Do

- Use white as the default canvas and reserve tinted bands for section grouping.
- Keep cinematic dark color confined to hero media.
- Use Albra Sans selectively for expressive display headings.
- Use Neufile Grotesk Extended for navigation, copy, and controls.
- Give paired product cards distinct soft fills and color-coded actions.
- Keep panels flat, spacious, and square-cornered.
- Pair concise copy with large editorial imagery.

## Don't

- Do not treat hero footage colors as the core interface palette.
- Do not add shadows or decorative borders to create hierarchy.
- Do not round cards; their measured corners are square.
- Do not use every accent color in the same module.
- Do not compress the generous space around section content.
- Do not make body copy compete with display headings.
- Do not force all sections into identical two-column layouts.

## Agent prompt

Build a new Letter-style fintech page with an editorial, premium feel. Use Gallery White (#ffffff) as the main canvas, Mist Surface (#f6f9f9) and Cloud Slate (#e6ebec) for restrained section changes, and Letter Green (#186f64) for primary actions and links. Apply Guide Blue (#154ea5), Signal Periwinkle (#536eff), and Lend Violet (#644bc4) selectively to service-specific modules. Keep dramatic dark footage in media only. Use Neufile Grotesk Extended for navigation, body, and controls, with Albra Sans for prominent headings. Favor a centered content width, spacious alternating bands, split image-and-copy sections, and flat tinted product cards. Preserve square card corners, the subtle measured button radius, concise copy, and large, softly treated imagery; avoid shadows and unnecessary borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video backdrop with centered headline and supporting copy. | Centered brand introduction, Scroll-led discovery | Dark cinematic media, Pale display text |
| 2 | feature-split | Soft-tinted band with explanatory copy beside a large image. | Problem-and-solution framing, Editorial reading flow | Mist surface, Bold statement, Product still life |
| 3 | feature-split | Two-column composition with image opposite headline and compact feature copy. | Benefits overview, Scannable feature details | Editorial heading, Image panel, Compact text groups |
| 4 | product-showcase | Full-width Deposit band with copy and video imagery. | Single product introduction, Card acquisition CTA | Product heading, Filled button, Learn More link |
| 5 | product-grid | Two side-by-side tinted cards for Invest and Borrow. | Side-by-side product comparison, Distinct product CTAs | Peach and slate fills, Green and periwinkle actions, Embedded video |
| 6 | product-showcase | Full-width deep-green Office band with copy and media. | Premium service introduction, Client conversion CTA | Green surface, Pale text, Video imagery |
| 7 | product-grid | Paired Marketplace and Lend cards with separate tinted backgrounds. | Product discovery, Lending conversion | Mint and lilac fills, Green and violet accents, Video imagery |
| 8 | contact | Two-column block with a photo collage opposite right-aligned copy. | Human support reassurance, Schedule-a-call CTA | Layered photography, Blue heading and button, Secondary link |
| 9 | footer | Sparse multi-column navigation on a white canvas. | Grouped site navigation, Legal resource access | Column headings, Compact text links |
| 10 | footer | Compact brand and copyright line beneath footer navigation. | Brand identification, Copyright disclosure | Small logo, Muted footer text |

## Source CSS custom properties (selected)

```css
--primary-dark: #1E232D;
--primary-blue: #3748A0;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/letter-co