Design a dark-mode web interface screen: sleek deep-navy control room with focused spectral glows guiding sequential discovery.
LAYOUT
The interface is structured as an anchored dashboard with a permanent 240px dark sidebar on the left and a scrollable content area on the right. The top contains a utility bar with search and actions, followed by an overarching hero header with title and subtitle. Below sits the primary 3-stage process card spanning the full content width, underscored by a multi-column 'Template Overview' panel featuring micro-metrics and a live telemetry graph.
PALETTE (use these exact hex values)
- #040914 — Canvas Deep: Root background for the viewport and sidebar canvas
- #07101E — Surface Card: Background for dashboard panels and structured containers
- #0C192E — Surface Card Highlight: Active states, search input base, and inner widget surfaces
- #13233B — Border Subtle: Thin outlines defining card envelopes, inputs, and section boundaries
- #FFFFFF — Text Primary: Main headings, step titles, key metrics, and primary icons
- #7A8C9E — Text Secondary: Body paragraphs, field labels, inactive sidebar navigation, and captions
- #64DF4B — Neon Step Lime: Accent number 1, radiant glow base, and metric icon fill
- #28D4D6 — Neon Step Cyan: Accent number 2, primary action CTA button, and middle glow flare
- #3B82F6 — Neon Step Blue: Accent number 3, right glow flare, and sparkline area gradient
- #E05688 — Accent Pink Dot: Notification badge dot on the bell icon in header
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px subheading, 18px heading, 28px heading-lg, 72px display. Tracking -0.03em on display, 0 on body. The typographic tone is ultra-precise, technical, and architectural. Clean sans-serif letterforms (Inter match) provide neutral readability across technical metadata, while dramatic scale shifts—like the 72px numerals next to 13px explanatory paragraphs—create unmistakable visual rhythm. For open-source parity, Google Font 'Inter' or 'Plus Jakarta Sans' provides an exact stylistic replacement.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 32px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminescence rather than cast drop shadows. Dark surface cards (#07101E) float slightly above the deeper void canvas (#040914) via 1px border strokes (#13233B). Intense radial glows and horizontal flare bursts directly under the circular step badges create an illusion of internal backlighting and dimensional projection.
IMAGERY
Iconography is purely vector-based and technical, utilizing thin 1.5px monoline strokes with centered circular enclosures and neon edge highlights. Graphics mimic precision telemetry, target reticles, layered stacks, and coordinate graphs. Photographic imagery or non-tech illustrations would completely break the sci-fi dashboard immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal neon laser-glow beam beneath circular reticle icons: an intense focused streak of colored light (#64DF4B, #28D4D6, #3B82F6) that projects outward horizontally while casting a soft radial halo into the icon. To use it, position an absolute radial blur directly beneath the badge overlapping the stage number. It is commonly misused by making the blur too broad, turning crisp optical flares into muddy colored blobs.
MUST
- Use radiant horizontal neon glow effects only under focal circular badges to maintain futuristic lighting hierarchy.
- Restrict bright saturated colors (green, cyan, blue) to step numbers, key indicators, and active signals.
- Maintain high contrast between 13px #7A8C9E body text and deep #07101E card surfaces.
- Group milestone components into exactly 3 horizontal columns when showcasing sequence.
AVOID
- Do not use light-colored cards or full white backgrounds anywhere on the canvas.
- Never apply colored glow effects to normal body text or navigation links.
- Avoid heavy drop shadows; rely entirely on ambient colored radial gradients and 1px borders for depth.
- Do not mix rounded corners arbitrarily; keep cards strictly at 16px and small widgets at 8px.
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 中尝试 
