# Fey · Design system migration spec

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

> This site is a perfect example of a premium, data-heavy fintech interface that uses restraint and high-quality typography to convey authority and clarity.

## 1. Identity DNA

Fey operates as a private wealth dashboard for the modern investor, translating complex market data into clear, actionable insights. Its identity is built on the quiet authority of a well-curated portfolio—precise, data-driven, and intentionally restrained.

**One-liner:** A premium fintech tool that simplifies complex market data into actionable investment insights.
**Keywords:** finance · analytics · clarity · insight · premium
**Analogy:** A private wealth dashboard for the modern investor

## 2. Color

The palette is a study in focused darkness: deep near-black surfaces provide a calm, high-contrast backdrop for high-legibility white and muted gray typography. This environment is designed to minimize visual noise and direct attention to the data itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0B0B0B` | main background |
| `--bg-soft` | `#1A1B20` | card background |
| `--ink` | `#E6E6E6` | body text |
| `--ink-soft` | `#868F97` | secondary text |
| `--muted` | `#868F97` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.04)` | divider |

**Color principle:** Deep, near-black surfaces with high-contrast typography for maximum focus on dense financial data.

The system's principle is absolute clarity through contrast, avoiding any high-chroma accents that would compete with the information hierarchy.

## 3. Typography

The voice is set by the Calibre grotesque-sans typeface, used uniformly across all text. Tight negative tracking on bold headlines creates a condensed, authoritative presence, while body copy maintains a clean, readable 400 weight.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 600 | -0.8px | Hero headline |
| headline | 54px | 1.0 | 700 | -0.8px | Section headline |
| subhead | 18px | 1.17 | 400 | 0px | Subheadline |
| body | 16px | 1.4 | 400 | 0px | Body text |
| caption | 14px | 1.28 | 400 | 0px | Small labels |

**Type rules:**
- Use Calibre for all text
- Use tight negative tracking for large headlines
- Use 400 weight for all body and caption text

## 4. Spacing

Rhythm is established through generous whitespace and clear, consistent gaps of 24px between distinct UI sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and clear gaps (24px) between distinct UI sections and cards.

## 5. Surfaces

Depth is articulated through a hierarchy of subtle elements: semi-transparent dark cards are delineated by low-opacity white borders and given lift by large-radius, diffused drop shadows.

- **Radius:** sm 6px · md 10px · lg 16px · pill 99px
- **Shadows:**
  - rgba(0, 0, 0, 0.28) 0px 14px 24px 0px
  - rgba(0, 0, 0, 0.66) 0px 53.1263px 86.7729px 0px
- **Borders:** Subtle 1px borders with low-opacity white rgba(255, 255, 255, 0.04) for depth

## 6. Layout

The layout skeleton is a disciplined single-column centered structure. This frame supports full-bleed, high-fidelity product screenshots and wide card layouts, giving dense financial data room to breathe.

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

**Skeleton:** Single-column centered layout with full-bleed app screenshots and wide card layouts.

## 7. Motion & Interaction

Motion is minimal and utilitarian, serving feedback rather than flair. Transitions are fast (0.1s to 0.25s), limited to subtle opacity fades and background shifts that confirm interactive states without distraction.

- **Durations:** micro 100ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity fades on hover states
  - Smooth background transitions

- **Hover:** Subtle opacity changes or background shifts for interactive elements
- **Click:** Immediate response with no complex physical animations
- **Transition:** Fast, 0.1s to 0.25s transitions for all interactive states
- **Keyboard:** Standard focus rings adapted for dark mode

## 8. Voice & Don'ts

The editorial voice is authoritative, clear, and data-driven, matching the interface's visual tone. Short, declarative headlines with tight tracking pair with direct calls-to-action, while avoiding vague jargon and complex terminology without context.

- **Tone:** Authoritative, clear, and data-driven
- **Headline style:** Short, declarative sentences with tight tracking
- **CTA style:** Direct and action-oriented (e.g., 'Learn more', 'App')
- **Avoid:** Excessive exclamation points / Vague marketing jargon / Complex financial terminology without context

### Don'ts
- ❌ Don't use bright neon accents — screenshot shows a strictly neutral, near-black palette.
- ❌ Don't use serif fonts — screenshot shows a consistent humanist/grotesque sans-serif system.
- ❌ Don't use playful illustrations — screenshot shows realistic, high-fidelity product photography.
- ❌ Don't use heavy shadows — screenshot uses subtle, large-radius drop shadows for depth.
- ❌ Don't use tight layouts — screenshot shows generous whitespace around all text blocks.
- ❌ Don't use vibrant gradients — screenshot uses solid dark backgrounds and subtle border glows.

The system deliberately excludes playful illustration, vibrant gradients, and tight layouts to maintain its premium, data-first character.

## System Prompt (paste into AI tool)

```
A premium fintech dashboard for investment analysis, characterized by a near-black (#0B0B0B) dark mode, high-contrast #E6E6E6 typography, and a clean, data-focused aesthetic. The interface uses the Calibre grotesque-sans font family with tight negative tracking on bold headlines. Key components include dark, semi-transparent cards with subtle white borders and large border-radius (16px). Critical constraints: avoid bright, high-chroma accent colors, do not use serif fonts, and maintain generous whitespace to prevent the dense financial data from feeling cluttered. The tone is authoritative and clear, focusing on simplifying complex information.
```
