Design a light-mode website section: diffused atmospheric chromatic aura meeting razor-sharp midnight infrastructure in an authoritative developer finish.
LAYOUT
The vertical composition is anchored in two primary zones: an expansive, centered promotional CTA zone spanning roughly 55% of the viewport height, directly followed by a structured 5-column navigation footer taking up the remaining 45%. In the CTA, content cascades strictly down the center axis: eyebrow, headline, paragraph, dual action buttons, and trust strip. The footer opens with an asymmetrical 6-column flex/grid containing identity, four navigation stacks, and a newsletter utility on the far right, terminating in a symmetrical legal bar.
PALETTE (use these exact hex values)
- #080c16 — Obsidian Ground: Solid base background for the multi-column footer and newsletter capture area
- #ffffff — Ethereal Core: Luminous central canvas anchor for the primary headline and conversion actions
- #f05438 — Prism Vermilion: Warm leading edge of primary CTA gradient, logo glyph, and top gradient aura
- #5b46b2 — Prism Indigo: Trailing edge of primary CTA gradient and mid-tone blur in ambient canvas
- linear-gradient(90deg, #f05438 0%, #5b46b2 100%) — Action Gradient: Signature fill applied to primary button and newsletter submit icon container
- #111625 — Deep Slate Text: High-contrast headline text on light ambient gradient surfaces
- #3e4856 — Charcoal Body: Descriptive copy in CTA section and subtle metadata text
- #7e8c9f — Footer Muted Blue: Footer navigational links, copyright attribution, and secondary field captions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typographic tone is technical, disciplined, and calm—emulating modern developer infrastructure platforms. Rendered in a high-clarity geometric grotesque like Inter or Plus Jakarta Sans, it pairs ultra-tight headline leading (1.08) with deliberate uppercase tracking on utility labels to establish an institutional, highly reliable authority.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through color luminance and atmospheric glow rather than standard drop shadows. The top CTA leverages chromatic luminosity that radiates outward from behind pure dark text, while the footer utilizes a flat, grounded obsidian slab with subtle hairline borders (1px rgba(255, 255, 255, 0.08)) to delineate inputs and structural divisions.
IMAGERY
Abstract atmospheric mesh gradients featuring coral-red, lavender-purple, and turquoise-cyan blurred heavily across the upper background. Fine, mathematical contour line drawings curve through the upper right corner, subtly referencing topographic maps or compressed data vectors. Photographic elements and illustrative 3D figurines are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vibrant vermilion-to-purple horizontal gradient thread that links the corporate glyph, the primary CTA button, the newsletter submit trigger, and the ambient radiant aura. It acts as an energetic pulse running through an otherwise restrained, high-density infrastructure layout.
MUST
- Retain the distinct two-tone horizon where the radiant aurora canvas meets the dark obsidian footer cleanly without a blur transition.
- Use tight negative tracking (-0.03em) on headlines above 40px to preserve typographic tension.
- Ensure the primary CTA button matches the vermilion-to-purple directional gradient of the logo mark.
- Pair the primary gradient button with a subtle underlined text link to create a balanced action hierarchy.
AVOID
- Do not blur or blend the bottom of the CTA background into the dark footer slab; keep the cut sharp.
- Never use generic drop shadows on the primary button; its luminance contrast provides all necessary affordance.
- Avoid multi-colored text in the display heading; keep it solidly rendered in #111625.
- Do not round buttons or form inputs to a full pill (999px); stick strictly to an 8px corner radius.
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 中尝试 
