Design a dark-mode website section: pristine high-contrast light workspace floating securely above a midnight infrastructure canvas.
LAYOUT
The screen flows from an expansive isolated white island down into a deep obsidian multi-column footer. Inside the island, a balanced two-column asymmetric hero pairs pitch copy on the left with an expansive 55% width product console on the right. Below the island, the dark footer organizes brand identification on the far left, four equidistant link stacks in the center, and newsletter capture on the far right, capped by a minimal copyright legal strip.
PALETTE (use these exact hex values)
- #040814 — Obsidian Deep: Outer canvas base background and primary footer container tone
- #ffffff — Pure White: Primary hero island surface and dashboard card background
- #2b4bee — Electric Cobalt: Primary CTA button background, key headline emphasis, and active dashboard telemetry
- #0a0f1d — Ink Slate: Hero headline text, prominent KPI numbers, and high-emphasis labels
- #4b5565 — Muted Ash: Hero body paragraph copy and secondary UI labels
- #8b94a5 — Footer Slate: Navigation links, copyright line, and body text in the dark footer
- #e2e8f0 — Subtle Border: Outlines on secondary hero button, trust badges, and dashboard dividers
- #0d1527 — Terminal Dark: Micro-terminal log preview bar at the bottom of the dashboard card
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.025em at display, 0 at body, 0.06em at uppercase badges. Inter conveys rigorous, enterprise-grade engineering credibility with zero stylistic idiosyncrasies to distract from data. Its tight negative display tracking lends a modern SaaS authority to the 44px headline, while standard letterforms guarantee immediate clarity across metrics and micro-labels. JetBrains Mono provides deliberate contrast in the dark telemetry log to underscore developer utility.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through a dramatic card-in-card hierarchy rather than layered borders. The primary hero canvas acts as an elevated island resting on a flat midnight sheet, while the nested dashboard card floats further forward using a soft, wide-dispersion drop shadow (0 20px 40px -15px rgba(2, 6, 23, 0.08)). No heavy inner borders or skewing effects are needed.
IMAGERY
Vector product UI telemetry and clean line charts replace photographic imagery entirely. The visual asset is a hyper-precise dashboard mock depicting metric cards, an SVG risk wave, and an embedded terminal log. Human imagery or complex 3D renders would clash with the analytical, infrastructure-grade narrative.
SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the 'white island enclave'—a full hero presentation encapsulated within a mammoth 32px rounded white card floating directly on an obsidian dark-mode page frame. The design is degraded immediately if the white container is stretched full-bleed to eliminate the surrounding dark frame or if the footer is converted to light mode.
MUST
- Wrap the entire hero content in a single massive white card with 32px rounded corners against the dark canvas.
- Accent exactly one pivotal word in the primary display heading using cobalt blue (#2b4bee).
- Pair primary solid blue buttons with matching 10px-radius bordered white companion buttons.
- Display micro trust markers below CTA buttons in 13px gray with matching icon glyphs.
AVOID
- Do not extend the white hero card to touch the browser edges; preserve generous dark outer margins.
- Never use dark backgrounds for the hero copy area—all pitch content belongs on the white island.
- Avoid loud solid colors for secondary buttons; keep them strictly white with light gray borders.
- Do not omit the dark log console inside the dashboard mock, as it grounds the technical aesthetic.
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 
