---
name: Copilot Money
description: "Exemplary dark mode design that balances premium aesthetics with functional clarity for financial data"
version: alpha

colors:
  background: "#000F24"
  primary: "#FFFFFF"
  secondary: "#11263B"
  tertiary: "#1C6CFF"
  neutral: "#597CAA"
  bg-soft: "#F5F7FA"
  line: "rgba(0,0,0,0.07)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 600
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A premium personal finance app that aggregates accounts, spending, and investments into a single, beautifully organized view.

*A sleek, dark-themed financial cockpit for personal wealth management*

## Colors

Deep navy dark mode with crisp white typography and vibrant blue accents for primary actions

- **Background (`#000F24`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#11263B`)** — uses `ink-soft` token
- **Accent (`#1C6CFF`)** — uses `accent` token
- **Muted (`#597CAA`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.07)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** sans-serif

- Display text uses tight letter-spacing for impact
- Body text maintains comfortable line-height for readability
- Numerical data uses consistent weight for visual hierarchy

## Layout

Flexible grid that collapses to single column on mobile with stacked cards

*Rhythm:* Consistent 4px grid system with generous whitespace for premium feel

## Elevation & Depth

- 0 3px 5.4px -3px rgba(0,0,0,0.05)
- 0 4px 10.4px -2px rgba(0,0,0,0.04)
- Inset shadows for depth on buttons and cards
- Borders: Subtle 1px borders with low opacity for card definitions

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded pill-shaped primary buttons with blue background and white text
- **card:** Light background cards with subtle shadows and rounded corners on dark sections
- **chip:** Category tags with pill shape and vibrant colors for different spending categories
- **input:** Clean input fields with subtle borders and rounded corners
- **hero:** Full-width dark background with large typography, floating 3D category pills, and centered CTA

## Do's and Don'ts

**Don't:**
- Don't use bright white backgrounds on dark sections — screenshot shows dark navy background (#000F24) with light text
- Don't use multiple accent colors for primary CTAs — screenshot shows single blue (#1C6CFF) for all main buttons
- Don't use decorative fonts for headlines — screenshot shows clean geometric sans-serif typefaces
- Don't clutter the interface with dense information — screenshot shows generous whitespace and card-based layout
- Don't use sharp corners on interactive elements — screenshot shows rounded corners (24px) on buttons and cards
- Don't use low-contrast text for important information — screenshot shows high contrast white text on dark backgrounds
- Don't add unnecessary borders to card components — screenshot uses subtle shadows instead of hard borders

---

## System Prompt (paste into AI agent)

```
This is a premium fintech application for personal finance tracking and wealth management. The design DNA features a deep navy dark mode (#000F24) as the primary background, with crisp white typography for high readability. The accent color is a vibrant blue (#1C6CFF) used for primary actions like the 'Get started' button. Typography uses geometric sans-serif fonts for headlines and humanist sans-serif for body text, maintaining a clean, modern aesthetic. The layout employs generous whitespace, rounded corners (24px radius), and card-based components with subtle shadows. Critical donts include: never use bright white backgrounds on dark sections, avoid multiple accent colors for CTAs, don't use decorative fonts, and maintain generous spacing between elements. The interface prioritizes clarity and organization, reflecting the product's core value proposition of making financial data 'beautifully organized'.
```