Design a dark-mode website section: deep tactical precision where luminous particle trajectories meet structured telemetry across a cosmic obsidian canvas.
LAYOUT
The page adheres to a 1240px width container with a two-tier vertical hierarchy. The top tier splits 50/50: left side houses the headline block with eyebrow tag, copy, and dual CTAs; right side presents the expansive particle illustration spanning into the dark margin. The lower tier presents a 4-column bento grid (metric, swarm list, chart, capability checklist) underlined by a single full-width takeaway bar.
PALETTE (use these exact hex values)
- #030714 — Abyssal Void: Deep cosmic background canvas across the entire viewport
- #070E1E — Bento Container: Background fill for lower bento metric cards and banner strip
- #162238 — Structural Stroke: Crisp hairline perimeter boundaries for cards and outline buttons
- #2B7FFF — Electric Cobalt: Primary CTA fill, title accent text, and glowing chart trajectories
- #38BDF8 — Cyan Luminescence: Glow highlights on particles, secondary eyebrow text, and icon indicators
- #F59E0B — Amber Telemetry: Sparse celestial accent dots representing active agent anomalies
- #FFFFFF — Star White: Primary display headlines, hero numerals, and active navigation links
- #94A3B8 — Muted Slate: Hero descriptive copy, secondary metadata, and card body descriptions
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 36px heading, 54px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typography is unyielding, technical, and hyper-structured, evocative of command-line terminals and aerospace HUD systems. The heavy-weighted sans headline provides brute authoritative impact, while the light-tracking uppercase tags establish enterprise-grade precision. Geist Sans or Inter in tight negative tracking captures this cold offensive-security confidence without looking amateur.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered purely via ambient luminosity and chromatic contrast rather than box shadows. Cards sit flat against the canvas, differentiated only by a subtle value shift from #030714 to #070E1E and hairline borders. Diffuse back-glows behind the key visual and sparklines provide the illusion of light suspended in dark vacuum.
IMAGERY
The visual hero language relies on procedural particle physics, displaying a translucent, glowing white paper-plane / delta-wing stealth vector emerging from an orbital field. Delicate arc lines trace orbital trajectories dotted with tiny cyan (#38BDF8) and amber (#F59E0B) nodes. Stock photography, photorealistic humans, or flat vector illustrations would critically fracture this deep-space tactical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the tri-line headline structure terminating in a brand-colored punchline ('Measurable risk reduction.') immediately paired with a 3D procedural wireframe particle construct that physically breaks card container boundaries. Using this signature requires strictly keeping the first two lines stark white and limiting the glowing particle field to one distinct, soaring focal object.
MUST
- Reserve solid electric cobalt (#2B7FFF) exclusively for primary interactions and the final emphatic line of headlines.
- Use uppercase lettering with 0.1em tracking for all category and card header labels.
- Maintain uniform 12px corner radii on all bento modules and the bottom horizontal banner.
- Keep hero card borders to a razor-thin 1px line using #162238 to prevent visual crowding.
AVOID
- Do not introduce solid vibrant backgrounds behind bento cards; preserve the deep night gradient.
- Never use fully rounded pill shapes for rectangular buttons; maintain sharp 6px corner radii.
- Do not color all three headline sentences blue; only color the third phrase for punchy rhythm.
- Avoid standard 90-degree bar charts; use radiant upward-trending area curves with gradient fills.
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 中尝试 
