Design a dark-mode website section: deep midnight canvas punctuated by electric cyan gradients and rigorous legal metrics.
LAYOUT
The layout follows a stacked inverted pyramid structure: a massive top CTA banner spanning the grid width, followed by a balanced 6-column footer layout. The banner splits evenly into a 50% left-aligned narrative column and a 50% right-aligned metric cluster. Below, the footer anchors with brand info on the left, four concise navigation columns in the center, and a newsletter capture on the far right, terminating in a single-line horizontal copyright bar.
PALETTE (use these exact hex values)
- #060d17 — Canvas Deep Navy: Deepest foundation background behind the footer and wrapper
- #0a1320 — Card Surface Slate: Background fill for the master CTA container and input boxes
- #162738 — Border Hairline Slate: Crisp borders defining the main banner, metric dividers, and inputs
- #2cd5e0 — Cyan Primary: Primary brand accent for active CTAs, logos, and glowing badges
- #27e3bc — Electric Gradient Start: Mint start tone in primary CTA buttons and badge dots
- #30b6f6 — Electric Gradient End: Sky blue finish tone in primary CTA buttons and glow streaks
- #ffffff — Text Pure White: High-emphasis display titles, card numbers, and brand headlines
- #8493a8 — Text Muted Slate: Paragraphs, footer links, metric labels, and placeholder copy
- #4e5e73 — Text Dim Slate: Sub-captions, copyright notice, and inactive iconography
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 28px heading, 44px display. Tracking -0.03em at display, 0.05em at caps. The typography is clinical, ultra-modern, and authoritative. Using a neutral geometric neo-grotesque like Inter or Plus Jakarta Sans strips away antique legal connotations, replacing them with software-grade velocity. Tight negative letter-spacing on headline titles creates an urgent, editorial impact suited to instant turnaround claims.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using a darkroom aesthetic rather than multi-layered drop shadows. Surfaces glow from within using faint radial light pools and an upper-right corner cyan lens streak that mimics light reflecting off curved glass. Hairline borders (#162738) define edges, separating nested components cleanly from the void.
IMAGERY
No photographic imagery is used; the identity relies exclusively on precise geometric vectors, neon light leaks, and sharp technical iconography. Icons are rendered in thin 1.5px monoline stroke with uniform 20px bounding boxes. Any photographic assets would conflict with the precise, AI-native fintech/legaltech precision.
SIGNATURE DETAIL — the thing that makes this design itself
The upper-right glowing cyan arc beam within the dark rounded banner card. It creates the optical illusion of illuminated edge-lit glass, making the metric box feel like high-grade hardware. Misusing it means adding heavy glows everywhere—it only works when isolated as a singular diagonal accent against vast deep slate space.
MUST
- Wrap high-impact CTA sections inside a single generous master card with 24px corner radius.
- Use electric cyan (#2cd5e0) sparingly for emphasis words, primary buttons, and metric highlights.
- Maintain strict dark navy (#060d17) contrast so hairline borders (#162738) remain razor sharp.
- Pair numeric metrics with crisp 11px uppercase captions with tracking set to at least 0.06em.
AVOID
- Never introduce warm colors like red, orange, or yellow that break the cool technical cyan palette.
- Do not remove the subtle perimeter borders; without them, midnight surfaces collapse into each other.
- Never use solid pure white fills for secondary buttons or input backgrounds.
- Do not set footer link text to pure white; keep it muted (#8493a8) to preserve hierarchy.
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 
