№ copilot-money--pricing

Part of Copilot Money - 3 pages captured →

Copilot Money — Pricing

Deep indigo expanse with playful, rounded typography floating on soft, glowing gradients.

Bento Gridplayful minimalism dark mode fintechdark

The design uses a playful arrangement of rounded, colorful shapes to frame the central headline. The color palette is cool and muted, creating a sense of calm and organization. Typography is clean and modern, prioritizing readability. · fintech landing page, money management design, colorful ui, geometric shapes, modern finance, minimalist design, pastel colors

Copilot Money — Pricing - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Copilot Money — Pricing - full page scroll

Copilot Money — Pricing - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: pastel · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#1c6bfb
OKLCHoklch(57.3% 0.227 261)
RoleDominant
find sites →
Hex#0e2d66
OKLCHoklch(31.2% 0.107 261)
RoleSurface
find sites →
Hex#6a9dfc
OKLCHoklch(70.3% 0.150 262)
RoleInk
find sites →
Hex#7157a1
OKLCHoklch(51.6% 0.116 298)
RoleAccent
find sites →
Hex#bcc3d1
OKLCHoklch(81.6% 0.021 264)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Jokker Semibold	148px	600	0.9	-2.96px	Aa Bb Cc
h2	Jokker Medium	64px	500	1.2	0	Aa Bb Cc
h3	Jokker Semibold	24px	600	1.2	0	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #1c6bfb;
  --color-surface: #0e2d66;
  --color-ink: #6a9dfc;
  --color-accent: #7157a1;
  --color-detail: #bcc3d1;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Copilot Money — Pricing.
Reference design system (extracted from the live site):
- Palette: #1c6bfb, #0e2d66, #6a9dfc, #7157a1, #bcc3d1
- Typefaces: Jokker Semibold, Jokker Medium, sans-serif
- Macrostructure: Bento Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/copilot-money--pricing

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Jokker Semibold

148px

600

0.9

-2.96px

Aa Bb Cc

Jokker Medium

64px

500

1.2

Aa Bb Cc

Jokker Semibold

24px

600

1.2

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #1c6bfb; --color-surface: #0e2d66; --color-ink: #6a9dfc; --color-accent: #7157a1; --color-detail: #bcc3d1; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Copilot Money — Pricing. Reference design system (extracted from the live site): - Palette: #1c6bfb, #0e2d66, #6a9dfc, #7157a1, #bcc3d1 - Typefaces: Jokker Semibold, Jokker Medium, sans-serif - Macrostructure: Bento Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/copilot-money--pricing