Design a dark-mode website section: deep twilight enterprise canvas overlaid with glowing gradient metrics and cinematic landscape photography.
LAYOUT
Two distinct vertical tiers define the layout: an expansive hero CTA section featuring a 55/45 split between headline copy and a 2x2 metric matrix, followed by a transition into a five-column structured footer directory. The footer's left column houses branding, positioning statement, and API health badges, while four central columns handle topical site links, and the rightmost column hosts a newsletter capture form.
PALETTE (use these exact hex values)
- #050814 — Deep Midnight Base: Solid base background for footer directory and bottom copyright band
- #2563EB — Electric Cobalt: Primary CTA fill, active link accents, and logo mark icon
- #93C5FD — Luminous Sky Blue: Large metric figures, category pill tags, and interactive hover cues
- #34D399 — Emerald Signal: Checkmark icons and API operational indicator dot
- #FFFFFF — Pure Crisp White: Main CTA display headline, brand typography, and button label
- #94A3B8 — Muted Slate Blue: Body copy, supporting descriptions, and inactive footer column links
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px heading, 44px display. Tracking -0.02em at display, 0.08em at uppercase labels. Engineered, calm, and authoritative. The clean neo-grotesque sans-serif provides frictionless legibility across dense data and fine navigation labels, embodying modern developer-focused enterprise infrastructure.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than physical drop shadows. A dark ambient vignette on the background photograph recedes behind bright, flat typographic planes, while inputs and status indicators utilize 1px subtle translucent borders against near-black fills to establish edge definition.
IMAGERY
A panoramic cinematic dusk landscape depicting rolling ridges and subtle field vegetation under a twilight sky, overlaid with a faint digital matrix texture. No stock humans or illustrative vector art are allowed; only natural atmospheric photography treated with heavy blue/indigo color grading.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious union of a moody, dark dusk landscape overlaid with a subtle matrix texture, directly paired with glowing soft-blue enterprise KPI metrics that transition cleanly into an opaque architectural footer floor.
MUST
- Blend the photographic landscape seamlessly into the dark solid background using a deep vertical gradient mask.
- Render primary quantitative metrics in distinct tints (#93C5FD and #FFFFFF) to create subtle grid variation.
- Use uppercase wide-tracked 11px typography for technical headers and eyebrow tags.
- Keep input and button corner radii cohesive at precisely 6px to 8px.
AVOID
- Do not use saturated warm colors like yellow, orange, or red for interactive states.
- Never float bright photographic imagery into the footer link area; keep the base strictly dark (#050814).
- Avoid fully rounded 999px pill buttons for primary actions; retain the structured 8px radius.
- Do not drop horizontal divider borders between navigation columns; use whitespace alone.
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 
