Design a dark-mode website section: deep midnight canvas crowned by a luminous cyan-to-violet aurora separating cta from multi-column footer.
LAYOUT
The composition follows a centered-to-grid vertical cadence. The top hero call-to-action is centered with an announcement pill, high-contrast display headline, supporting paragraph, and dual button row. Across the middle sits the wide ambient light horizon with faint concentric arcs. Below, the footer is arranged in a multi-column grid: brand info on the left, four link columns in the center, and a newsletter container on the right, capped by a balanced horizontal legal bar.
PALETTE (use these exact hex values)
- #07090e — Void Black: deep background canvas for both hero CTA and footer section
- #0e131f — Surface Container Dark: background fill for the newsletter subscription card and input fields
- #1e293b — Surface Border Muted: subtle hairline borders on pill badge, card outline, and input borders
- #2563eb — Electric Azure: primary call-to-action buttons, submit button, and brand icon accent
- #00a6ff — Cyan Horizon Glow: ambient radial glow emanating across the right side of the horizon divider
- #6c35de — Violet Horizon Glow: ambient radial glow emanating across the left-center dividing horizon
- #ffffff — Pure White: primary headings, brand logo text, column headers, and primary button labels
- #94a3b8 — Slate Neutral: secondary body copy, subtitle, and input placeholder text
- #64748b — Muted Slate: footer links, copyright text, microcopy, and secondary badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 44px display. Tracking -0.02em at display, 0 at body. The typography relies on Inter or a high-grade grotesque sans-serif that communicates precision, enterprise capability, and modern AI engineering. Neutral, clean letterforms allow the glowing accents to carry emotional weight without visual clutter. For production, substitute with Geist Sans or Plus Jakarta Sans if licensing Inter is unavailable.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous color bleed and layered dark values rather than drop shadows. The background sits at #07090e, elevated containers at #0e131f with 1px stroke (#1e293b), and input fields are visually recessed using deep #080b12. The glowing aurora layer behind the interface creates optical depth by silhouetting the lower footer.
IMAGERY
No photographic or raster illustration imagery is used. Visual interest relies entirely on generative ambient lighting (diffuse violet to cyan blur), minimalist stroke iconography (calendar, mail, social glyphs), and faint geometric vector curves along the horizon line. Avoid photographic portraits, raster textures, or drop-shadowed artwork.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the glowing violet-to-cyan ambient horizon line running horizontally between the call-to-action and footer. It provides an ethereal, dawn-like separation that transforms a standard dark footer into an elevated brand moment. Misusing it involves making the blur edges hard or extending the neon glow into the readable footer link area.
MUST
- Keep the background strictly near-black (#07090e) to preserve glow luminescence.
- Restrict the horizon light effect to the transition zone between CTA and footer.
- Use 10px border-radius consistently on primary action buttons.
- Ensure all column headings in the footer use bold 14px white (#ffffff) typography.
AVOID
- Do not add hard horizontal dividing lines across the luminous aurora band.
- Never use pure white backgrounds for cards or inputs in this design.
- Do not use saturated accent colors for standard footer navigation links.
- Avoid sharp 0px corners; maintain subtle 8px-16px rounding on cards and buttons.
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 中尝试