Design a light-mode web interface screen: clay-morphic financial optimism meets corporate dashboard rigor on a high-contrast split canvas.
LAYOUT
The screen uses an asymmetrical, two-zone application wrapper. A persistent 240px dark sidebar anchors the left boundary, freeing the remaining width for a light, airy SaaS landing experience. The upper zone features a minimalist top navigation bar with text links and a secondary CTA, followed by a balanced two-column hero: typographic pitch and feature list on the left, sprawling 3D showcase on the right. The composition resolves at the base with a full-width floating four-column financial metric strip.
PALETTE (use these exact hex values)
- #0e1726 — Obsidian Sidebar: structural backdrop for the persistent left vertical navigation bar and account profile
- #ffffff — Canvas White: primary background canvas across the hero stage, headers, and floating metric containers
- #2f69fe — Electric Royal: primary interactive CTA fill, headline accent color, and high-emphasis active UI states
- #111827 — Deep Slate: dominant high-contrast color for display headers, primary titles, and numerical metrics
- #64748b — Muted Slate: secondary body descriptions, inactive navigation labels, and muted metric subtitles
- #edf4ff — Soft Ice Blue: background fill for feature icon containers, category pills, and subtle tag outlines
- #10b981 — Growth Green: sparklines, positive indicator percentages, and upward growth trajectory chips
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers a brisk, hyper-modern, and technically credible personality suited for digital wealth management. Its rounded terminals soften corporate rigidity while high x-height maintains sharp legibility at micro sizes like 11px and 13px. Inter or DM Sans function as flawless zero-cost substitutions without disrupting letterform rhythm.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through high-contrast layering and soft ambient occlusions rather than sharp borders. The left navigation panel serves as a grounded zero plane, while the bottom metric widget floats gently over the white canvas via a wide, low-opacity drop shadow (0 16px 36px -8px rgba(15, 23, 42, 0.08)). The central 3D illustration provides the illusion of volumetric depth through clay-like diffuse lighting and soft contact shadows under the smartphone chassis.
IMAGERY
The imagery language centers on glossy 3D clay-morphic illustration rendered from an axonometric perspective. It showcases clean financial metaphors—cylindrical coin stacks, upward zig-zag arrows, miniature humans in business casual poses, and translucent floating UI cards on top of a phone screen. Natural photographic textures or raw un-rendered vector clip-art are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display title ('Online' in charcoal, 'Investment' in electric blue) poised directly across from a glossy isometric smartphone ecosystem. Removing the bright 3D asset reduces the site to an ordinary dashboard, while stripping the dual-colored header destroys the primary marketing entry point.
MUST
- Reserve electric royal blue (#2f69fe) exclusively for the primary CTA, the active nav tab, and headline focal points.
- Maintain strict separation between the dark slate sidebar (#0e1726) and the pure white content canvas.
- Use soft ice-blue (#edf4ff) rounded containers to house small feature iconography.
- Pair positive financial metrics with emerald green (#10b981) upward-pointing indicators and delicate sparklines.
AVOID
- Do not apply heavy dark borders or black drop shadows around metric cards or buttons.
- Never replace the high-gloss 3D clay isometric hero artwork with flat 2D line art or stock photography.
- Avoid using saturated accent colors (yellow, pink) for interactive buttons; keep them inside the illustration palette.
- Do not lighten the sidebar to medium grey; the stark contrast between obsidian and white is foundational.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
