Design a dark-mode website section: deep oceanic dark mode sparked by electric cyan radiance and clinical geometric typography.
LAYOUT
The layout is split into two primary horizontal tiers. The top tier is a vertically stacked, center-aligned CTA block consisting of headline, explanatory body text, and an inline dual-action button group. A thin 1px horizontal divider (#16202C) spans full-width to demarcate the second tier: a 6-column grid featuring the brand identity block on the left, four equidistant link columns, and a newsletter capture form on the far right. The page terminates in an edge-to-edge legal bar spaced 64px beneath the grid.
PALETTE (use these exact hex values)
- #070A0E — Abyss Canvas: Deepest canvas background framing the CTA section and footer body
- #06090D — Footer Slate: Slightly darkened base beneath the divider rule for multi-column navigation
- #0E141C — Input Charcoal: Background fill for the newsletter input field
- #16202C — Surface Border: Delicate divider line separating hero CTA from footer, plus input outlines
- linear-gradient(135deg, #38BDF8 0%, #34D399 100%) — Electric Gradient: Primary conversion pill background and brand geometric mark
- #38BDF8 — Neon Cyan: Header keyword highlight and primary glow source
- #34D399 — Mint Accent: Micro indicator bars above footer column titles
- #FFFFFF — Pure White: Display headline, column headers, brand name, and interactive icons
- #94A3B8 — Muted Slate: Supporting descriptive copy, navigation links, and input placeholders
- #64748B — Subtle Charcoal Text: Copyright text, secondary legal links, and domain sub-label
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 44px heading-lg. Tracking -0.025em on display headings, 0 on body. The type choice (Inter / Plus Jakarta Sans) communicates clinical precision, modern software engineering, and clean minimalism. The tight negative letter-tracking on the 44px display headline gives the copy authoritative weight, while generous line-height on 14px footer links ensures effortless scanning. For substitution, any neutral neo-grotesque or geometric sans with tabular figures and clean geometry will preserve the interface's technical feel.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical bioluminescence rather than drop shadows on stacked surfaces. A soft radial gradient centered behind the primary CTA bleeds teal (#0D9488) and cyan (#0284C7) outward, giving the dark canvas an illuminated, volumetric presence. The primary pill button inherits this illumination with a targeted soft glow shadow (0 12px 32px rgba(56, 189, 248, 0.3)).
IMAGERY
This section eschews photographic elements entirely, relying on pure typography, glowing atmospheric light maps, and clean iconography. Brand personality is communicated through the dual-rhombus geometric logo mark rendered in the core brand cyan-to-emerald gradient. Adding stock photography or literal nutrition images here would break the sleek, computational AI identity.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of the radiant cyan-to-mint pill CTA floating above a deep ambient radial glow, mirrored directly below by the tiny mint accent pills anchoring each footer section. Without this rhythmic pairing of luminous cyan-green touches against total darkness, the screen would collapse into a generic dark SaaS footer.
MUST
- Retain the centered radial teal glow behind the main CTA to provide atmospheric depth without using solid container cards.
- Include the small horizontal 16px mint bar above each categorized footer column header.
- Use a pill radius (9999px) for the primary button and social media icon enclosures.
- Emphasize the final words of the display headline using the cyan accent color (#38BDF8).
AVOID
- Do not add heavy white or grey container card backgrounds around the CTA text.
- Do not omit the dotted underline on the secondary 'See how it works' text link.
- Never replace the subtle radial lighting with harsh, sharp-edged gradients or solid shapes.
- Do not set footer link text to 100% white; reserve pure white for headers and active states.
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 中尝试 
