Design a dark-mode website section: luminous cyan-to-navy execution gradient anchored by dark systematic financial infrastructure.
LAYOUT
The layout executes a clear two-tier rhythm: an asymmetric two-column hero section followed by a structured multi-column footer grid. In the hero, the left column houses headline, value proposition, button actions, and trust badges, while the right column anchors an oversized terminal preview. The footer resolves into a 5-part structure: brand and newsletter subscription on the left, four navigation link columns on the right, and a horizontal sub-footer strip.
PALETTE (use these exact hex values)
- #070B14 — Abyss Base: Solid background for the footer section and dark surface floor.
- linear-gradient(135deg, #00A6FB 0%, #0056D2 45%, #0B132B 100%) — Hero Gradient: Luminous full-width canvas fill across the primary CTA and showcase area.
- #FFFFFF — Pure White: Primary headings, active link states, and prominent CTA button surface.
- #3A62F8 — Electric Indigo: Subscribe button fill, active tab underline indicator, and brand sparkle icon.
- #94A3B8 — Muted Slate: Supporting descriptions, code comment tokens, and inactive nav items.
- #10B981 — Terminal Green: Live status indicator dot, 200 OK network tag, and positive PnL values.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.02em at display, 0 at body. The typography speaks with confident, unadorned precision. The modern grotesque sans-serif delivers an institutional, algorithmic feel suitable for quantitative trading and financial infrastructure. Tight display tracking conveys high density and authority, while monospaced accents immediately communicate developer-first credibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through localized luminescence and frosted glass surfaces rather than muddy black drop shadows. The preview card floats via a 1px border stroke with 15% white opacity paired with a soft, expansive ambient blue glow that bleeds into the canvas behind it. The footer remains strictly flat and grounded, providing architectural permanence.
IMAGERY
This interface avoids raster photographic imagery entirely, relying on rendered high-fidelity UI simulations and atmospheric vector glows. Product realism is communicated via functional UI artifacts like API tabs, code syntax formatting, and live status dots. Any lifestyle photography or generic stock imagery would severely undermine the developer-grade technical authority.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the seamless transition from an expansive cyan-blue radiant skybox directly into an ink-dark financial console and structured footer. The interface feels split between executive optimism at the top and rigorous engineering reality at the bottom. To preserve it, maintain the glowing left-to-right color temperature shift and never allow the blue hero to fade into generic gray.
MUST
- Keep the hero background radiant and expansive, letting the cyan bloom from the upper-left quadrant.
- Render the terminal window with backdrop-filter blur and a subtle 1px border in translucent white.
- Maintain high contrast for the primary hero button using pure white against saturated blue.
- Group technical reassurance labels into a single row partitioned by delicate 1px vertical borders.
AVOID
- Do not extend the cyan-to-blue gradient into the footer; the footer must remain dark matte.
- Do not use solid opaque borders around the code card; rely strictly on translucent rim lighting.
- Do not apply drop shadows to the primary CTA button; let pure color contrast drive visibility.
- Do not use colorful icons in the trust reassurance row; keep them strictly monochromatic white.
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. Try in DraPub 
