Design a dark-mode website section: deep midnight terminal precision illuminated by warm coral impulses and structural circuit diagrams.
LAYOUT
The screen uses a two-tier structure. The top hero is a split layout: left column contains readiness badge, headline, CTA cluster, and trust badges, while the right column hosts an asymmetric interactive flow diagram. The bottom footer spans the full width with a left brand/newsletter panel followed by four equally spaced multi-row navigation columns, separated by a hairline rule above the copyright sub-footer.
PALETTE (use these exact hex values)
- #0b0d11 — Deep Midnight Base: Primary background canvas across the entire interface layout
- #12161c — Node Surface: Background for schematic node cards and form inputs
- #1d222b — Border Hairline: Structural dividing rules, card borders, and connector pathways
- #ee5a45 — Signal Coral: Primary action buttons, headline accent word, and brand logo mark
- #3dd68c — Telemetry Mint: System status indicators, readiness badges, and verified checkmarks
- #3b82f6 — Node Circuit Blue: Connector pins and active sequence dots in the simulation graphic
- #ffffff — Primary Text: Hero headline titles, section headers, and logo text
- #8c96a5 — Muted Secondary: Descriptive paragraphs, body copy, and navigation column links
- #4e5765 — Dim Tertiary: Footer copyright, legal disclaimers, and node sub-labels
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Text,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 14px body, 16px body-lg, 20px heading, 48px display. Tracking -0.02em at display, 0.05em at caps. Engineered, clinical, and high-velocity. Inter or a comparable geometric sans provides neutral precision, allowing the bold white title and coral inflection point to communicate authority without tech jargon overwhelm.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through layer contrast and luminous glows rather than heavy drop shadows. Card surfaces (#12161c) sit subtly above the #0b0d11 base, outlined with 1px dark grey borders (#1d222b). Focal nodes gain prominence via faint ambient radial blurs underneath the diagram wireframe.
IMAGERY
There are no photographic assets or rendered 3D characters present. Visual language relies entirely on vector schematics, minimal icon glyphs (database, graph, neural nodes), and circuit-like node lines representing data infrastructure.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone hero inflection: an authoritative stark white headline paired with an unexpected warm coral terminal clause (', at scale.'), directly mirrored by the primary action button and schematic circuit highlights.
MUST
- Reserve the coral accent (#ee5a45) strictly for key actions, brand marks, and single-phrase punch words.
- Use 1px subtle borders (#1d222b) on dark cards instead of prominent drop shadows to define bounds.
- Keep technical metadata and flow indices in uppercase tracked text at 11px to 12px.
- Use thin orthogonal connecting lines to communicate procedural architecture.
AVOID
- Never introduce heavy skeuomorphic gradients or large blurred drop shadows.
- Do not set large body paragraphs in pure white (#ffffff); use muted slate (#8c96a5).
- Avoid pill-shaped radiuses on square cards or functional diagram nodes.
- Do not use multi-color spaghetti wiring; stick to restrained 1px connector lines with single-color dot nodes.
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 
