Design a dark-mode website section: deep space dark mode with electric cyan glows and dense technical telemetry dashboards.
LAYOUT
The header spans the full width with logo left, centered category dropdowns, and grouped actions on the right. Below, a 50/50 two-column hero grid positions copy, CTAs, and a 4-stat metric strip on the left, counterbalanced by a sprawling interactive product console on the right. Beneath the hero fold, an evenly spaced 4-column horizontal feature shelf presents supporting architecture pillars.
PALETTE (use these exact hex values)
- #070a12 — Deep Space Canvas: Foundational page background beneath radiant gradient blurs
- #0d131f — Console Surface: Background fill for the interactive mock console and metric cards
- #1e293b — Subtle Surface Border: 1px hairline divider lines across cards, tabs, and table borders
- #0066ff — Primary Action Blue: Solid primary CTA button fill and focused active navigation states
- #10b981 — Telemetry Mint: Positive trend badges, upward delta arrows, and healthy operational dots
- #b01e68 — Aurora Magenta: Atmospheric blurred lighting aura anchored behind the top-right header
- #0284c7 — Aurora Cyan: Atmospheric blurred lighting aura lingering across the bottom corners
- #ffffff — Text Crisp White: Hero display headlines, major metrics, and primary button labels
- #94a3b8 — Text Muted Slate: Hero narrative copy, secondary nav links, and metadata descriptions
- #475569 — Text Dim Monospace: Chart grid markers, table headers, and dormant status indicators
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px heading-lg, 52px display. Tracking -0.025em for display, 0 for body, +0.06em for caps labels. The typography conveys surgical, low-latency computational power through Inter or comparable modern grotesque typefaces. The sharp -0.03em tracking at 52px gives the display headline weight and architectural presence, while the small tabular labels communicate rigorous precision. Geist Sans or SF Pro Display make ideal replacements without compromising mechanical clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and transparency rather than heavy dropped shadows. Deep background cards float above the void through subtle 1px semi-transparent borders (#1e293b) backed by 120px-blurred radial gradient spots in magenta and cyan. Inner dashboard panels sit one step higher using slightly lightened slate fills (#0f172a) against the shell (#0b101b).
IMAGERY
There are no photographic assets or figurative illustrations present. Imagery is purely structural and technical: high-fidelity UI telemetry graphs, live pipeline status tables, syntax-highlighted JSON snippets, and minimal neon geometric wire icons. Any realistic stock photography or playful cartoon avatars would immediately break the developer-grade technical tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the split-focus technical console: an authentic, multi-pane telemetry workspace complete with live charts, status indicators, and JSON pipelines embedded as the hero centerpiece. It succeeds because it represents honest utility rather than stylized abstraction. Misusing it involves placing static, non-functional fake graphics that lack genuine data density.
MUST
- Anchor atmospheric mesh glows behind cards to create soft separation from the dark canvas.
- Use 1px border stroke (#1e293b) to define component surfaces against deep navy backgrounds.
- Keep telemetry tabular text strictly aligned with monospace numbers for latency and count values.
- Limit electric blue (#0066ff) exclusively to primary calls-to-action and active navigational nodes.
AVOID
- Never apply harsh opaque drop shadows; depth must rely on 1px hairlines and radiant background light.
- Do not saturate entire cards with colored backgrounds; keep panels dark (#0b101b) with localized accents.
- Avoid using more than one primary blue solid fill button within a single viewport focal point.
- Do not remove the 1px interior borders inside dashboard panels; they prevent data visual collapse.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
