Design a dark-mode website section: a high-altitude atmospheric gradient plunging directly into an exacting midnight operations terminal.
LAYOUT
The composition follows a strict top-to-bottom binary hierarchy. The top half is an expansive, center-aligned conversion chamber enclosed in a rich cobalt gradient with generous vertical padding (~110px). Directly beneath, the layout shifts to a structured, edge-to-edge dark navy canvas hosting a six-column footer grid. The footer concludes with an expansive horizontal meta-bar containing legal links and copyright info separated by ample negative space.
PALETTE (use these exact hex values)
- #1d7dfa — Cobalt Zenith: Luminous primary background gradient center for the high-impact conversion stage
- #0b111e — Midnight Obsidian: Solid base canvas for the entire footer, navigation, and input areas
- #ffffff — Primary White: Primary display text, brand marks, and the solid fill of the core CTA button
- #cbe1fc — Ice Tint: Desaturated cyan-white used for CTA subheadings, trust-badge labels, and eyebrow tags
- #9aa8be — Slate Steel: Secondary footer text, navigation link items, and contact metadata
- #627594 — Subdued Cobalt: Small uppercase column category headers and micro-copy across the footer
- #2762f8 — Electric Royal: Solid primary action color for newsletter submit button and logo dot cluster
- #1b2537 — Midnight Border: Stroke outlines for dark input containers and subtle divider borders
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 52px display. Tracking -0.03em on display, +0.06em on captions. The typography is technical, contemporary, and engineered, relying heavily on tight-kerning geometric grotesks like Plus Jakarta Sans or Inter. At display scale, tight negative tracking gives the bold headlines an authoritative, enterprise-grade presence. In the lower regions, wide-tracked micro uppercase typography creates an operational, dashboard-like rhythm that suits back-of-house automation software.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is primarily generated atmospherically rather than through layered drop shadows. The top conversion zone radiates light outwards via a high-value blue gradient and an active luminous halo surrounding the primary CTA button. The footer is intentionally planar, anchoring the page with flat dark surfaces broken only by faint 1px border strokes on interactive input fields.
IMAGERY
There are no photographic assets; the visual interest is carried solely through geometric vector wireframes and atmospheric lighting. Subtle, thin concentric rings mimic radar or topographical blueprints in the lower right of the gradient hero. Any photography added must be back-of-house operational documentary style, desaturated or tinted to avoid clashing with the electric cobalt.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual hallmark is the radiant white pill CTA glowing against the high-saturation cobalt gradient, paired with the immediate step-down into an architectural midnight footer. Losing either the radiant diffuse glow or the sudden plunge into the dark footer grid would strip the identity of its enterprise-grade tech feel. It is commonly misused by making the button glow overly opaque or by softening the sharp horizon between the blue hero and the dark footer.
MUST
- Use pure white text only on the dark blue gradient for top-level headers to preserve high visual hierarchy.
- Retain the diffuse glow (0 0 25px rgba(255,255,255,0.4)) strictly on the white primary CTA button.
- Format all footer column headers in strict uppercase with at least 0.08em letter spacing.
- Separate inline proof points using hairline vertical rules with 50% opacity of the text color.
AVOID
- Do not introduce sharp rectangular borders on conversion action buttons; stick exclusively to pill radii.
- Avoid using saturated accent colors in the footer navigation; keep links within slate gray (#9aa8be).
- Do not drop the footer background below #0b111e into pure jet black, which breaks the blue-toned atmosphere.
- Never center-align the footer columns; keep all footer content 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 
