Design a dark-mode web interface screen: luminous cyan and violet telemetry floating quietly across an obsidian digital drafting board.
LAYOUT
The page flows vertically from a persistent glass navbar into a split hero pairing left-hand typography with right-hand schematic graphics. Below, a full-width hero carousel block gives way to a three-column feature grid, followed by an inline newsletter strip, a bento-style blog preview, and a dense multi-column technical footer.
PALETTE (use these exact hex values)
- #040914 — Deep Midnight Canvas: Foundational dark background spanning the entire viewport and baseline layouts.
- #081220 — Obsidian Surface: Background fill for structural feature cards, inputs, and modular bento panels.
- #0EA5E9 — Cyan Spark: Primary interactive fill for conversion buttons, selected indicators, and active pagination pips.
- #A855F7 — Neon Violet: Secondary accent used for decorative wireframe highlights, badges, and icon halo glows.
- #172A45 — Subtle Slate Border: 1px perimeter outline defining card boundaries, dividers, and input borders.
- #F8FAFC — Signal White: Display headings, active navigation items, and high-emphasis button labels.
- #94A3B8 — Muted Slate: Descriptive body copy, inactive links, breadcrumb labels, and timestamp metadata.
- #10B981 — Telemetry Green: Operational status dot in footer and confirmed checklist checkmark badges.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.025em on headings, 0 on body. Clean, calculated, and distinctly architectural. Plus Jakarta Sans conveys modernist SaaS precision through crisp terminals and geometric balance, removing visual clutter while holding high legibility against the ink-black background. Inter or DM Sans serve as effortless zero-cost substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely through subtle luminosity rather than realistic drop shadows. Components establish visual hierarchy via 1px border contrast (#172A45) against the #040914 canvas, accompanied by faint localized radial blooms behind interactive elements and wireframe outlines.
IMAGERY
Visual assets consist exclusively of neon blueprint wireframes, schematic UI panels, and isometric layout mockups drawn with 1-2px vector strokes in cyan and violet. High-contrast photography is strictly avoided, preserving an abstracted technical simulation aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing circular telemetry badge paired with hairline neon wireframe schematics. This distinct visual motif signals technical competence and is correctly applied as a low-opacity radial ambient backplate behind clean iconography; it is broken if saturated into heavy solid fills or multi-colored chaotic halos.
MUST
- Anchor all major surface modules in deep dark navy (#081220) with thin 1px borders (#172A45).
- Reserve vibrant cyan (#0EA5E9) strictly for focused primary CTAs and active interactive states.
- Use soft neon violet and cyan radial gradients sparingly as icon and illustration halos.
- Maintain high optical contrast between bright white titles (#F8FAFC) and muted slate body text (#94A3B8).
AVOID
- Do not introduce pure white or light grey card surfaces; all containers must remain midnight tone.
- Avoid heavy drop shadows; rely on hairline borders and soft ambient glows for separation.
- Do not use high-saturation fills on secondary actions or text spans.
- Never mix photographic stock imagery into the schematic wireframe illustration style.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2576:3200. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
