---
name: Fey
description: "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."
version: alpha

colors:
  background: "#0B0B0B"
  primary: "#E6E6E6"
  secondary: "#868F97"
  neutral: "#868F97"
  bg-soft: "#1A1B20"
  line: "rgba(255, 255, 255, 0.04)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-0.8px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.8px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.17
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.28
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 99px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium fintech tool that simplifies complex market data into actionable investment insights.

*A private wealth dashboard for the modern investor*

## Colors

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

- **Background (`#0B0B0B`)** — uses `bg` token
- **Primary text (`#E6E6E6`)** — uses `ink` token
- **Secondary text (`#868F97`)** — uses `ink-soft` token
- **Muted (`#868F97`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.04)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous whitespace and clear gaps (24px) between distinct UI sections and cards.

## Elevation & Depth

- 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

## Shapes

- `sm`: 6px
- `md`: 10px
- `lg`: 16px
- `pill`: 99px

## Components

- **button:** Pill-shaped buttons with high-contrast backgrounds or subtle borders, large radius (99px).
- **card:** Dark, semi-transparent cards with subtle borders and large border-radius (16px) containing dense data.
- **chip:** Small, pill-shaped status indicators with colored text and subtle backgrounds.
- **input:** Dark, rounded input fields with subtle borders and clear labels.
- **hero:** Massive, centered typography paired with a full-width, high-fidelity product screenshot.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```