Financial Planner

Design System Specification v1.0

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