---
title: "Copilot Money design system"
variant: extended
source: https://www.copilot.money/
captured_at: 2026-10-12
theme: dark
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/copilot-money)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Copilot Money · Design System

> Calm, polished finance in a midnight interface

**Theme:** dark · **Industry:** fintech · **Source:** https://www.copilot.money/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A dark, spacious finance-app homepage balances oversized editorial headlines with detailed product screens and lively floating category pills. Bright blue calls to action and a single light product section punctuate the midnight canvas.

## North star

Keep the midnight canvas quiet and spacious, letting oversized type, precise product imagery, and selective blue actions carry the story.

## Overview

The visual identity is built on a nearly black navy canvas (#000814), with subtle shifts into deep blue surfaces (#010d1e) rather than heavy dividers. Large, pale headlines and thin, understated body copy create a quiet editorial hierarchy; the hero headline is particularly oversized and tightly composed. Bright blue appears selectively in the announcement strip, primary actions, and interface highlights, while muted blue-gray links and captions keep secondary information restrained. Layout moves from a centered hero into spacious product demonstrations, then briefly reverses to a white wealth-tracking section before returning to dark pricing and testimonials. Product UI screenshots provide dense detail against the open page, while colorful floating category pills add a playful accent around the hero. Rounded controls, cards, and section corners soften the otherwise crisp, dark composition. Treat saturated colors inside screenshots and floating mockup labels as product imagery, not as the page’s core palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#000814` | `--color-midnight-canvas` | brand | Dominant page canvas and recurring dark section background. |
| Slate Link | `#597caa` | `--color-slate-link` | accent | Muted blue link text, including navigation and secondary text links. |
| Soft Alloy | `#e6e7e9` | `--color-soft-alloy` | neutral | Primary pale text for prominent headings, body copy, and key links. |
| Deep Surface | `#010d1e` | `--color-deep-surface` | surface | Dark section and card surface; blends into the canvas through blue gradients. |
| Navy Action | `#012464` | `--color-navy-action` | accent | Measured background on Get started buttons; screenshot shows a vivid blue treatment. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Light product section, interface cards, and selected inverse text. |
| Electric Blue | `#1c6cff` | `--color-electric-blue` | accent | Bright CTA and blue interface accents; also appears in the top announcement band. |
| Quiet Steel | `#7f8ba4` | `--color-quiet-steel` | neutral | Muted supporting text and subdued details on dark backgrounds. |
| Blue Haze | `#42618c` | `--color-blue-haze` | accent | Secondary muted blue text and restrained accent details. |
| Night Slate | `#11263b` | `--color-night-slate` | surface | Occasional dark blue text or interface detail; not a dominant page color. |
| Cloud White | `#f9fafb` | `--color-cloud-white` | surface | Pale gradient color used in the light section treatment. |
| Cool Silver | `#cccfd2` | `--color-cool-silver` | neutral | Secondary pale text detail, especially within compact interface imagery. |
| Growth Green | `#00cc4b` | `--color-growth-green` | semantic | Positive investment and spending indicators inside product interface imagery. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Text or detail within inverse product cards; not a primary page color. |
| Abyss Blue | `#01122d` | `--color-abyss-blue` | surface | Deep blue gradient layer behind dark product and page surfaces. |
| Signal Coral | `#ff4433` | `--color-signal-coral` | semantic | Negative market or transaction indicator appearing within product imagery. |

### Semantic aliases

`--color-canvas` → `#000814` (Midnight Canvas) · `--color-surface` → `#010d1e` (Deep Surface) · `--color-surface-2` → `#ffffff` (Clean White) · `--color-text` → `#e6e7e9` (Soft Alloy) · `--color-text-muted` → `#7f8ba4` (Quiet Steel) · `--color-text-subtle` → `#42618c` (Blue Haze) · `--color-accent` → `#597caa` (Slate Link) · `--color-accent-2` → `#1c6cff` (Electric Blue) · `--color-accent-3` → `#42618c` (Blue Haze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6e7e9` | `#000814` | 16.24:1 | AAA |
| `#e6e7e9` | `#010d1e` | 15.75:1 | AAA |
| `#e6e7e9` | `#ffffff` | 1.24:1 | fail |
| `#7f8ba4` | `#000814` | 5.87:1 | AA |
| `#7f8ba4` | `#010d1e` | 5.69:1 | AA |
| `#7f8ba4` | `#ffffff` | 3.42:1 | AA-large |
| `#42618c` | `#000814` | 3.18:1 | AA-large |
| `#42618c` | `#010d1e` | 3.08:1 | AA-large |
| `#42618c` | `#ffffff` | 6.32:1 | AA |
| `#597caa` | `#000814` | 4.68:1 | AA |

### Gradients

- `linear-gradient(rgb(1, 13, 30) 0%, rgb(0, 8, 20) 100%)`
- `linear-gradient(160deg, rgb(249, 250, 251) 0%, rgb(246, 247, 249) 100%)`
- `radial-gradient(79% 75% at 79% 82.5%, rgb(0, 15, 36) 0%, rgb(0, 13, 31) 100%)`
- `radial-gradient(79% 75% at 79% 82.5%, rgb(1, 18, 45) 0%, rgb(0, 15, 36) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter Variable Thin | `--font-body` | webfont | 100 | Main body and supporting copy | Inter |
| Jokker Medium | `--font-display` | webfont | 500 | Navigation, links, and medium-weight headings | DM Sans |
| Jokker Semibold | `--font-jokker-semibold` | webfont | 600 | Hero and section headlines | DM Sans |
| Jokker Regular | `--font-jokker-regular` | webfont | 400 | Regular-weight supporting interface copy | DM Sans |
| Matter-TRIAL SemiBold | `--font-matter-trial-semibold` | webfont | 670 | Eyebrows and uppercase labels | Inter |

- **Matter Variable Thin:** Very light weight gives supporting text an airy feel; use restrained tracking and sentence case.
- **Jokker Medium:** Use for clear navigation and compact link labels; retain normal case.
- **Jokker Semibold:** Strong, clean headline weight; large display type is tightly set, with no forced uppercase.
- **Jokker Regular:** Reserve for compact product and interface text where a neutral, legible tone is needed.
- **Matter-TRIAL SemiBold:** Measured as uppercase with wide tracking; use sparingly for short labels.

### Type scale — Golden Ratio (ratio ≈ 1.56, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 148px | 600 | 0.9 | -0.02em | — | Jokker Semibold | Oversized hero headline with tightly set lines. |
| h1 | 64px | 600 | 1.05 | 0 | — | Jokker Semibold | Primary page headline and major campaign statement. |
| h2 | 32px | 500 | 1.2 | 0 | — | Jokker Medium | Feature and section headlines. |
| h3 | 28px | 670 | 1 | 0.04em | uppercase | Matter-TRIAL SemiBold | Uppercase eyebrow labels and short section markers. |
| h4 | 24px | 600 | 1.2 | 0 | — | Jokker Semibold | Smaller feature titles and card headings. |
| body | 16px | 100 | 1.4 | 0 | — | Matter Variable Thin | Light-weight explanatory copy beneath headlines. |
| caption | 15px | 100 | 1.2 | 0.01em | — | Matter Variable Thin | Compact image captions and supporting details. |
| link | 16px | 500 | 1.4 | 0 | — | Jokker Medium | Navigation items and secondary text links. |
| eyebrow | 28px | 670 | 1 | 0.04em | uppercase | Matter-TRIAL SemiBold | Uppercase section labels, used sparingly. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"ss07"`, `"blwf", "cv03", "cv04", "cv09", "cv11", "ss07"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40 px.
- Section rhythm 64px · element gap 8px · card padding 7px · max content width 1360px.

The measured page max width is 1360px, with a comfortable density and a modular four-column footer. The hero is centered, framed by floating labels, while later feature and pricing sections pair headings with wide product-interface images. Large section gaps establish a slow, premium rhythm; compact spacing is reserved for interface details and navigation. A broad light section interrupts the dark sequence, and rounded section edges make the transition feel intentional. Keep content aligned to a consistent central page frame rather than stretching every text block edge to edge.

## Shape & elevation

- Radius: button `17px` · card `40px` · media `50%` · link `16px` · xs `6px` · sm `8px` · md `12px` · lg `14px` · xl `16px` · 2xl `17px` · pill `9999px`
- Shadow `inset` (card): `rgba(255, 255, 255, 0.16) 0px 24px 64px -12px inset, rgba(0, 0, 0, 0.16) 0px -24px 40px -12px inset, rgba(255, 255, 255, 0.16) 0px 0.636953px 1.14652px -0.5px inset, rgba(255, 255, 255, 0.17) 0px 1.93`
- Shadow `sm` (card, link, button): `rgba(0, 0, 0, 0.07) 0px 0.362176px 0.651917px -1.5px, rgba(0, 0, 0, 0.05) 0px 3px 5.4px -3px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.03) 0px 0.482901px 1.25554px -1px, rgba(0, 0, 0, 0.04) 0px 4px 10.4px -2px`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.16) 4px 4px 16px -4px inset, rgba(0, 0, 0, 0.2) -4px -4px 16px -4px inset, rgba(255, 255, 255, 0.08) 4px 4px 8px 0px inset, rgba(255, 255, 255, 0.4) 1px 1px 1px -0.5px inset`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.12) 0px 0.83px 1px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page favors layered product imagery and dark tonal contrast over visible outlines or hairlines. Cards and device screens sit subtly above the canvas with restrained shadows; some measured cards use inset highlights for a glassy, dimensional impression. Use rounded card and control shapes, but avoid adding strong borders or generic drop shadows.

## Imagery

Product screenshots and device mockups are the main visual evidence, showing finance dashboards, charts, transactions, and investment views. They sit against dark backgrounds as detailed interface showcases rather than decorative photography. The hero adds colorful, soft-focus floating category pills around the headline; treat them as dimensional product illustration. Testimonials use compact review cards, while the closing CTA groups desktop, tablet, and phone screens.

## Components

### Announcement strip

A vivid blue full-width band sits at the very top with a centered assistant message and a small close control.

### Primary CTA

Rounded Get started actions stand out in blue or pale inverse treatment; keep labels short and contrast strong.

### Product showcase

Wide desktop dashboard screenshots are paired with phone mockups to show the app across devices.

### Feature heading

Centered pale headline introduces a product benefit, with concise supporting copy nearby.

### Light wealth section

A broad near-white panel contrasts with dark sections and contains portfolio UI and green performance marks.

### Review cards

Dense dark testimonial tiles use small author details and rating marks, arranged as a multi-column collage.

### Footer navigation

Compact multi-column link groups sit on the dark canvas beside the brand mark and privacy details.

### Measured component styles

- **Primary button** (“Get started”): background #012464 · text #0000ee · radius 17px · padding 1.5px · 400 12px sans-serif
- **Secondary button** (“Create”): background #1c6cff · text #000000 · radius 16px · padding 12px 16px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.07) 0px 0.362176px 0.651917px -1.5px, rgba(0, 0, 0, 0.05) 0px 3p
- **Link** (“Overview”): transparent background · text #597caa · radius 0px · padding 0px · 500 16px Jokker Medium
- **Card** (“AAPL Apple 1.91% 1.91%”): background #ffffff · text #000000 · radius 20px · padding 14px 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.07) 0px 0.362176px 0.651917px -1.5px, rgba(0, 0, 0, 0.05) 0px 3p

## Do

- Use #000814 as the dominant canvas.
- Set major headings in pale, confident display type.
- Reserve vivid blue for announcements and primary actions.
- Show product screens as detailed, layered evidence.
- Use generous section breaks between major stories.
- Keep supporting copy muted and visually secondary.

## Don't

- Do not turn the whole page into a bright interface.
- Do not add frequent borders to separate sections.
- Do not use saturated mockup colors as the core palette.
- Do not make every heading uppercase.
- Do not crowd the hero with explanatory copy.
- Do not flatten device imagery into generic illustrations.

## Agent prompt

Build a new finance product page in Copilot Money’s style. Use Midnight Canvas (#000814) across most of the page, with Deep Surface (#010d1e) and Abyss Blue (#01122d) for subtle depth. Set large, pale headlines in a clean, confident sans; keep body copy light and secondary. Use Electric Blue (#1c6cff) selectively for announcement and CTA emphasis, while Slate Link (#597caa) handles restrained links. Compose a centered hero with a bold headline, short supporting copy, and dimensional floating category labels. Follow with spacious feature sections featuring authentic-looking finance dashboards and device mockups. Include a single Cloud White (#f9fafb) or white portfolio section for contrast, then return to dark surfaces. Keep cards rounded, layering subtle, and dividers minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim announcement strip above a horizontal navigation row, followed by a centered hero. | Announcement link, Primary sign-up action, Close announcement | Bright blue top band, Dark canvas, Centered oversized headline, Floating category pills |
| 2 | footer | Dark footer with four link columns, brand and privacy details, and surrounding device imagery. | Grouped destination links, Privacy choices, Social links | Four-column link grid, Small muted text, Brand icon, Dark canvas |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/copilot-money