Design a dark-mode website section: deep midnight canvas illuminated by directional cyan-blue atmospheric luminescence and sharp geometric typography.
LAYOUT
The layout descends vertically in three distinct acts: first, a self-contained hero CTA card (approx 1200px wide) featuring centered copy and a four-part metric row; second, a wide 5-column navigation footer demarcated by soft vertical hairline dividers and anchored rightwards by an email input module; third, a clean horizontal baseline bar distributing copyright info and legal text across opposing edges.
PALETTE (use these exact hex values)
- #030712 — Canvas Midnight: Deepest background tone across the viewport outside the hero banner card
- #070e1b — Card Navy Base: Deep core tone of the central CTA container surface
- radial-gradient(ellipse at 85% 30%, #0077c8 0%, #0a1b33 45%, #050b14 100%) — Banner Ambient Glow: Atmospheric soft blue light diffusion across the main CTA card surface
- #30c3ff — Vibrant Cyan: High-priority CTA button background, period accents, and active link states
- #ffffff — Text Primary: Display headings, strong stats numbers, logo text, and primary button labels
- #8899a6 — Text Muted: Body copy, supporting explanations, and metric descriptive labels
- #506173 — Text Low Contrast: Copyright text, footer category column headers, and legal link labels
- #1a2536 — Subtle Border: 1px hairline borders for pills, input containers, secondary buttons, and dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0.05em at uppercase badges. The typographic tone is ultra-engineered, concise, and definitive, driven by a modern geometric neo-grotesque sans (Inter / Geist). Sharp negative letterspacing on the headline gives the value proposition an authoritative edge. It speaks like high-reliability developer infrastructure: factual, measured, and devoid of hyperbolic marketing fluff.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through luminescence against absolute dark tones rather than skeuomorphic drop shadows. The hero container glows from within via asymmetrical radial gradients, while the primary button projects a soft cyan back-diffusion (0 0 24px rgba(48, 195, 255, 0.45)). Subtle 1px borders (#1a2536) delineate edges cleanly.
IMAGERY
No photographic imagery is present; the visual drama relies entirely on algorithmic-feeling atmospheric mesh glows and crisp vector iconography. Glyphs (lightning, clock, dollar, shield) are minimalist 1.5px stroke vector icons housed in softly bordered dark rounded squares. Renderings of mockups or human photos would conflict with the engineering-first aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric atmospheric cyan glow localized inside a large rounded container, punctuated by electric-cyan periods in the main display title ('Prompt once. Automate forever.'). This balance of deep space navy and surgical cyan focal points creates instant enterprise-tech authority.
MUST
- Use solid #030712 for the root background and isolate color strictly inside the CTA banner container.
- Maintain the cyan accent (#30c3ff) exclusively for actionable triggers and purposeful punctuation marks.
- Keep metric icons inside rounded square tiles with fine 1px slate borders (#1a273b).
- Pair bold stat numbers with two-line muted descriptive captions positioned directly alongside.
AVOID
- Do not spread the cyan gradient across the outer background; it must stay trapped within the rounded card.
- Do not use colorful icons; keep line-art icons monochrome cyan (#30c3ff).
- Do not make footer directory link labels bold or high-contrast white by default.
- Do not use large pill shapes for action buttons; 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 中尝试 
