Skip to content
Browse
Library

Copilot Money. A black canvas where a few candy-colored labels drift at playful angles, each glowing like an airport departure sign.

  • Finance
  • Dark theme
  • 19 colors
  • 3 typefaces

Copilot Money is a midnight-canvas finance app where the interface stays dark, quiet, and nearly monochrome while a playful parade of candy-colored category tags — groceries, baby, wedding, home — float at jaunty angles around the hero, providing the only visual noise the page allows. Typography is the other signature: body copy at weight 100 in Matter Variable Thin creates a whisper-thin, almost-printed-on-vellum feeling, while Jokker display headings at 148px deliver structural authority through sheer scale rather than weight. A single vivid blue (#1c6cff) punctuates the darkness as the only call to action. Surfaces are given depth through layered inset shadows rather than drop shadows — a neomorphic approach that keeps the UI feeling pressed into the dark plane rather than floating above it.

Visit copilot.money
Screenshot of Copilot Money
Captured from copilot.money on October 11, 2026

Copilot Money design system

Copilot Money

Brand1

  • Filled primary action buttons, active nav, brand mark tint — the one chromatic accent on a dark page

Accent9

  • Category tag fill — groceries, food, lifestyle tags in the floating constellation

  • Category tag fill — green budget / income / positive-flow labels

  • Category tag fill — home, utilities, warm-life-event tags

  • Category tag fill — personal, family, baby, gift tags

  • Category tag fill — entertainment, nightlife, going-out tags

  • Category tag fill — savings, goals, highlight tags

  • Category tag fill — travel, subscription, digital tags

  • Category tag fill — warm pink-red for fashion, health, personal care

  • Category tag fill — organic, grocery-adjacent, eco tags

Neutrals9

  • Page background, hero canvas, base layer of the dark plane

  • First elevated surface tier above the canvas — cards, panels, nav wells

  • Second elevated surface — deeper blue tint for nested containers and highlighted panels

  • Glow-tier surface for featured blocks, highlighted links, and deep elevation wells

  • Hairline border tone — divides dark surfaces at low contrast

  • Category tag fill — neutral-toned category tags (transit, bills, misc)

  • Helper text, tertiary captions, low-emphasis metadata

  • Muted secondary text, subtle hairline borders on quiet surfaces

  • Primary headings, body text, icon strokes, ghost-button borders, logo glyph

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper White on Signal Blue

4.53 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.