Design a light-mode web interface screen: split-screen dark telemetry married seamlessly to clean light marketing copy via fluid organic transitions.
LAYOUT
The macro frame is an encapsulated rounded app container (radius 24px) floating on an off-white field. The header spans the top edge, seamlessly bridging both light and dark halves. Below, a 40/60 split occurs: the left light panel houses headline, narrative copy, primary CTA, and feature checklist, while the right 60% contains a dense 3x2 grid of analytics cards resting on dark navy.
PALETTE (use these exact hex values)
- #FAFCFD — Canvas Light: Primary left marketing column background creating crisp, approachable readability
- #081627 — Deep Midnight Navy: Primary backdrop for the analytics dashboard and overarching hero container
- #0D2035 — Dashboard Panel Navy: Surface color for secondary telemetry cards and transaction modules
- linear-gradient(135deg, #009688 0%, #17B890 100%) — Teal Accent Gradient: Primary buttons, key metric lines, glow rings, and active toggle underlines
- #0A2540 — Primary Text Dark: Headline text, high-emphasis body text on the light canvas side
- #627D98 — Muted Slate Text: Paragraph description text and light-side feature list descriptions
- #FFFFFF — White High Contrast: Metric headings, card labels, and primary text on dark surface panels
- #20E2BA — Telemetry Cyan: Sparkline line charts, pie slices, and positive status highlights
- #6C5DD3 — Telemetry Violet: Category pie chart segments and secondary data series visualizations
- #EB5757 — Negative Red: Negative transaction outflows and down-trend indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,Urbanist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 52px display. Tracking -0.03em at display, 0 at telemetry. Clean, technical, yet highly human neo-grotesque (Plus Jakarta Sans or Inter). The tight tracking and strong weight in the 52px headline ('We have the solution') project institutional authority, while monoline numbers at small sizes guarantee instant dashboard scanability. It feels like high-tier enterprise software designed for contemporary consumers.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Elevation is achieved through tonal contrast rather than blur shadows. Dark navy cards (#0F243A) sit 1-2 shades lighter than the midnight base (#081627), punctuated by crisp 1px strokes. Glowing radial teal gradients (#00C49F with 20% opacity) behind hero illustration elements provide luminous atmospheric depth without standard box-shadow blur.
IMAGERY
Vector-based isometric financial motifs blended with flat, clean character illustration. Characters wear corporate casual apparel rendered in brand tones (teal, deep blue, purple) and interact physically with glowing interface nodes. Photorealistic imagery or generic corporate stock photos would break the bespoke aesthetic completely.
SIGNATURE DETAIL — the thing that makes this design itself
The swooping organic dual-canvas split: an asymmetrical curved light quadrant slicing across a deep navy dashboard viewport, physically bound together by a character interacting with a glowing circular validation badge.
MUST
- Retain the curved sweep separation between the white marketing surface and the dark dashboard.
- Use high-contrast white and cyan (#20E2BA) exclusively on deep navy dashboard tiles.
- Restrict large display typography to the light-themed left section.
- Apply 1px semi-transparent borders (#1A3653) on dark metric cards rather than drop shadows.
AVOID
- Never place dark text directly on the dark navy dashboard tiles.
- Do not use sharp 0px corners; all cards must respect the 16px radius.
- Avoid generic stock photography; preserve the stylized isometric and flat character illustration style.
- Do not allow dashboard cards to bleed over the marketing text hierarchy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3200:2576. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
