Design a dark-mode website section: tactical aerospace instruments glowing softly against an oceanic abyss.
LAYOUT
The top section is an asymmetric split screen: conversion copy anchored to the left with an embedded, glowing telemetry interface preview commanding the right half. Beneath this, a subtle full-width divider (#111c30) introduces the footer ecosystem. The footer distributes company branding and newsletter capture on the far left, four columns of categorized technical links in the center, and a dedicated contact card on the right.
PALETTE (use these exact hex values)
- #040914 — Abyss Base: Primary background canvas creating atmospheric depth and extreme contrast.
- #0a1326 — HUD Card Surface: Raised dashboard cards and interactive module backgrounds.
- #0d1b33 — Deep Slate Surface: Sub-panels, nested cards, and inner dashboard widgets.
- #162744 — Tactical Border: Delicate 1px borders delineating dashboard cards and input containers.
- #5054ea — Mission Periwinkle: Primary CTA button background and prominent action highlights.
- #e87b64 — Sunset Coral: Terminal gradient stop on hero typography, secondary CTA links, and support badges.
- #4793f7 — Telemetry Cyan: Initial gradient stop on hero headline and sensor sparklines.
- #2bd980 — Status Green: Live system indicators, status checkmarks, and positive delta readouts.
- #ffffff — Pure Mission White: High-priority headings, prominent labels, and active UI values.
- #7f93b0 — Muted Spec Grey: Body copy, navigation links, and auxiliary telemetry units.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em on display, +0.08em on tactical labels. The typographic tone is authoritative, aerospace-spec, and strictly engineered. Set in a razor-sharp neo-grotesque like Inter, the letters feature clean vertical metrics that project mission-critical reliability under extreme conditions. The uppercase utility labels inject an instrumentation cadence that balances the fluid, poetic headline copy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly architectural, produced through layered luminous planes rather than blurred drop shadows. Base level 0 is an expansive abyss, level 1 is a softly bordered device frame (#162744), and level 2 consists of nested telemetry tiles (#0c172d) punctuated by crisp micro-status lights.
IMAGERY
Imagery is entirely replaced by operational software telemetry and functional UI instrumentation: circular progress arcs, data sparklines, and mission coordinates. Real-world photography is avoided entirely, reinforcing cold aerospace-grade reliability and software-hardware integration.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline gradient shifting smoothly from periwinkle cyan (#6c9ef5) into soft mission coral (#d97d74) right at the core emotional hook. To execute properly, ensure the gradient only affects the final two or three punchline words while the rest remains crisp matte white.
MUST
- Reserve vibrant gradients strictly for key headline words and the primary interactive button.
- Enclose all telemetry and HUD units in subtle 1px border strokes (#162744).
- Keep background surfaces deeply saturated in midnight abyss tones, never neutral neutral grays.
- Use uppercase tracking (+0.08em) only on technical labels, categories, and eyebrow text.
AVOID
- Never introduce pure black (#000000) or muddy neutral grays (#222222) into backgrounds.
- Do not apply heavy drop shadows; depth must come from subtle borders and 10% lighter fill levels.
- Avoid pill-shaped radiuses on primary rectangular CTA buttons; cap radius at 10px to maintain tactical precision.
- Never color entire headlines in gradient; limit gradient treatment to the climax phrase.
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 
