Design a dark-mode website section: deep-void operational telemetry grounding cleanly onto warm ivory editorial documentation.
LAYOUT
The page is organized into two starkly delineated structural planes. The upper half is an asymmetric two-column hero spanning an executive narrative on the left and an elevated telemetry panel on the right, punctuated by a 3-column trust ribbon. The lower plane shifts radically into an expansive 6-column editorial footer grid on a warm linen canvas.
PALETTE (use these exact hex values)
- #0d0e12 — Void Black: Deep space background for the hero and operational control plane sections
- #14161c — Console Graphite: Elevated background fill for telemetry containers and dashboard cards
- #f7f7f5 — Warm Ivory: High-contrast editorial foundation for footer directory and legal references
- #db4333 — Vermilion Red: Primary CTAs, send button, and terminal accent punctuation dots
- #22c55e — Operational Green: Status indicators, positive growth deltas, and live agent run state
- #23262f — Console Border: Hairline boundary dividing panels and metric columns in dark canvas
- #ffffff — Stark White: Primary headings, headline text, and key telemetry values
- #8c919d — Muted Slate: Secondary descriptors, feature captions, and dark mode sublabels
- #111215 — Ink Charcoal: Category headers and primary text labels in the light footer section
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 54px display. Tracking -0.03em at display, 0 at body. The typography balances ruthless operational engineering with bespoke editorial authority. Geist Sans provides sterile, high-density legibility in the display copy, while Geist Mono enforces structural rigor inside the telemetry tables. The character is technical, uncompromising, and corporate-ready.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through tone modulation rather than blurred dropshadows. Surfaces step from black (#0d0e12) up to graphite (#14161c) using crisp 1px stroke borders (#23262f) to create distinct elevation. The light footer relies completely on flat juxtaposition, abutting the dark section with razor-sharp division.
IMAGERY
Visual assets are strictly schematic and atmospheric: a faint particle nebula cloud in deep space provides depth behind telemetry, while the dashboard panel serves as the primary visual hero. Avoid illustrative cartoons, stock photographs, or decorative 3D renders; imagery must resemble precision instrumentation.
SIGNATURE DETAIL — the thing that makes this design itself
The stark, unblended horizontal threshold where an abyssal space console (#0d0e12) drops immediately into a warm ivory paper directory (#f7f7f5), tied together only by persistent vermilion punctuation dots. To use it properly, keep the divider razor-sharp with zero blur or gradient feathering.
MUST
- Retain the sharp boundary transition between the void black hero and ivory footer without gradient blends.
- Use vermilion (#db4333) strictly for active triggers, focus states, and intentional punctuation marks.
- Render all tabular and metric values in the telemetry console using a monospaced font.
- Maintain high contrast on the footer using dark charcoal text (#111215) against the linen backdrop (#f7f7f5).
AVOID
- Never add heavy drop shadows; depth is strictly maintained via surface color stepping and 1px borders.
- Do not bleed the light footer color up into the hero or create rounded card envelopes for the footer.
- Avoid using saturated accent colors other than vermilion (#db4333) and operational green (#22c55e).
- Do not center-align the hero text or footer links; keep text strictly left-aligned.
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 
