Design a dark-mode website section: cosmic deep-space terminal framed by curving cyan energy arcs and crisp utilitarian typography.
LAYOUT
Vertical progression starting with a centered, high-gravity hero/CTA stack (pill badge, two-line heading, subtext, action button pair, trust badges). A clean hairline divider separates the radiant zone from the footer below. The footer organizes the brand lockup on the far left, a 4-column link directory in the center, and a newsletter capture block on the far right, terminating in a legal sub-footer bar.
PALETTE (use these exact hex values)
- #030712 — Obsidian Canvas: Deepest background layer across hero and footer canvas
- #080e1a — Surface Dark: Background for secondary buttons, inputs, and icon tiles
- #1e293b — Border Subtle: Hairline outlines on pills, secondary buttons, input borders, and dividers
- #38bdf8 — Electric Cyan: Left-hand accent in text gradients, badge glows, and primary button gradient start
- #34d399 — Mint Emerald: Right-hand highlight in CTA buttons, status dot, and text gradients
- linear-gradient(90deg, #3b82f6 0%, #2dd4bf 100%) — Primary Gradient CTA: Background for primary CTA button, submit arrow, and headline accent text
- #f8fafc — Text Primary: Main headline text, primary button label, and column headers
- #94a3b8 — Text Secondary: Body descriptions, footer links, and trust badges
- #64748b — Text Muted: Microcopy, copyright, and input placeholder labels
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 18px heading, 48px display. Tracking -0.025em for display, -0.01em for body, 0 for captions. Engineered, calm, and hyper-reliable. Inter or an equivalent geometric neo-grotesque gives an unmistakable infrastructure-grade credibility. The type lets the glowing backdrop deliver excitement while text remains austere, mathematically spaced, and effortlessly legible.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical bioluminescence rather than drop shadows. Bright cyan and emerald light streaks glow behind the text canvas against the infinite black surface (#030712), giving the impression of hovering over a cybernetic planetary horizon. Buttons and inputs use translucent glassmorphic surfaces with thin perimeter strokes (#1e293b) to subtly lift from the dark canvas.
IMAGERY
Abstract mathematical light ribbons with particle field dispersion mimicking fiber optics or deep space telemetry. The light arcs originate low on the left as deep blue and wrap high to the right as radiant electric emerald. Photorealistic lifestyle shots or flat vector illustrations are strictly incompatible.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping bilateral light-arc vignette that transitions from deep electric cyan on the bottom-left to brilliant mint emerald on the top-right, perfectly framing the headline. It is commonly misused by making the beams too thick or using opaque shapes rather than delicate feathered particle paths.
MUST
- Retain the dual-color cyan-to-mint gradient strictly on key accents and the secondary headline line.
- Use a dark translucent overlay for secondary controls with a 1px border (#1e293b).
- Keep typography crisp, neutral sans-serif with negative tracking on headings (-0.025em).
- Frame the CTA section with parabolic luminous swooshes that converge towards the center.
AVOID
- Do not use full-width heavy colored backgrounds; preserve the deep space void (#030712).
- Never apply harsh solid borders; rely on hairline borders (#1e293b) or soft glow fades.
- Do not style footer text in stark pure white; keep links in muted slate (#94a3b8).
- Avoid warm tones (red, yellow, orange) which shatter the cool cybernetic atmosphere.
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 中尝试 
