# Copilot Money · Design system migration spec

> Source: https://copilot.money  ·  Curated by OpenDesign  ·  en

> Exemplary dark mode design that balances premium aesthetics with functional clarity for financial data

## 1. Identity DNA

Copilot Money operates as a sleek, dark-themed financial cockpit for personal wealth management. The system is built on a deep navy dark mode with crisp white typography, establishing an environment of focused control and premium clarity for personal finance, wealth tracking, and minimalist organization.

**One-liner:** A premium personal finance app that aggregates accounts, spending, and investments into a single, beautifully organized view.
**Keywords:** personal finance · wealth tracking · minimalist · organized
**Analogy:** A sleek, dark-themed financial cockpit for personal wealth management

## 2. Color

The palette is anchored in a deep navy dark mode with white text for maximum contrast and legibility. A single, vibrant blue accent is reserved exclusively for primary actions, creating a clear visual path for user decisions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000F24` | main background |
| `--bg-soft` | `#F5F7FA` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#11263B` | secondary text |
| `--muted` | `#597CAA` | placeholder |
| `--accent` | `#1C6CFF` | single accent |
| `--line` | `rgba(0,0,0,0.07)` | divider |

**Color principle:** Deep navy dark mode with crisp white typography and vibrant blue accents for primary actions

The principle is restraint; a limited, high-contrast palette serves clarity and directs attention to what matters.

## 3. Typography

Typography employs clean geometric sans-serif typefaces for headlines and humanist sans-serif for body text, creating a distinct visual hierarchy. Display text uses tight letter-spacing for impact, while body text maintains comfortable line-height for extended reading of financial data.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.95 | 600 | -2px | Hero headlines on dark background |
| heading | 32px | 1.2 | 500 | -0.5px | Section titles in UI cards |
| body | 16px | 1.4 | 400 | 0px | Paragraph text and descriptions |

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

## 4. Spacing

A consistent 4px grid system provides the foundational rhythm, with generous whitespace applied deliberately to foster a premium feel and prevent visual clutter.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 px
- **Rhythm:** Consistent 4px grid system with generous whitespace for premium feel

## 5. Surfaces

Depth is achieved through layered, translucent shadows and subtle inset effects rather than heavy borders. Components like cards and buttons use a light background on dark sections, defined by soft shadows and consistent rounded corners.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is a flexible, card-based grid that holds generous whitespace and collapses cleanly to a single column on mobile. It prioritizes scannable, organized information over dense presentation.

- **Container max:** 1200px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy favors smooth, purposeful transitions over distraction. All interactive elements respond with consistent 0.4s cubic-bezier easing, while subtle floating animations on category pills and data visualizations provide gentle feedback.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements
  - Floating category pills with gentle animation
  - Chart data points with subtle movement

- **Hover:** Color transitions with 0.4s duration for links and buttons
- **Click:** Immediate visual feedback with subtle scale or opacity changes
- **Transition:** All transitions use cubic-bezier easing for smooth, natural feel
- **Keyboard:** Standard focus states with visible outlines for accessibility

## 8. Voice & Don'ts

The voice is confident, clear, and reassuring, matching the product's promise of organized simplicity. Copy uses short, punchy headlines and action-oriented calls-to-action, deliberately avoiding financial jargon and aggressive sales language.

- **Tone:** Confident, clear, and reassuring about financial organization
- **Headline style:** Short, punchy statements that emphasize simplicity and control
- **CTA style:** Action-oriented with 'Get started' as primary call-to-action
- **Avoid:** Overly technical financial jargon / Aggressive sales language / Complex multi-word value propositions / Unclear or vague feature descriptions

### Don'ts
- ❌ 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

They deliberately avoid bright white backgrounds on dark sections, decorative fonts, dense interfaces, and hard borders, enforcing a strict standard for clarity and premium aesthetics.

## System Prompt (paste into AI tool)

```
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'.
```