Design a light-mode web interface screen: tactile neo-banking precision balanced across pristine paper surfaces and deep night sky panels.
LAYOUT
The hero section employs an asymmetric two-column structure: left-aligned marketing copy and twin CTA buttons balanced against an organic cluster of overlapping app previews on the right. The upper right corner is anchored by a deep navy backdrop block that breaks behind the floating elements. Below the hero, the content shifts to a clean 3-column split (recent transaction module, centered headline with CTAs, and a stacked feature list), underpinned by a balanced 4-column metrics footer.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Off-White: Global page canvas background providing soft contrast beneath pure white cards
- #FFFFFF — Surface White: Primary surface for interactive dashboard cards, popovers, and feature panels
- #0D1527 — Midnight Accent Panel: Deep navy background panel occupying the top-right hero sector to ground floating cards
- #2563EB — Royal Blue: Primary action triggers, active pill states, brand logo mark, and key chart accents
- #0F172A — Midnight Text: Headlines, high-prominence numerals, and primary data values
- #64748B — Muted Slate: Body paragraphs, subtitle metadata, inactive navigation items, and chart axes
- #10B981 — Positive Green: Income indicators, positive percentages, and security confirmation icons
- #F43F5E — Expense Rose: Expense metrics, negative values, spending alert indicators, and alert card icons
- #EFF6FF — Soft Blue Tint: Icon container backgrounds and subtle selected item containers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Manrope), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 38px heading, 54px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is ultra-modern, crisp, and authoritative, radiating tech-forward financial capability through tight geometric sans forms. Plus Jakarta Sans or Inter fits best due to its generous x-height, circular punctuation, and modern grotesque clarity. It communicates institutional trust while remaining friendly and approachable.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through subtle, layered ambient occlusion rather than heavy borders. Elevated white cards cast a wide, diffused shadow (0 12px 32px -8px rgba(15,23,42,0.06), 0 4px 12px -2px rgba(15,23,42,0.03)) that softens their contact with the canvas. The dark hero panel provides background contrast, allowing pristine white dashboard cards to physically appear layered on top of it.
IMAGERY
The design eschews photographic imagery in favor of high-fidelity vector UI representations of the actual product software. Avatars inside transaction lists are crisp, circular headshots clipped to 32px rounds. Any illustration must remain hyper-minimalist, flat, and vector-driven using the primary design system palette.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the floating, layered dashboard collage overlapping an asymmetric midnight-navy hero container on a split light canvas. This dynamic interplay makes the product look active and deep, immediately conveying desktop and mobile software capabilities before reading copy. Misusing it by placing standard stock imagery or centering a single flat screenshot destroys the bespoke SaaS atmosphere.
MUST
- Retain the sharp contrast between the off-white canvas and the deep asymmetric midnight-navy quadrant.
- Enclose all UI previews in clean, multi-layered white cards with generous 20px radius and soft ambient shadows.
- Use pastel icon containers (blue, green, rose) to establish quick scannability across list items.
- Keep typography tracking tight (-0.02em to -0.03em) on all headlines above 24px.
AVOID
- Never replace the high-contrast navy backdrop quadrant with a uniform white or light grey background.
- Do not use harsh 100% black shadows; keep elevation soft with low-opacity slate tones.
- Avoid sharp right-angled corners on cards, buttons, or avatar badges.
- Never style primary buttons with flat, low-contrast grey outlines; reserve blue for primary intent.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
