CURATED · OPEN · FREE

Fey

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

productfinancedark

↓ Download design system (26 MB)Open in OpenDesign

Visit: https://www.fey.com

📦 Browse pack contents →

Identity DNA

financeanalyticsclarityinsightpremium

A private wealth dashboard for the modern investor

Color

#E6E6E6Ink

#868F97Ink soft

#0B0B0BBG

#1A1B20BG soft

rgba(255, 255, 255, 0.04)Line

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

Typography

grotesque-sans · monospace

display54px · 600
headline54px · 700
subhead18px · 400
body16px · 400
caption14px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 6px

md · 10px

lg · 16px

pill · 99px

Subtle 1px borders with low-opacity white rgba(255, 255, 255, 0.04) for depth

rgba(0, 0, 0, 0.28) 0px 14px 24px 0px · rgba(0, 0, 0, 0.66) 0px 53.1263px 86.7729px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

250mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle opacity fades on hover states · Smooth background transitions

Subtle opacity changes or background shifts for interactive elements · Immediate response with no complex physical animations

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.

Voice & Don'ts

Tone Authoritative, clear, and data-driven
Headlines Short, declarative sentences with tight tracking
CTAs Direct and action-oriented (e.g., 'Learn more', 'App')

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.
Avoid: Excessive exclamation points
Avoid: Vague marketing jargon
Avoid: Complex financial terminology without context

Inside the pack — real screenshots

Fey — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko