Design a dark-mode website section: deep midnight blue gradients diffused with luminous violet glow beneath sharp high-contrast tech typography.
LAYOUT
The layout is divided into two major macro-sections: a high-impact three-column bento CTA grid on top, and a structured multi-column navigation footer below. The CTA tier allocates roughly 50% width to the primary conversion card and 25% each to two metric feature tiles. The footer begins below with a 1:4 layout: brand intro and newsletter on the left (separated by a vertical hairline), followed by four tidy navigation columns and social badges on the far right.
PALETTE (use these exact hex values)
- #030617 — Abyssal Midnight: Foundational canvas backdrop across the entire lower footer section.
- linear-gradient(135deg, #052cb7 0%, #1742e6 30%, #5d46e2 65%, #845ef7 100%) — Aurora Gradient: Luminous mesh background illuminating the hero CTA card and surrounding upper frame.
- #0a1338 — Translucent Indigo Card: Semi-opaque dark blue fill used for secondary metric and feature bento cards.
- #ffffff — Stark White: High-contrast headings, card titles, and primary button background fill.
- #94a3b8 — Muted Lavender Slate: Descriptions, metadata, footer category links, and copyright text.
- #4f46e5 — Electric Violet: Newsletter subscribe button background and icon container tint.
- #60a5fa — Metric Cyan Blue: Large metric statistics (3.6x, 85%) on dark feature cards.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 38px heading, 42px display. Tracking -0.02em at display, 0em at body. The typography is clean, ultra-modern, and tech-forward, relying on a balanced geometric sans with tall x-height and tight negative tracking at display scales. It projects engineering precision and calm confidence. Inter or Plus Jakarta Sans are the definitive open-source fonts to accurately reproduce this structure.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminosity and surface opacity rather than drop shadows. Bright radial gradients set behind semi-translucent dark tiles give the impression that cards are floating over a contained light well. Surfaces lower on the page step down in brightness, grounding the UI into total black (#030617).
IMAGERY
No photographic imagery is present. The visual language relies purely on geometric four-pointed star brand iconography, soft circular iconography glyphs, and sweeping, smooth vector color gradients. Any future imagery should use abstract render shapes or UI glassmorphism rather than realistic photography.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the seamless transition from an intensely glowing cobalt-to-violet aurora CTA block directly into a pitch-black, highly structured multi-column tech footer. This creates an energetic crescendo of conversion followed immediately by disciplined utility. To apply it, maintain an asymmetric bento grid with an ultra-saturated primary card sitting directly above a quiet, monochromatic directory.
MUST
- Use generous 24px border radii on all top-level bento cards to maintain soft, modern silhouettes.
- Restrain high saturation to the blue/violet spectrum; let the background glow carry visual energy.
- Ensure primary CTA buttons use stark solid white (#ffffff) with black text for maximum conversion contrast.
- Render large metric figures in bright cyan/sky blue (#60a5fa) to separate data from narrative headers.
AVOID
- Do not use sharp 0px or small 4px corners on container cards; it destroys the organic fluid aesthetic.
- Do not introduce warm hues (orange, red, yellow) into gradients or badge icons.
- Never make footer link text fully white; reserve #ffffff solely for active states and column headings.
- Avoid heavy drop shadows; depth is achieved via luminosity differences and gradient glow, not drop shadows.
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 中尝试 
