Design a dark-mode website section: deep midnight canvas electrified with terminal cyan accents and crisp mono telemetry for logistics infra.
LAYOUT
The top section features a wide hero card split into value proposition copy on the left and a live API terminal on the right. Directly beneath, the footer begins with an operational identity cluster (logo, summary, 2x2 telemetry grid) followed by three navigation columns, a company column, and a newsletter capture block. The page closes with a bottom bar displaying global operational status and legal terms.
PALETTE (use these exact hex values)
- #030914 — Canvas Dark: Root background canvas providing high-contrast void depth
- #050F1E — Panel Dark: CTA banner and nested terminal surface fill
- #0C243B — Border Cyan Muted: Outlines for banner container, terminal frame, and status cards
- #4DE7FE — Neon Cyan: Primary action button, active telemetry links, and arrow accents
- #22C55E — Mint Green: Live indicators, operational status dots, and success pings
- #FFFFFF — Text High: Primary display headlines, card headings, and active titles
- #94A3B8 — Text Secondary: Body descriptions, column navigational links, and copyright notice
- #6EE7B7 — Text Terminal: Key-value highlights and curl output payloads inside the code snippet
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 36px heading. Tracking -0.02em at headlines, 0 at body. The voice is hyper-precise, developer-focused, and robust. It utilizes Inter's neutral geometric readability for high-speed scanning alongside JetBrains Mono's mechanical aesthetic to communicate computational authority.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created flatly through luminance layering. The base canvas sits at pitch #030914, overlaid by card panels at #050F1E framed by subtle #0C243B borders, giving an architectural blueprint feel rather than a floating material look.
IMAGERY
No photographic imagery is present. The entire visual impact relies on SVG wireframe logos (hexagonal isometric cube), code syntax strings, and miniature status badges.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column CTA container marrying an executive pitch on the left with an active cURL terminal on the right, punctuated by an electric cyan (#4DE7FE) primary action button with two-tier stacked typography.
MUST
- Use uppercase JetBrains Mono with 0.15em tracking for all section titles and technical tags.
- Pair live system metrics with glowing 6px green dots (#22C55E) for authentic infrastructure credibility.
- Keep borders strictly at 1px thickness using muted midnight cyan (#0C243B).
- Use high-contrast electric cyan (#4DE7FE) exclusively for primary interactions and critical accents.
AVOID
- Never introduce warm colors like orange, red, or yellow except for destructive API error states.
- Do not use drop shadows with high blur radii; lean on crisp borders and subtle radial surface gradients.
- Avoid standard pill radii on large CTA boxes; reserve 999px strictly for tiny badges.
- Do not set headline typography in monospace; reserve mono strictly for data and labels.
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 
