Design a dark-mode website section: deep space canvas lit by dual chromatic atmospheric glows with disciplined enterprise data density.
LAYOUT
The composition flows vertically from an atmospheric centered conversion funnel down into an expansive 6-column tabular footer. The top half stacks badge, 2-line display title, 2-line subtitle, button pair, and assurance ticker along a shared central vertical axis. A subtle boundary gives way to the footer which arranges identity and newsletter on the outer edges with four categorized link columns between them.
PALETTE (use these exact hex values)
- #07090e — Canvas Abyss: Absolute background canvas for CTA section and overall page foundation.
- #090c13 — Footer Charcoal: Slightly differentiated surface layer holding the dense footer information architecture.
- #1d4ed8 — Cobalt Aurora: Left-hand atmospheric ambient blur glow creating visual depth behind the headline.
- #f43f5e — Magenta Aurora: Right-hand atmospheric ambient blur glow contrasting the cold blue tones.
- #1d6bf3 — Electric Cobalt: Interactive primary buttons, arrows, and column heading status pips.
- #10b981 — Signal Green: Live state pip dot within the pill badge header.
- #ffffff — Bright White: Hero heading copy, primary button labels, and high-emphasis logo text.
- #94a3b8 — Muted Slate: Subtitles, body descriptions, footer links, and secondary interactive states.
- #1e293b — Subtle Charcoal Border: 1px hairline borders for badges, secondary buttons, input boxes, and dividers.
- #64748b — Dim Slate: Disclaimers, legal metadata, social links, and copyright copy.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 44px heading-lg. Tracking -0.025em at display, +0.12em at mono uppercase labels. The typographic tone is ultra-modern, technical, and frictionless. Inter provides a sterile grotesque geometry that balances enterprise clarity with developer-oriented SaaS aesthetics, relying on letter-spacing contrasts between expansive utility labels and tight display headers.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous chromatic backlighting rather than drop shadows. Surface layers like badges and input boxes employ 1px hairline strokes (#1e293b) over translucent dark fills to achieve separation from the zero-level abyss canvas.
IMAGERY
No photographic imagery is present. Visual interest is derived exclusively from a high-abstraction gradient wire ribbon in the brand lockup and dual-source diffuse atmospheric blur fields (cobalt and magenta) anchored in the corners.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-source atmospheric aura—soft cobalt blue radiating from the top-left balanced against deep rose-magenta on the top-right—casting a cinematic halo behind clean white sans-serif typography.
MUST
- Keep chromatic gradients heavily blurred and restrained strictly to ambient background layers.
- Maintain high contrast white (#ffffff) exclusively for high-tier headings and active primary actions.
- Use uppercase lettering with generous tracking (+0.12em) for all 11px metadata markers.
- Prefix footer column titles with a uniform 4px bright blue dot indicator.
AVOID
- Never place sharp gradient borders or high-contrast drop shadows under buttons.
- Do not tint the main body text or headlines with blue or magenta hue spills.
- Avoid solid dividers between footer columns; rely exclusively on spatial grouping.
- Never substitute the vibrant cobalt CTA fill with generic neutral gray or white.
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 中尝试 
