Midnight Banking Dashboard

Midnight Banking Dashboard mockup preview
Click to expand

Midnight Banking is a dark-first design system for personal banking and fintech dashboards. Its foundation of deep midnight navy creates a calm, premium canvas against which gradient account cards and warm financial-product cards become the visual focal points. Status colors lean confident: a soft mint green for incoming amounts, a coral red for outgoing. The system prioritizes scannability of monetary values, clear separation between primary actions and informational content, and a polished, modern aesthetic appropriate for high-trust financial flows.

Text Primary#FFFFFF
Text Secondary#B9BBC7
Text Tertiary#6A7178
Neutral 4#DEE2E6
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Page & Surfaces

Foreground / Text

Status / Signed Amounts

Account Card Gradients

Financial-Product Card Gradients

Typography

DisplayInter · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1 / Page TitleInter · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2 / Section TitleInter · 16px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Card TitleInter · 16px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SubtleInter · 13px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

MicroInter · 11px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Mono NumericJetBrains Mono · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

Midnight Banking is a dark-first design system for personal banking and fintech dashboards. Its foundation of deep midnight navy creates a calm, premium canvas against which gradient account cards and warm financial-product cards become the visual focal points. Status colors lean confident: a soft mint green for incoming amounts, a coral red for outgoing. The system prioritizes scannability of monetary values, clear separation between primary actions and informational content, and a polished, modern aesthetic appropriate for high-trust financial flows.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Chips

NeutralSuccessErrorInfo

Elevation & Depth

Tile Shadow
Card Shadow Big
Modal Shadow

Do's & Don'ts

Do

Keep the page background as the deepest tone — surfaces and cards always step lighter, never darker.
Reserve gradient cards for primary financial entities (accounts, loans, goal CTAs). Don't use gradients for transactional rows or list items — they lose emphasis when overused.
Color-code monetary amounts: green for inbound, red for outbound. Apply the color to both the amount text and the icon container's tinted background.
Use JetBrains Mono (or any tabular-numeral font) for amount columns and account numbers. Misaligned digits in a banking dashboard are a credibility leak.
Lean on the deep ambient glow (Card Shadow Big) only on the gradient hero cards. On every other tile, use the gentle `Tile Shadow`.
Ensure every interactive element has a hover state — even on dark backgrounds. Brightening the surface (`--card-bg-hover`) is enough; avoid color-shifting hover states that change the meaning of the element.

Don't

Mix more than 3 different gradients in a single viewport. The vibrant gradients are accent moments, not wallpaper.
Use pure white (#FFFFFF) for body text against the dark backgrounds — soften to `--text-secondary` (#B9BBC7) for non-primary content; reserve pure white for headings, primary actions, and on-card titles.
Add hard borders between dark surfaces. Separation comes from background-color steps (#040D3F → #141C4E → #1D2552), not from strokes.
Use small radii (≤4px) anywhere. The system reads as 'premium fintech' because of consistent generous rounding (12px tiles, 16px cards, full-pill buttons).
Download .md
Narayana Swamy Narayana Swamy @nswamy14
License MIT
Uploaded 3 weeks ago
Version v1
File size 11.8 KB
Downloads 103
Copies 22
bold dark fintech premium saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/nswamy14/midnight-banking-dashboard and implement it in my code

Don't have the MCP? Install it here