Design a dark-mode website section: deep cosmos engineering aesthetic illuminated by glowing cyan particle tracks and sharp technical typography.
LAYOUT
The composition flows vertically from a split hero CTA section into an architectural footer. The top half balances a strong left-aligned headline cluster against an expansive right-aligned particle canvas layered with data callouts. Below a subtle 1px divider, the footer distributes a large typographic brandmark on the left, a 4-column navigation array in the center, and an email capture card on the right.
PALETTE (use these exact hex values)
- #050b14 — Cosmos Base: Deepest foundation background color covering entire hero and footer canvases.
- #2f72f6 — Electric Cobalt: Primary interactive fill, accent display text color, and telemetry particle hue.
- #ffffff — Starlight White: Primary headings, active states, and high-priority graphic typography.
- #8ba3c7 — Telemetry Grey: Secondary copy, paragraph text, navigation links, and descriptive sub-labels.
- #3d5475 — Muted Slate: Unfocused input text, copyright, tertiary microcopy, and subtle captions.
- #12243d — Grid Border: Subtle 1px horizontal dividers, input borders, and technical layout lines.
- #4ade80 — Terminal Green: Live status indicator pip on newsletter and telemetry nodes.
- #fb923c — Alert Amber: Status indicator dot for infrastructure telemetry node.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,General Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px heading, 44px heading-lg, 68px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, surgical, and deeply technical. Inter Display brings stark, crisp human-scale legibility to massive statements, while JetBrains Mono provides the unadorned precision of command-line telemetry and robotics firmware. If substituting, choose austere grotesques paired with developer-focused monospace fonts to preserve the engineering pedigree.
GEOMETRY & SPACING
Corner radii — cards 0px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and particulate atmospheric glows rather than traditional CSS drop shadows. Interactive surfaces sit directly on the planar cosmic background, with contrast achieved via vibrant blue fills and 1px border strokes. Background elements recede via deep blue-black falloff (#050b14) layered beneath semi-transparent point clouds.
IMAGERY
The visual anchor is a swirling 3D point-cloud trajectory resembling an orbital robotic arm path or planetary ring in electric cyan-blue. Orthogonal wireframe guides intersect the particle clouds to evoke precise spatial robotics mapping. Photographic cutouts, flat illustrations, or organic lifestyle photography are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline pairing (first line pure white, second line electric blue) positioned directly adjacent to an orthogonal-connected particle trajectory. Misusing this means coloring both lines uniformly or replacing the glowing particle trajectory with standard vector art.
MUST
- Use a two-line contrast headline structure: top line crisp white, bottom line electric cobalt blue (#2f72f6).
- Anchor callout telemetry nodes with razor-thin 1px orthogonal connecting lines and 5px status dots.
- Keep typography scale extreme: 68px display headings set against 11px JetBrains Mono metadata.
- Separate the main hero/CTA from the footer grid using a single continuous 1px horizontal stroke (#12243d).
AVOID
- Never introduce warm off-whites, creams, or beige tones onto this deep navy substrate.
- Do not add drop shadows or blurred box-shadows to buttons; maintain planar cosmic depth.
- Never render telemetry tags in standard sans-serif; they must use letterspaced monospace.
- Avoid heavy multi-colored gradients; restrict glows to electric cobalt (#2f72f6) particle swarms.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
