Design a dark-mode website section: precision developer infrastructure cloaked in deep void blacks, anchored by sweeping electric-blue curved light horizons and telemetry widgets.
LAYOUT
The composition follows a strict top-to-bottom developer journey across two integrated tiers. The upper tier centers all attention around an authoritative hero CTA with pill tag, display headline, description, button pair, and horizon arc. Below a seamless dark transition, the footer splits into a responsive grid: brand column with live telemetry card on the left, four navigation columns in the middle, and newsletter plus social icons on the right. A fine 1px rule cleanly closes the viewport with a subfooter utility bar.
PALETTE (use these exact hex values)
- #040711 — Canvas Void: Deepest background tone covering the entire page canvas and root container.
- #0a1020 — Surface Elevated: Faint elevated surface for telemetry widgets, newsletter inputs, and social icon tiles.
- #151f38 — Border Subtle: Hairline 1px dividers, card outlines, and horizontal footer rules.
- #2563eb — Primary Cobalt: High-emphasis primary button fill, horizon glow, and key focus states.
- #38bdf8 — Electric Horizon: Crest of the glowing curved horizon beam and active region indicator dots.
- #22c55e — Status Operational: Status indicator dot denoting all systems operational in telemetry panel.
- #ffffff — Text Primary: Primary display headings, button labels, and high-emphasis logo wordmarks.
- #94a3b8 — Text Secondary: Body copy, link list items, and newsletter description text.
- #64748b — Text Tertiary: Uppercase column category headers and copyright metadata labels.
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 52px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typography is clinical, modern, and unapologetically engineered, using a high-density grotesque sans-serif like Geist Sans or Inter. Negative letter-spacing (-0.035em) on the bold display headline conveys speed and tightness, while generous tracking (+0.08em) on 11px uppercase metadata provides sharp tabular clarity. It evokes top-tier developer tooling and infrastructure platforms without decorative distractions.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through optical luminosity and dark atmospheric layering rather than drop shadows. Flat surfaces (#0a1020) sit immediately atop the void canvas (#040711) using subtle 1px border strokes (#151f38). The sole atmospheric volume comes from the blue neon horizon arc sweeping beneath the CTA, projecting ambient light upwards.
IMAGERY
No photographic imagery or stock renders are present; the layout relies purely on vector geometry and light effects. The primary visual motif is an ethereal, curved neon horizon representing speed, low latency, and planetary-scale infrastructure. Any photography, 3D character illustrations, or isometric device mockups would break this technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping electric-blue curved horizon glow that cuts horizontally across the CTA base. It creates an optical illusion of a planetary boundary or fiber-optic velocity, turning an otherwise minimal text block into an epic infrastructure moment. It is misused when rendered as a blurry circular blob instead of a crisp, sweeping, low-curvature vector arc.
MUST
- Anchor the CTA section with a sweeping curved blue horizon glow across the lower border.
- Use strict uppercase 11px text with 0.08em tracking for all column titles and pill badges.
- Keep card backgrounds close to the base canvas (#0a1020 over #040711) with fine 1px borders.
- Incorporate real-time telemetry dots (green, cyan, magenta) to prove infrastructure live status.
AVOID
- Never use warm grey, beige, or pure flat pitch-black without dark navy undertones.
- Avoid thick button borders or box shadows that clash with the optical horizon glow.
- Do not omit the developer telemetry card from the footer left-column structure.
- Avoid center-aligning the navigation links in the footer columns.
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 
