Design a dark-mode website section: deep space telemetry meets crisp enterprise cloud developer tooling under an electric ion aurora.
LAYOUT
The composition follows a centered promotional stack shifting into an asymmetrical 6-column directory footer. Top CTA organizes content vertically: centered badge, 2-line headline, 2-line description, paired actions, and horizontal trust bar. The bottom zone deploys a left brand summary column, four evenly spaced navigation columns, and a right-anchored newsletter signup.
PALETTE (use these exact hex values)
- #030712 — Void Black: Deepest foundation canvas color used for the global directory footer and page baseline
- #070E22 — Atmospheric Navy: Background fill for the CTA section framing the celestial light beam
- #3E63F6 — Ion Blue: Primary brand accent used for solid action buttons and newsletter submit controls
- #8B5CF6 — Aurora Violet: Secondary spectral glow accentuating the rightward trajectory of the background plasma trail
- #FFFFFF — Pure White: High-emphasis display headlines, primary button text, and column group headers
- #94A3B8 — Muted Slate: Subheadlines, trust statement labels, navigation links, and input placeholder strings
- #38BDF8 — Subtle Cyan: Domain label text lim.run and leading verification checkmark badges
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 48px display. Tracking -0.025em for headlines, 0 for body, 0.02em for uppercase/badges. The voice is authoritative, enterprise-grade, and technically sophisticated, perfectly delivered by a neutral neo-grotesque sans-serif. It projects developer precision and security compliance without appearing bureaucratic. Inter or Geist Sans should be prioritized to preserve the geometric clarity of the numeric SLA and security tokens.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved entirely through light emission and border contrast against near-black voids. Background radiance simulates an atmospheric back-light, while UI elements sit on transparent planes separated by 1px translucent borders rather than standard box shadows.
IMAGERY
Imagery is purely vector and ambient atmospheric light: sweeping cosmic plasma waves and fine-line technical iconography. Avoid photographic product mockups, human lifestyle photography, or complex 3D renders that compete with the central luminous wave.
SIGNATURE DETAIL — the thing that makes this design itself
The singular sweeping dual-gradient cosmic wave behind the headline, arcing from cool cerulean on the left to violet-magenta on the right. It transforms a standard dark-mode CTA into a high-end planetary horizon. It is commonly misused by making the beam too opaque, muddying the white headline readability.
MUST
- Keep the background light sweep organic, smooth, and concentrated behind the main CTA headline.
- Maintain strict 8px border radii across inputs, buttons, and social icon tiles.
- Use thin 1px semi-transparent borders (rgba(255, 255, 255, 0.1)) to delineate interactive boundaries.
- Separate inline trust badges with 1px vertical hairpins matching muted border opacity.
AVOID
- Do not use harsh 100% white borders; always use fractional alpha strokes to maintain dark mode subtlety.
- Avoid fully rounded pill buttons for primary and secondary actions; keep them at 8px radius.
- Do not drop drop-shadows on cards or buttons; let edge strokes and glow effects provide definition.
- Never clutter the footer header columns with underlines, saturated colors, or uppercase tracking.
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 中尝试 
