Design a dark-mode website section: mission-critical developer terminal meets deep-navy fintech intelligence canvas with cyan luminescence.
LAYOUT
The layout is divided into three distinct vertical acts: an asymmetric dual-column CTA zone (hero copy and buttons on left, code terminal card on right), a full-width 4-column trust badge strip, and an expansive 6-column footer grid terminating in a bottom legal and system status bar.
PALETTE (use these exact hex values)
- #02060b — Canvas Void: deepest base layer background across footer and main container
- #060d16 — Panel Surface: code card surface and inner container background
- #162536 — Border Subtle: hairline dividing strokes, code snippet borders, and secondary buttons
- #00b4d8 — Cyan Primary: primary call-to-action fills, glowing accents, and active tab indicators
- #22c55e — Operational Green: pulsing operational status indicator dot in the sub-footer
- #ffffff — Text Crisp: headings, primary button text on dark, and active tab labels
- #8493a5 — Text Muted: subheadings, navigation links, and body copy
- #02131d — Text Dark Button: high-contrast bold text atop solid cyan button fills
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 42px display. Tracking -0.02em at display, 0 at body. The voice is analytical, precise, and unapologetically engineered for enterprise and developer audiences. Inter provides an authoritative, neutral vehicle for interface typography, while JetBrains Mono reinforces the rigorous API-first architecture.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through glowing radial cyan luminescence behind interactive items rather than conventional drop shadows. Panels and code cards sit slightly proud of the deep navy background via subtle 1px border highlights (#162536) and a 1-step lighter dark surface (#060d16).
IMAGERY
No photographic imagery is present. Visual interest is driven entirely by technical interface mockups (syntax-highlighted terminal windows), crisp geometric outline icons, and soft cyan ambient radial lighting.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column terminal CTA paired with an ambient cyan radial backlight and a 4-part segmented trust bar below it. This instantly anchors the product as a reliable, production-ready enterprise developer tool.
MUST
- Keep background canvas exceptionally dark (#02060b) to maximize cyan luminescence and code contrast.
- Use JetBrains Mono exclusively for API requests, endpoints, and code blocks.
- Enclose the CTA interactive preview in a sleek 1px bordered dark panel with 10px corner radius.
- Highlight security compliance credentials using 4 distinct bordered segments with cyan line icons.
AVOID
- Never use pure black (#000000); always tint dark backgrounds slightly into navy-slate.
- Do not introduce warm colors like orange, yellow, or red outside of specific error states.
- Avoid thick borders greater than 1px; use precise, technical micro-borders (#162536).
- Never style body or navigation text in saturated cyan; reserve cyan for interactive hits and active tabs.
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 
