Design a dark-mode website section: crisp developer ergonomics balancing radiant light cta surfaces against an ultra-dense obsidian command deck.
LAYOUT
The section is structured in two major vertical blocks. Top block: a floating responsive card spanning 1240px with a 55/45 split between headline copy and the code console. Bottom block: an expansive 5-column footer grid anchored on the left by brand narrative, badges, newsletter, and socials, balanced on the right by four link categories. A hairline border separates the main links from the legal/copyright base row.
PALETTE (use these exact hex values)
- #0d141f — Chassis Void: Master canvas background for the entire footer section and structural bottom container
- #ffffff — Deck Surface: Elevated contrast container hosting the main conversion headline, terminal preview, and primary triggers
- #121b28 — Terminal Canvas: Code block background providing an embedded dark environment within the light card
- #5346ea — Iris Electric: Primary action fill, input submit button, and text gradient accent on highlighted keywords
- #22c55e — Operational Emerald: Active system status indicator dot and 200 OK server response status chip
- #0f172a — High Contrast Dark: Primary typography inside the light card including the main headline and body copy
- #f8fafc — High Contrast Light: Primary typography in the footer including column text, headings, and logo
- #94a3b8 — Muted Slate: Secondary footer links, category headers, copyright metadata, and terminal parameters
- #1e293b — Terminal Border: Dividing lines between footer tiers and perimeter borders on dark compliance badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.03em at display, 0.05em at uppercase labels. The voice is hyper-precise, technical, and unflinching, projecting enterprise readiness and hardware-grade security. Inter conveys uncompromising digital clarity, while JetBrains Mono provides exact code execution context. If substituting, choose Geist or Plus Jakarta Sans to maintain the sharp geometric aperatures and tight tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled through surface layer inversion rather than layered drop shadows. The top card uses a wide, extremely soft atmospheric blur (0 20px 40px -15px rgba(0,0,0,0.05)) against a faint warm glow, making it float lightly above the dark floor. Internal terminal elements use a flat 1px recessed stroke (#1e293b) with zero blur.
IMAGERY
This design strictly eschews photography, 3D renders, or human portraits in favor of structured code artifacts and schematic SVG hardware marks. Visual richness is derived entirely from code-block typography, micro status indicators, and geometric iconography. Any illustrative additions should be limited to circuit-like line art or minimal SVG diagrams.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the luminous dual-environment CTA card hosting an authentic CLI code terminal with bottom-line telemetry metrics (latency, model, region, TLS) directly juxtaposed against consumer-grade enterprise onboarding triggers. It proves capability before purchase.
MUST
- Retain the strict visual split between the light CTA card and the dark foundation footer.
- Use uppercase tracking (0.08em) strictly on metadata eyebrows and column category headers.
- Keep terminal metrics styled with JetBrains Mono to clearly delineate machine data from human copy.
- Accentuate exactly one critical headline word ('your') with brand violet or a subtle gradient.
AVOID
- Do not render the main CTA card in dark mode; the contrast shock is deliberate.
- Never use serif fonts or decorative scripts; retain precise engineering neo-grotesque type.
- Do not crowd the footer link columns; preserve at least 24px vertical rhythm between rows.
- Avoid using bright multi-color syntax highlighting; limit terminal colors to slate, white, and violet.
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 
