Design a light-mode web interface screen: deep-sea navigation meets tactile clay-rendered fintech floating on a luminous porcelain expanse.
LAYOUT
Structured around a persistent left rail navigation sidebar (approx. 240px wide) fixed to the viewport height. The main canvas flows from a global utility header into an asymmetrical two-column hero section (marketing proposition left, 3D asset right). Below sits a 4-column horizontal feature strip, which segues directly into a modular 4-column financial widget grid.
PALETTE (use these exact hex values)
- #080e1e — Midnight Sidebar Base: Anchors the fixed vertical navigation bar on the left boundary.
- #f4f7fb — Luminous Canvas: The primary background flooding the central content and hero area.
- #ffffff — Card Surface: Background for interactive dashboard widgets, search bar, and hero cards.
- #1d68ff — Cobalt Primary: Dominant interactive color for primary action buttons, active navigation states, and headline emphasis.
- #0f172a — Slate Ink Primary: Primary typography for hero headlines, monetary balances, and widget headers.
- #64748b — Slate Ink Muted: Secondary typography for supporting copy, card descriptions, labels, and timestamps.
- #10b981 — Emerald Gain: Positive financial metrics, percentage growth tags, and success badges.
- #e9edf5 — Subtle Border: Hairline separator lines on cards, input wrappers, and segmented widgets.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, SF Pro Display), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.03em at display, -0.01em at body. Clean, highly modern, and authoritative through Plus Jakarta Sans (or Inter). The heavy 800-weight display title conveys enterprise stability, while tabular figures in balance cards project financial precision without becoming sterile. Best maintained using standard modern sans-serifs with tight letter spacing.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Elevation is handled with profound restraint. Most cards sit on the #f4f7fb canvas separated only by crisp 1px borders (#e9edf5) and an ultra-diffuse box-shadow (0 4px 20px -2px rgba(15, 23, 42, 0.04)). The only true illusion of physical volume exists within the 3D clay-rendered hero elements.
IMAGERY
Features bespoke 3D clay-render models rendered in sky blue, royal blue, and pure gloss white, showcasing payment metaphors like credit cards, shopping totes, and physical coin stacks. Photographic assets are restricted strictly to micro circular customer avatars within transaction streams and social proof badges.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic visual division between the obsidian-deep sidebar (#080e1e) and the expansive porcelain workspace (#f4f7fb) punctuated by glossy cobalt 3D fintech artifacts. Misuse occurs when designers try to make the sidebar light, breaking the foundational visual weight and SaaS command-center feel.
MUST
- Anchor primary dashboard screens with the high-contrast midnight sidebar (#080e1e) against a cool porcelain canvas (#f4f7fb).
- Emphasize critical headline keywords using the primary cobalt tint (#1d68ff) over pure black.
- Maintain uniform 16px corner radii on all major dashboard surface cards.
- Use soft, tinted circular icon backdrops within cards rather than stark, heavy icon graphics.
AVOID
- Never use dark background panels for individual dashboard content cards; keep them pristine white (#ffffff).
- Do not allow heavy black dropshadows; use barely perceptible 4-8px blur ambient shadows with low opacity.
- Avoid sharp 0px or pill 9999px radii on functional content cards; preserve the disciplined 16px curve.
- Never replace the custom 3D isometric hero illustration with generic corporate photographic cutouts.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3728:2224. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
