Design a dark-mode website section: deep space atmosphere pierced by dual-spectrum light arcs grounding an enterprise conversion stack.
LAYOUT
The viewport flows strictly from wide-spaced hero conversion down to tightly structured grid telemetry. First, the eye hits the centered pill badge and 52px display statement with centered actions. Below, a 4-column balanced feature bar sits above a full-width rule, grounding into a 6-part footer grid ending with a final legal sub-bar.
PALETTE (use these exact hex values)
- #07080C — Void Black: Dominant deep canvas background across the hero and footer sections.
- #0F1319 — Subtle Charcoal: Background fill for newsletter input fields, circular social icons, and pill chips.
- #F45244 — Horizon Coral: Primary conversion button fill, logo monogram, headline emphasis, and category headers.
- #60A5FA — Atmospheric Cyan: Ambient light streak accenting the upper right perimeter.
- #10B981 — Telemetry Green: Pulsing indicator dots for product readiness and operational status.
- #FFFFFF — Pure White: Primary display headline, button labels, and high-emphasis column headers.
- #9CA3AF — Muted Slate: Secondary lead copy, feature descriptions, and standard navigation link items.
- #1E242F — Subtle Border: Hairline separator lines defining footer top bounds and input borders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 52px display. Tracking -0.03em at display, 0 at body. Inter or Plus Jakarta Sans gives the interface an engineered, high-velocity SaaS presence. Tightly tracked display headlines (-0.03em) feel confident and modern, while generous line heights on body copy preserve effortless technical legibility against dark surfaces.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through ambient light gradients and opacity layering rather than drop shadows. Bright radial flares break through the dark background canvas, casting atmospheric depth behind high-contrast flat UI elements. Floating controls like badges and inputs use subtle 1px translucent borders to separate themselves from the void.
IMAGERY
The visual world centers on celestial or planetary atmospheric phenomena: high-energy orbital light leaks that curve gracefully across the canvas. Avoid cartoon illustrations, photorealistic corporate headshots, or skeuomorphic glass cards. Keep light effects blurred and lens-like, evoking satellites grazing the edge of Earth's thermosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The opposing chromatic light flares: a fiery coral-red atmospheric glow sweeping upwards from the lower-left edge countered by an icy blue orbital ray darting across the upper-right horizon. It transforms a conventional SaaS conversion block into an epic cinematic moment. It is commonly misused by applying symmetric colors or overly diffused blob gradients that lack the distinct directional arc of a planetary horizon.
MUST
- Retain the chromatic dualism: warm coral flare on bottom-left, cool blue streak on top-right.
- Use exact 8px corner radiuses on solid buttons and text inputs.
- Highlight only the final two crucial words of the hero title in brand coral (#F45244).
- Separate the feature strip and the footer using clean, full-bleed 1px hairlines (#1A1E26).
AVOID
- Do not add drop shadows or box glows directly behind dark card elements.
- Never replace the deep space photographic flares with flat synthetic vector gradients.
- Do not use sharp 0px corners or fully pill-shaped primary action buttons.
- Avoid coloring regular body paragraphs in coral; reserve it strictly for accents and headings.
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 中尝试 
