Financial Planner - Design Specification

Design Principles

1. GitHub's Dark Mode Excellence

Deep charcoal background with carefully calibrated contrast ratios ensures comfortable extended viewing. Text hierarchy is maintained through weight and color variations rather than decorative elements.

2. JetBrains' Data Visualization

Financial data is presented with clinical precision. Charts and graphs use flat colors with strong borders for clarity. Green indicates growth/positive states, red for negative.

Logo

Color Palette

Deep Charcoal

#0D1117

Primary background, base layer

Dark Slate

#161B22

Cards, panels, elevated surfaces

Border Grey

#30363D

Borders, dividers, separators

Growth Green

#2ECC71

Positive values, growth, success

Primary Text

#C9D1D9

Body text, main content

Secondary Text

#8B949E

Labels, metadata, captions

Loss Red

#E74C3C

Negative values, losses, alerts

Warning Orange

#F39C12

Warnings, attention required

Typography

Financial Overview

SF Mono, 700 weight, 2.5rem

Account Summary

SF Mono, 600 weight, 2rem

Financial data requires exceptional clarity. All numbers are displayed in monospace fonts to ensure proper alignment and readability in tables and lists.

System UI, 400 weight, 1rem

$125,430.50

SF Mono, 400 weight, 0.95rem

UI Components

Action Buttons

Data Visualization Example

Savings

Investment

Emergency

Icon System

Growth

Time

Assets

Report