Copilot Money — design system & UI screens

Fintech · 1 screen · 10 sections · copilot.money

Deep indigo/near-black landing page whose signature is a hero ringed by glossy 3D candy-colored pills labeled with spending categories (GROCERIES, DANCING, HOME, BABY, WEDDING) floating around the oversized headline "Your money, beautifully organized." The body alternates centered large-type statements with dark app-screenshot bento grids (spending tracker, charts, allocation cards) accented by lime-green performance lines and violet UI chrome; a centered single-price block ($7.92/mo with a Yearly/Monthly toggle) and a multi-column masonry testimonial wall reinforce social proof, and the pill motif returns as a decorative footer strip.

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/copilot-money.

Decoded design system

Copilot Money's decoded design system: background #000814, text #ECECEE, accent #1C6CFF, link #000814, primary #010D1E; type scale h1 148px / h2 64px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #1C6CFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000814`
surface	`#0E1521`
border	`#232A34`
text	`#ECECEE`
text_muted	`#92959B`
primary	`#010D1E`
accent	`#1C6CFF`
link	`#000814`
secondary	`#1C6CFF`
button_bg	`#1C6CFF`
button_text	`#000000`

Using these colors

Action color #1C6CFF — the single interactive color; only on things you click or must notice, never large fills.
primary #010D1E, link #000814 are visually the same color (Δ16) — treat as one role (the action color).
accent, secondary, button_bg are all #1C6CFF — one role, not several (the action color).
accent #1C6CFF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

Heading: Jokker Semibold
Body: Jokker
h1: 148px
h2: 64px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px, 24px

Radii

base: 0px
button: 16px

Shadow

rgba(0, 0, 0, 0.07) 0px 0.362176px 0.651917px -1.5px, rgba(0, 0, 0, 0.05) 0px 3px 5.4px -3px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0.07) 0px 0.362176px 0.651917px -1.5px, rgba(0, 0, 0, 0.05) 0px 3px 5.4px -3px

Motion

Micro-interactions run at 400ms (dominant) with cubic-bezier(0.44, 0, 0.56, 1).

durations: 400ms
easings: cubic-bezier(0.44, 0, 0.56, 1)
animated properties: color

Button states (measured)

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

Motion choreography (measured)

Scroll reveal: 15 elements rest at opacity 0, translateY(10px), animate in over 400ms.

Stagger: span ×15 — 50ms apart.

Responsive (measured)

breakpoints: 809px · 1199px · 1439px
mobile (390px): hero 49px · nav inline

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

Screens

Copilot Money fintech landing with 3D pill-cluster hero and dark feature bento grids