Premium Finance Dashboard

You are a Senior Product Designer at Apple, Stripe and Linear with 15+ years of experience.

Your task is to design a production-ready mobile Finance Dashboard Home Screen.

IMPORTANT:
Do NOT generate a generic dashboard.
Design something that looks like it belongs in a premium app with world-class visual hierarchy and micro interactions.

==========================
DEVICE
==========================

• Mobile only
• iPhone 16 Pro frame (393×852)
• Safe areas respected
• Rounded corners
• Responsive

==========================
DESIGN STYLE
==========================

Minimal Luxury

Mix of:

• Apple Human Interface
• ChatGPT mobile app
• Linear.app
• Stripe Dashboard
• Revolut
• Arc Browser

The UI should feel extremely premium.

No Material Design.

No Bootstrap look.

No Dribbble fantasy UI.

Everything must be realistic enough for production.

==========================
COLOR PALETTE
==========================

Background

#09090B

Cards

#151518

Primary

#FFFFFF

Secondary text

#A0A0AA

Accent Blue

#4F7BFF

Accent Purple

#7F5AF0

Success

#27D17F

Borders

rgba(255,255,255,.08)

Shadow

rgba(0,0,0,.4)

Use subtle gradients only.

No rainbow colors.

==========================
TYPOGRAPHY
==========================

Font

Inter

Weights

400
500
600
700
800

Large balance

42px

Heading

26px

Body

15px

Caption

12px

Perfect spacing.

==========================
LAYOUT
==========================

TOP

Greeting

Welcome back

Username

Profile image

Notification icon

-------------------------

Large Balance Card

Glassmorphism

Blur background

Soft border

Animated gradient glow

Balance

$12,543.90

Small subtitle

Available Balance

Below

Monthly increase

+12%

Green

-------------------------

Quick Actions

2x2 Grid

Send

Receive

Cards

Invest

Each icon inside rounded square

Animated on hover

Scale 1.06

Shadow increase

Ripple animation

-------------------------

Statistics Card

Modern SVG Line Chart

Blue → Purple gradient

Animated draw effect

Area fill

Current month

Weekly labels

Rounded corners

Small legend

Smooth tooltip

-------------------------

Recent Transactions

Modern list

Rounded cards

Merchant icon

Merchant name

Category

Amount

Positive green

Negative white

Chevron

Ripple effect

==========================
BACKGROUND
==========================

Dark

Subtle radial gradient

One blurred blue glow

One blurred purple glow

Extremely soft

Almost invisible

==========================
ANIMATIONS
==========================

Page load

Fade

TranslateY

40px

Duration

600ms

Stagger every card

100ms

Balance

Count-up animation

Chart

Line draws itself

Bars grow

Buttons

Scale

Ripple

Cards

Hover elevation

Profile image

Scale slightly

Glow

60 FPS animations only.

Use transform and opacity only.

==========================
COMPONENT STYLE
==========================

Border radius

28px cards

20px buttons

18px list items

Padding

24px

Gap

16px

Consistent 8pt spacing system.

==========================
SHADOWS
==========================

Large cards

0 20px 60px rgba(0,0,0,.35)

Small cards

0 8px 30px rgba(0,0,0,.18)

Glow

Blue

0 0 40px rgba(79,123,255,.18)

==========================
DO NOT
==========================

No Bootstrap

No Material UI

No flat icons

No ugly spacing

No random colors

No thick borders

No giant shadows

No gradients everywhere

No unrealistic Dribbble effects

No generic dashboard

==========================
OUTPUT
==========================

Create ONE complete production-ready HTML file.

Use only:

HTML

Modern CSS

Vanilla JavaScript

No external frameworks.

No Tailwind.

No Bootstrap.

No React.

No Vue.

Everything should be contained inside one HTML file.

The final UI should look like it was designed by Apple's design team and built by a senior frontend engineer.

The visual quality should be indistinguishable from a premium commercial finance app.