Fey — design system & UI screens

Fintech · 1 screen · 10 sections · fey.com

Near-black landing for an investing app where the hero pairs the small "Make better investments." headline with a large dark product screenshot showing stock charts and an AI earnings-alert panel, set on a pure-black canvas. The signature is the relentlessly dark, screenshot-led storytelling: each scroll section is a single oversized product surface (ETF pages, a floating dock with a 3D rock, a radial "Portfolio in sync" sphere, a monitor mockup over a mountain photo, a command-key callout) accented only by a lime-chartreuse green, giving it a quiet, premium terminal feel.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/fey.

Decoded design system

Fey's decoded design system: background #000000, text #868F97, accent #479FFA, link #479FFA, primary #868F97; type scale h1 54px / h2 26px / body 14px; 12px spacing base; 14px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#080809`
border	`#141516`
text	`#868F97`
text_muted	`#53585D`
primary	`#868F97`
accent	`#479FFA`
link	`#479FFA`
secondary	`#D88036`
button_bg	`#000000`
button_text	`#FFFFFF`

Using these colors

Action color #000000 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #479FFA — one role, not several (the action color).
accent #479FFA — accent for emphasis — keep it rare on the page.
primary #868F97 — ≈ the text color — a foreground/text color, not an action color (action = #000000).
secondary #D88036 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Calibre
Body: Calibre
h1: 54px
h2: 26px
body: 14px

Spacing

base unit: 12px
scale: 6px, 12px, 18px, 24px, 36px, 48px, 72px, 96px

Radii

base: 14px
button: 99px

Shadow

rgba(0, 0, 0, 0.12) 0px 30.0444px 16.2444px 0px, rgba(0, 0, 0, 0.07) 0px 15.6px 8.2875px 0px, rgba(0, 0, 0, 0.04) 0px 6.35556px 4.15556px 0px

Motion

Micro-interactions run at 600ms (dominant) with ease-out.

durations: 600ms · 350ms · 400ms
easings: ease-out · cubic-bezier(0.16, 1, 0.3, 1)
animated properties: background-size, gap

Native design tokens

Token	Value
`--ink`	`#595959`
`--ink-bright`	`#1c1c1c`
`--ease`	`cubic-bezier(0.16, 1, 0.3, 1)`

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

nav: 108px absolute

Motion choreography (measured)

Load order: div → span.lead → span.word×83 → a.link×5 → img.signatures

Responsive (measured)

mobile (390px): nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Dark fintech investing app landing with product UI hero and scrolling feature reveals