Design a dark-mode web interface screen: deep-navy financial telemetry illuminated by progressive emerald, cyan, and sapphire radial glows.
LAYOUT
The viewport is configured as an asymmetrical fixed-rail layout: a narrow 240px dark sidebar pinned to the left, and a multi-tiered workspace occupying the remaining canvas. The main workspace flows top-to-bottom: header utility row with personalized greeting and quick actions, a three-column horizontal priority roadmap, a split two-column data tier (65% portfolio metrics, 35% recent transactions), and a full-width bottom alert banner. Horizontal grid gaps are rigorously locked to 20px, preserving structured vertical rhythm.
PALETTE (use these exact hex values)
- #080d18 — Canvas Deep Void: Global application viewport background behind sidebar and workspace
- #0d1527 — Card Navy Surface: Background fill for all modular dashboard panels and metric containers
- #19243a — Subtle Border Line: Delicate 1px outline isolating cards, active pill states, and dividers
- #0a101f — Sidebar Elevated Surface: Persistent left navigation column background container
- #ffffff — Text Primary White: Primary headings, major financial balances, and selected active labels
- #8493a8 — Text Muted Slate: Secondary labels, inactive navigation links, timestamps, and captions
- #10b981 — Foundation Emerald: Priority stage one radial indicator, badge, and positive delta values
- #06b6d4 — Wealth Cyan: Priority stage two illumination, line graph trajectory, and bond asset slice
- #3b82f6 — Freedom Blue: Priority stage three radial background and majority stock allocation category
- #1f173b — Insight Plum: Subtle atmospheric tinted banner fill for automated AI notifications
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 30px display. Tracking -0.02em at display sizes, 0.01em at caption. The typography is clean, analytical, and authoritative, perfectly encapsulated by Plus Jakarta Sans. Its rounded geometrical forms provide warmth and modern fin-tech accessibility while maintaining supreme legibility across dense tabular financial numbers. When deploying fallback fonts like Inter, ensure tabular figure features are activated to maintain ledger alignment.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved entirely through chromatic luminance stepping and translucent hairline borders rather than blurred drop shadows. Base canvas sits at #080d18, elevating to #0d1527 for panels, with actionable controls rising to #152037. Subtle backlighting emerges via soft radial gradients positioned beneath key iconography to indicate prominence without physical elevation.
IMAGERY
The design eschews photographic raster assets in favor of ultra-clean, minimalist line-art glyphs set within illuminated circular badges. Vector iconography is strictly monochromatic or two-tone with consistent 1.5px stroke weights. Any real-world photography or busy 3D renders would break the sleek, data-first terminal aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the trio of sequential roadmap cards featuring atmospheric radial glow halos (emerald, cyan, and royal blue) that anchor the upper fold. Each halo softly illuminates a geometric line icon beneath a floating circular stage number, turning dry financial setup tasks into an alluring, gamified onboarding journey. If replaced with flat gray containers, the interface loses its distinctive premium fintech glow.
MUST
- Use hairline 1px strokes in #19243a on all card containers to guarantee separation on deep black-blue canvases.
- Restrict neon accents strictly to functional data tokens: emerald for positive performance, cyan for active curves.
- Render currency balances in bold weight 700 with tabular figure alignment to avoid decimal jitter.
- Maintain high internal card padding of 24px to give financial telemetry breathing room.
AVOID
- Do not introduce sharp card corners; maintain a strict 16px radius throughout primary dashboard widgets.
- Never use solid neon backgrounds for buttons or cards; keep fills dark (#152037) and text illuminated.
- Do not drop drop-shadows with black spread; use subtle colored glow or border luminance instead.
- Avoid multi-colored text headlines; maintain pure #ffffff for typography titles across dark surfaces.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3616:2272. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
