Design a dark-mode website section: cosmic deep-teal infrastructure with curved luminous particle sweeps and refined technical typography.
LAYOUT
Vertical progression begins with a centered, airy conversion hero (heading, subtitle, paired CTAs) floating over an ambient particle curve. Directly beneath lies a four-column horizontal telemetry strip of key metrics. A clean hairline rule drops down to a six-column footer containing the brand mark, four topical link groups, and a dedicated newsletter card, sealed by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #020B0F — Deep Space Void: deepest background base tone across the footer and document foundation
- #03171F — Abyssal Cyan: subtle elevation gradient and hero midtone behind the atmospheric particles
- #4EEAA5 — Emerald Mint: primary brand accents, icon strokes, badge highlights, and text emphasize span
- #1F8A65 — Teal Button Fill: primary call-to-action button backgrounds and submit buttons
- #FFFFFF — Bright Starlight: main headline text, high-value statistics, and logo title
- #8EA4B0 — Muted Nebula: body copy, column navigation links, and subtitle descriptions
- #4A616E — Deep Subdued: small tracking caps, metadata labels, copyright text, and form placeholders
- #0F2833 — Hairline Border: horizontal dividers, card stroke boundaries, and input container borders
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0.08em at uppercase microcaps. Disciplined, computational, and authoritative. A modern neo-grotesque like Inter Display provides supreme neutrality and legible compact counters at smaller sizes, allowing numerical metrics and capitalized data labels to feel like precision aerospace telemetry.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through luminance layering rather than drop shadows. Cosmic background glows and dark teal gradients (#03171F to #020B0F) sit under razor-thin 1px border containers (#0F2833) that separate interface tiers with zero elevation blur.
IMAGERY
A celestial or orbital particle stream featuring tiny micro-stardust in warm amber and cool cyan drifting across deep ocean-teal space. Imagery must always remain abstract, atmospheric, and dark, never featuring literal hardware, stock photography, or harsh geometric solids.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping cosmic golden-cyan particle stream curving along the top hemisphere, coupled with crisp emerald (#4EEAA5) micro-metric telemetry. If replaced with a generic gradient or standard SaaS illustrations, the sense of frontier-scale computational infrastructure completely vanishes.
MUST
- Use uppercase 11px tracking (0.1em) for all technical sub-labels and section eye-browsers.
- Accent key words in major display headings with mint green (#4EEAA5) to draw the eye.
- Anchor metric items with 32px fine-line geometric icons aligned to the top-left of the value stack.
- Enclose input groups within subtle 1px border strokes (#0F2833) rather than heavy drop shadows.
AVOID
- Do not introduce pure white (#FFFFFF) solid button fills; preserve the deep emerald palette.
- Never use serif or expressive handwritten typefaces anywhere in this technical system.
- Do not omit the hairline divider lines (#0F2833) separating footer tiers.
- Never crowd the hero display headline; maintain at least 64px padding from surrounding metrics.
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 中尝试 
