Design a light-mode mobile app interface screen: refined editorial wealth management layered over mist-softened peaks and rich port-wine leather tones.
LAYOUT
The interface follows an editorial top-to-bottom rhythm starting with an open photographic breathing space holding user greeting and alerts. This immediately descends into an elevated hero card spanning full content width, followed by a side-by-side modular split ledger section ('Recent Activity' and 'Top Contacts') aligned on equal baselines.
PALETTE (use these exact hex values)
- #F4F6F8 — Canvas Ice: Background base tone blending into the misty landscape photography
- #FFFFFF — Card White: Background for lower content module cards and pill button backdrops
- linear-gradient(135deg, #4A222E 0%, #2A171F 100%) — Port Plum Gradient: Primary focus balance card surface, creating prestige contrast
- #1A1A1A — Deep Onyx: High-contrast headings, names, and principal financial numbers
- #767E86 — Slate Smoke: Subheadings, greetings, timestamps, and secondary labels
- #D8A4A9 — Rose Spark: Trendline sparkline, dot indicator, and hero stat highlights
- #FBF6F6 — Muted Icon Blush: Background fill for outline action and category icons
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Bodoni MT, Didot), weights 400/600. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 38px display. Tracking -0.02em. The voice is that of a private swiss family office or bespoke concierge bank. The high-contrast Didone serif commands absolute trust and legacy, while the stark, hyper-legible sans-serif anchors the application in modern high-precision software. If Playfair Display is unavailable, Cormorant Garamond or Freight Display provides the requisite high-fashion elegance.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 10px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled delicately through low-contrast, highly diffused ambient drop shadows (rgba(26, 30, 36, 0.05) with 20px blur) beneath pure white cards. The hero card uses tonal dominance rather than dramatic drop shadows to project physical presence above the misty canvas.
IMAGERY
Photography consists of washed, desaturated mountain peaks under cool misty sunlight that gently bleeds into the canvas tone. Avoid saturated outdoor photography, urban skylines, or vibrant human-centric stock; tone should remain tranquil, cold, and spacious.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of misty alpine photographic skybox bleeding into an unapologetically luxurious dark plum financial ledger card with delicate rose trend lines. To execute correctly, ensure the image fades entirely to background hex (#F4F6F8) before reaching card margins; never abruptly clip the top photo.
MUST
- Pair a luxury high-contrast serif font for numbers and titles with a crisp neutral sans for utility.
- Use deep wine/plum dark cards to establish premium financial exclusivity against light backgrounds.
- Soft-blend atmospheric landscape imagery into the top canvas without hard clipping borders.
- Maintain 20px corner radii consistently on all major elevated card containers.
AVOID
- Never use generic neon blue or high-saturation fintech green for status or trend indicators.
- Do not set small metadata, subheadings, or transactional lists in serif typography.
- Avoid heavy drop shadows with high opacity; keep elevation ambient, soft, and diffuse.
- Do not make cards edge-to-edge; preserve 16-20px side margins across mobile viewports.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub