---
version: alpha
name: Fey
description: "Warm paper-white, two grades of ink, and disciplined whitespace."
colors:
  on-surface: "#1C1C1C"
  surface: "#FAFAFA"
  primary: "#1C1C1C"
  ink: "#595959"
typography:
  nav-rail:
    fontFamily: Wealthsimple Sans Display
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0em
  body-lead:
    fontFamily: Wealthsimple Sans Display
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  everything: 0px
spacing:
  base: 4px
---
# Fey — Style Reference
> Warm paper-white, two grades of ink, and disciplined whitespace.

**Theme:** light

Fey's surface — as scanned on its farewell note — is a study in extreme restraint: a single warm off-white canvas (`#FAFAFA`), two weights of one greyscale ink, and nothing else. There is no accent, no border, no shadow, no radius; hierarchy is carried entirely by ink darkness and font weight. The one typeface, **Wealthsimple Sans Display**, sets everything at a large, confident 21px in weights 600–700, so even body copy reads as deliberate statement rather than filler. Layout is a quiet two-column editorial page — a muted left rail of navigation links against a spacious right column of leading text — with the kind of air that only appears when a brand trusts its words. The scan is thin (this is a single announcement page, not the full product), so this reference documents what is genuinely present: a near-monochrome, typography-first system where clarity is the entire design language.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Bright | `#1C1C1C` | `--ink-bright` | Headings, the emphasized lead sentence, and links — the darkest ink; used only where a line must lead, never as a fill. |
| Ink | `#595959` | `--ink` | Body copy and the muted left-rail nav; a soft neutral grey that reads as calm, not faded. |
| Canvas | `#FAFAFA` | `--color-canvas` *(name inferred; value real — background + `theme-color`)* | The warm off-white page ground; every element floats on this single surface, no cards, no panels. |

## Tokens — Typography
### Wealthsimple Sans Display — the entire type voice: display, body, and links, set large and heavy · `--font-display`
- **Substitute:** -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
- **Weights:** 600, 700
- **Sizes:** 21px (measured body/lead/link); nav rail ~16px *(inferred)*
- **Line height:** generous — roughly 1.4–1.5 for the leading paragraph blocks *(inferred from the screenshot's open leading)*
- **Letter spacing:** default / none observed
- **Role:** One family does all the work. Weight (600 vs 700) and ink darkness — not size or a second face — carry the whole hierarchy.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Nav / rail | ~16px *(inferred)* | 1.5 *(inferred)* | normal | `--text-nav` |
| Body / lead | 21px | ~1.45 *(inferred)* | normal | `--text-body` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous, editorial whitespace)
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Base | 4px | `--spacing-1` |

### Border Radius
| Element | Value |
|---------|-------|
| Everything | 0px (no rounding anywhere in the scan) |

### Shadows
None. The system is entirely flat — depth is not used.

### Layout
- **Page max-width:** wide, centered content column with a left navigation rail
- **Section gap:** large — paragraphs separated by full blank lines of air
- **Card padding:** n/a — there are no cards or panels
- **Element gap:** roomy vertical rhythm between rail links and between text blocks

## Components
### Left Nav Rail
**Role:** Section/wayfinding links (e.g. "Announcement", "Why we sold Fey", `@handles`).
Muted `--ink` (`#595959`) text at ~16px *(inferred)*, stacked vertically with generous line spacing, no underline, no background, no border. Reads as a quiet index, deliberately subordinate to the main column.

### Lead Paragraph
**Role:** The opening statement that carries the page.
Opens with a bolder `--ink-bright` (`#1C1C1C`) 700-weight clause, then continues in `--ink` (`#595959`) at 21px. The darkness step from bright to soft ink is the only device signalling "this first line matters most."

### Body Paragraph
**Role:** Primary reading text.
`--ink` (`#595959`), Wealthsimple Sans Display, 21px, weight 600–700, open leading. Large enough that plain prose feels intentional and premium.

### Text Link
**Role:** Inline emphasis / navigation within copy.
`color: #1C1C1C`, `border: none`, `radius: 0`, `padding: 0`, `font-size: 21px`, `font-weight: 700` (measured). Links are distinguished by weight and darker ink, not by color or underline.

### Signature Mark
**Role:** Human sign-off at the foot of the note.
Hand-drawn signature glyphs in a light grey, small scale, left-aligned under the closing line — the single humanizing, non-typographic element on the page.

### Page Canvas
**Role:** The one surface everything sits on.
Full-bleed `#FAFAFA`. No secondary surface exists; there is no "elevated" tier to step onto.

## Do's and Don'ts
### Do
- Carry all hierarchy with **ink darkness + font weight** — `#1C1C1C` bright vs `#595959` soft, 700 vs 600.
- Set text large and confident (21px body) and give it room; whitespace is the layout.
- Keep everything flat: `radius: 0`, no borders, no shadows.
- Use one family (Wealthsimple Sans Display) for display, body, and links alike.
- Animate, if at all, with the site's own expo-out easing `cubic-bezier(0.16, 1, 0.3, 1)`.

### Don't
- Don't introduce an accent or brand color — the scanned system has none; color is greyscale ink only.
- Don't add `#000000` — the true darkest ink is `#1C1C1C`, not pure black.
- Don't add cards, panels, rounded corners, or drop shadows.
- Don't shrink body copy or crowd the columns; the openness is the point.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FAFAFA` | The single, universal page ground. |

## Elevation
There is no elevation. Depth is deliberately absent — no shadows, borders, or surface steps. Emphasis is conveyed purely through ink contrast (`#1C1C1C` vs `#595959`) and weight. Everything lives on one plane.

## Imagery
Effectively none — the CSS declares `--photo: none`. The only non-text mark is a small cluster of hand-drawn signature glyphs at the foot of the note, in light grey. The design leans on typography and whitespace instead of imagery; that emptiness reads as confidence, not absence.

## Layout
A contained two-column editorial layout: a muted left navigation rail (`Announcement`, `Why we sold Fey`, `@handles`) sitting quietly beside a spacious right-hand text column. No full-bleed hero, no grid of cards — just a centered body of large type surrounded by air, closing with signatures. Nav is a plain vertical list, not a bar.

## Typography Signature
One face, two weights, two inks — that is the entire system. Because Wealthsimple Sans Display is set at a large 21px even for running text, the page never has "small print"; every word is presented at reading-priority scale. The single move is the darkness step: the lead clause in bright `#1C1C1C` 700 hands off to soft `#595959` body, so importance flows without a size change or a second typeface. It works because restraint at this scale reads as editorial confidence — the design gets out of the way of the sentence.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FAFAFA` / text: `#595959` / heading + link: `#1C1C1C` / surface: `#FAFAFA` (same as background — no distinct surface) / border: none / accent: none / primary action: no distinct CTA color (links = `#1C1C1C`, weight 700)
## Example Component Prompts
1. **Editorial announcement page**: Full-bleed `#FAFAFA` canvas, two columns. Left rail: vertical list of links in `#595959`, ~16px, no underline. Right column: opening clause in Wealthsimple Sans Display 700 `#1C1C1C` 21px, then body in `#595959` 21px with ~1.45 line-height and blank-line paragraph gaps. Flat — no radius, no shadow, no border.
2. **Text link**: Inline link, `color: #1C1C1C`, `font-weight: 700`, `font-size: 21px`, no underline, no padding, `border-radius: 0` — distinguished from body only by darker ink and weight.
3. **Nav rail**: Stacked vertical links, `#595959`, ~16px, generous line spacing, no icons, no active-state fill — a quiet index subordinate to the main text.
4. **Lead + body block**: First sentence 700-weight `#1C1C1C`; subsequent sentences `#595959`; all Wealthsimple Sans Display at 21px; wrap at a comfortable measure with lots of surrounding whitespace.

## Similar Brands
- **Wealthsimple** — the literal kin: same Wealthsimple Sans Display type voice and the same calm, greyscale, whitespace-forward restraint.
- **Linear** — hierarchy through weight and neutral ink rather than color; disciplined flat surfaces.
- **Mercury** — fintech that treats large, confident typography and generous air as the primary design material.
- **Stripe** — editorial clarity; text-first pages where the copy, not decoration, leads.
- **Arc (The Browser Company)** — the same trust in a single voice, big type, and a near-monochrome canvas.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --ink-bright: #1c1c1c;   /* headings, lead, links */
  --ink: #595959;          /* body, muted nav */
  --color-canvas: #FAFAFA; /* page ground (value real; token name inferred) */

  /* Typography — Families */
  --font-display: 'Wealthsimple Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography — Scale */
  --text-body: 21px;
  --text-nav: 16px;        /* inferred */
  --leading-body: 1.45;    /* inferred */

  /* Weights */
  --weight-regular: 600;
  --weight-bold: 700;

  /* Spacing */
  --spacing-1: 4px;

  /* Border Radius */
  --radius-none: 0px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink-bright: #1c1c1c;
  --color-ink: #595959;
  --color-canvas: #FAFAFA;

  /* Typography — Families */
  --font-display: 'Wealthsimple Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography — Scale */
  --text-body: 21px;
  --text-nav: 16px;
  --leading-body: 1.45;

  /* Spacing */
  --spacing-1: 4px;

  /* Border Radius */
  --radius-none: 0px;

  /* Motion */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
}
```