Design a dark-mode website section: deep-navy fintech architecture lit by electric blue glows, high-density data panels, and disciplined institutional typography.
LAYOUT
The top section utilizes a split-screen 50/50 hero format: left-aligned value propositions with dual CTAs and trust badges, matched on the right with a full-height application interface card. Below, the page transitions into a clean multi-column footer anchored by the brand badge and newsletter field on the left. Four neat taxonomy link columns occupy the center, balanced by an elevated contact promo card on the far right, all resting above a minimal legal bottom bar.
PALETTE (use these exact hex values)
- #040814 — Canvas Void: Primary screen canvas base background on which all elements and glow gradients sit
- #080f26 — Panel Background: Background fill for the interactive dashboard card and the talk-to-team footer callout card
- #1a2542 — Subtle Border: Dividing outlines for card perimeters, input containers, and structural horizontal partitions
- #2b66ff — Electric Cobalt: Primary CTA fill, key brand graphics, and focal interactive element styling
- #38bdf8 — Cyan Glow: Secondary headline gradient highlight, status line chart accent, and active pill tag text
- #22c55e — Metric Mint: Positive trend indicators, system uptime dots, and SLA success statuses
- #f8fafc — Text Primary: Main headlines, hero display text, critical metric counters, and input labels
- #94a3b8 — Text Secondary: Body copy, navigation links, metadata descriptions, and secondary interactive text
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.025em at display, -0.01em at body, +0.06em at badges. The typography communicates institutional confidence, modern engineering speed, and zero-nonsense back-office precision. Inter provides neutral, highly legible geometric anatomy that behaves reliably across big emotional display headers and minuscule 11px table logs. When substituting, choose Geist or SF Pro to preserve the tight modern tech aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is produced via subtle color stepping (from #040814 canvas to #080f26 panels) combined with low-opacity electric cyan and cobalt radial back-glows. Elevation is defined by crisp 1px borders rather than diffuse drop shadows. Inner dashboard surfaces maintain depth through nested container boxes with slightly lightened background fills.
IMAGERY
The imagery language avoids human photography completely in favor of precise, high-fidelity UI telemetry visualizations. The platform is represented through active data points, live SVG sparklines, status indicators, and embedded code snippets. Any illustrative imagery or generic stock vectors would break the analytical institutional credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the luminescent cyan text gradient ('in your back office.') perfectly echoed by the glowing telemetry line chart in the adjacent card. This color bridge ties the abstract business promise directly to the technical reality of the product.
MUST
- Use dual-tone headlines where the final emphasis phrase carries a cyan gradient (#f8fafc to #38bdf8).
- Keep borders hairline thin (1px) with low opacity (rgba(255, 255, 255, 0.08) or #1a2542).
- Align the bottom footer into clean thematic columns with a dedicated callout card on the far right.
- Utilize mint green (#22c55e) strictly for live system statuses, trend upticks, and positive badges.
AVOID
- Do not use harsh pure-black (#000000) backgrounds; rely on deep navy (#040814).
- Do not allow borders to exceed 1px thickness or feel heavy and high-contrast.
- Do not style secondary links with button containers; use clean inline typography with trailing arrows.
- Do not use warm colors like orange or red unless representing destructive error 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. Try in DraPub 
