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

# Fey · Design System

> Quiet editorial clarity for a changing financial brand

**Theme:** light · **Industry:** fintech · **Source:** https://fey.com/ · **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._

Fey’s transition announcement uses a near-white canvas, restrained gray typography, and a compact column of direct, carefully paced copy. The page feels calm and personal, with a small menu mark and delicate signature-like drawings providing the only visual accents.

## North star

Let the announcement read as a calm, carefully typeset note, with open space and muted contrast doing more than decoration.

## Overview

The page turns a brand transition into a quiet reading experience rather than a promotional landing page. A near-white canvas fills the viewport, while medium-gray copy carries almost all of the visual weight. Dark charcoal is reserved for the Wealthsimple link, creating a restrained emphasis rather than a colorful CTA. The system font gives the message a familiar, unvarnished voice; a display webfont appears only on the link. Body copy is set at the measured 21px size with a strong weight and generous line-height, helping the narrow text column remain readable. Layout is notably sparse: the copy sits to the right of a small, faint menu mark, surrounded by broad open space. Paragraph breaks create the primary rhythm. There are no cards, photographs, or prominent interface controls. A few delicate signature-like strokes near the closing line add a human note without competing with the announcement. Keep the page flat, quiet, and focused on the text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | surface | Near-white canvas across the announcement; preserves the page’s quiet, open feel. |
| Soft Graphite | `#595959` | `--color-soft-graphite` | neutral | Main announcement copy and understated navigation mark. |
| Deep Ink | `#1c1c1c` | `--color-deep-ink` | brand | Emphasized Wealthsimple link; keep this dark tone limited to selective text emphasis. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-text` → `#595959` (Soft Graphite) · `--color-text-muted` → `#1c1c1c` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#595959` | `#fafafa` | 6.71:1 | AA |
| `#1c1c1c` | `#fafafa` | 16.33:1 | AAA |

### Gradients

- `linear-gradient(rgb(28, 28, 28), rgb(28, 28, 28))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 600, 400 | Announcement body, navigation, and caption text. | Inter |
| Wealthsimple Sans Display | `--font-wealthsimple-sans-display` | webfont | 700 | The emphasized Wealthsimple text link. | DM Sans |

- **-apple-system:** System sans-serif; body is measured at 21px, weight 600, with a 1.55 line-height and slightly tight tracking. Navigation and captions are regular.
- **Wealthsimple Sans Display:** Measured as a bold display face for one link; preserve sentence case and use sparingly.

### Type scale — Major Third (ratio ≈ 1.25, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 21px | 600 | 1.55 | -0.01em | — | -apple-system | Main announcement paragraphs and closing note. |
| caption | 13px | 400 | 1.2 | -0.002em | — | -apple-system | Small supporting or caption text, if present. |
| nav | 13px | 400 | 1.2 | -0.002em | — | -apple-system | Subtle navigation label or menu text. |
| link | 21px | 700 | 1.55 | -0.01em | — | Wealthsimple Sans Display | Bold Wealthsimple link within the announcement. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 8, 21, 28, 29, 40, 44, 48, 72 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

Use a single, narrow reading column placed off-center, with a small navigation mark positioned separately to its left. Keep the text left-aligned and surrounded by substantial open canvas. The page has one continuous section rather than stacked promotional bands; paragraph breaks provide its rhythm. Measured spacing is comfortable, with a 48px section gap and 8px element gap available as system references. Avoid inventing a fixed maximum width: preserve the screenshot’s compact text measure and expansive surrounding whitespace.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.35s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The page is flat, with no measured shadows, card treatments, or border system. Separation comes from whitespace and paragraph breaks, not layered surfaces. Avoid adding panels or elevation; any faint strokes belong to the small hand-drawn closing flourish rather than interface chrome.

## Imagery

There is no photography, product mockup, or prominent illustration. A few fine, pale signature-like strokes appear beneath the closing copy, functioning as a personal flourish rather than a branded illustration system. Keep these marks small, low-contrast, and secondary; do not introduce decorative imagery that changes the text-first character.

## Components

### Announcement copy

A left-aligned stack of medium-gray paragraphs, set in the system sans-serif at the measured 21px body size and 1.55 line-height.

### Menu mark

A very small, faint three-line navigation mark sits apart from the main reading column; keep it visually quiet.

### Inline brand link

The Wealthsimple link is the sole dark text accent, using the measured bold Wealthsimple Sans Display face.

### Closing flourish

Light, delicate signature-like linework follows the closing note and remains secondary to the copy.

### Measured component styles

- **Link** (“Wealthsimple”): transparent background · text #1c1c1c · radius 0px · padding 0px · 700 21px Wealthsimple Sans Display
- **Navigation item** (“Announcement (opens in new tab) Why we s”): transparent background · text #595959 · radius 0px · padding 28px 72px 48px 40px · 400 13px -apple-system

## Do

- Use #fafafa as the uninterrupted page canvas.
- Set the announcement in a compact, readable text column.
- Use #595959 for the main copy and subdued navigation.
- Reserve #1c1c1c for restrained inline emphasis.
- Create rhythm with paragraph breaks and generous whitespace.
- Keep any signature-like linework faint and understated.

## Don't

- Do not add colorful CTA buttons or accent bands.
- Do not turn the message into cards or a dashboard.
- Do not add photography or product mockups.
- Do not center the announcement text.
- Do not add heavy borders, shadows, or decorative gradients.
- Do not enlarge the menu mark into a dominant navigation bar.

## Agent prompt

Build a new page in Fey’s quiet editorial style. Use #fafafa (Gallery White) as a continuous canvas, #595959 (Soft Graphite) for primary copy, and #1c1c1c (Deep Ink) only for a restrained inline link or emphasis. Keep one left-aligned, compact reading column surrounded by generous open space; place any minimal navigation mark separately and keep it faint. Use a system sans-serif for body text, with the measured 21px, 600-weight, 1.55 line-height treatment as the reference for announcement copy. Use a bold display face sparingly for links. Let paragraph breaks establish rhythm. The page should remain flat: no cards, shadows, prominent borders, colorful buttons, or decorative photography. If a closing flourish suits the content, use delicate low-contrast linework and keep it secondary.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Single quiet announcement column, offset from a small navigation mark and surrounded by open canvas. | Read-through message, Inline destination link | Left-aligned paragraphs, Minimal menu mark, Subtle closing flourish |

## Source CSS custom properties (selected)

```css
--ease: cubic-bezier(0.16, 1, 0.3, 1);
```

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