Design a light-mode web interface screen: deep navy navigation framing a luminous white workspace with playful isometric marketing vectors.
LAYOUT
The screen uses a fixed 72px dark navigation rail on the left, flanked by an expansive fluid workspace. The upper section is occupied by an asymmetric split hero (copy on left, character vector on right), transitioning directly into a four-column modular grid of analytical cards, concluded by a full-width linear workflow bar at the bottom.
PALETTE (use these exact hex values)
- #0d1829 — Sidebar Onyx: Deep structural dark background for the persistent icon-only left navigation rail.
- #f8fafd — Workspace Canvas: Light, subtle blue-tinted gray backdrop for the main application viewport.
- #ffffff — Card Surface White: Pure white surface for metrics panels, lists, workflow bars, and clean data groupings.
- #3b66f5 — Electric Cobalt: Dominant interactive color for primary buttons, active badges, and focus indicators.
- linear-gradient(135deg, #4f7eff 0%, #6377fd 100%) — Cobalt CTA Gradient: High-contrast hero callout card background promoting new project creation.
- #0f172a — Text Primary Slate: High-contrast headings, main hero statement, metric labels, and title strings.
- #64748b — Text Muted Slate: Secondary descriptors, subheadings, axis ticks, and passive icon tints.
- #10b981 — Trend Emerald: Positive percentage trend indicators and conversion performance badges.
- #eef2f7 — Border Subtle: Dividing lines between sections, step connectors, and card perimeters.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 46px display. Tracking -0.03em at display, 0 at body. Plus Jakarta Sans delivers an energetic, modern tech-editorial tone with geometric clarity and tight letter-spacing in headline sizes. Its tall x-height ensures crisp legibility even down to 11px metadata stamps and badge kickers.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through low-contrast, highly diffused ambient drop shadows (rgba(15, 23, 42, 0.04) with 20px blur) paired with crisp 1px borders (#eef2f7). Overlay tooltips employ a dramatic dark solid fill (#0d1829) to cleanly lift key values off the chart plane.
IMAGERY
Imagery consists of polished vector character art featuring flat pastel shapes, soft gradients, and expressive narrative storytelling (e.g., aiming at an idea target). Photorealistic imagery or busy raster graphics are strictly avoided to preserve the bespoke editorial aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of an ultra-dark navy navigation spine against a bright, airy landing-style hero that bleeds effortlessly into a structured SaaS dashboard grid below. This bridges public marketing appeal with authenticated app utility in a single viewport.
MUST
- Anchor primary calls to action with solid cobalt #3b66f5 fills and white typography.
- Keep the persistent vertical rail strictly ultra-dark navy (#0d1829) for deliberate visual weight.
- Use 16px border-radius consistently on all content cards across the lower grid.
- Pair rich display typography with soft 14px descriptive body copy in muted slate (#64748b).
AVOID
- Do not introduce sharp 0px or 2px corners; every container relies on 10px to 20px curves.
- Avoid heavy dark borders; cards should separate through background contrast and #eef2f7 outlines.
- Never replace the whimsical hand-drawn style illustration with photorealistic imagery.
- Do not crowd the hero area; maintain at least 48px breathing room around the display typography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
