Design a dark-mode website section: cosmic telemetry meets polished enterprise infrastructure in deep teal voids.
LAYOUT
The page transitions from an open, asymmetric two-column CTA block (narrative copy on the left, planetary telemetry arc on the right) into a structured multi-column footer beneath a full-width hairline boundary. The footer organizes into brand identity on the left, four equidistant link stacks in the center, and a newsletter capture card on the right, terminating in a symmetrical sub-footer legal bar.
PALETTE (use these exact hex values)
- #040d12 — Abyssal Void: Root background canvas throughout CTA and footer environments
- #081820 — Subsurface Depth: Form inputs, icon button surfaces, and card-level backgrounds
- #5eead4 — Orbital Filament: Eyebrow headings, headline highlight, column headers, and primary CTA fill
- #f59e0b — Atmospheric Amber: Planetary limb lighting and particle accents in key imagery
- #132a36 — Telemetry Border: Footer separation rules, newsletter input borders, and social icon rings
- #ffffff — Starlight White: Primary headline phrases, brand wordmark, and emphasized controls
- #8498a4 — Muted Stratum: Descriptive body copy, sub-links, and copyright legal copy
- linear-gradient(135deg, #6ee7b7 0%, #2dd4bf 100%) — Primary Action Gradient: Primary CTA fill delivering high-contrast luminous affordance
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.02em at display, +0.12em at caps. The typographic tone is authoritative, highly technical, and calm, characteristic of high-end autonomous and geospatial intelligence systems. Inter or Plus Jakarta Sans provides crisp legibility across dense technical lists while commanding weight in the dual-tone display headline.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 12px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminescence and planar translucency rather than traditional box-shadow offsets. Surfaces remain flat against the abyssal background, while glowing orbital filaments and warm planetary limb illumination create atmospheric z-axis depth behind crisp, sharp interface elements.
IMAGERY
The imagery features a macro view of Earth's curve seen from orbit, styled as an AI sensor overlay with glowing golden population telemetry and sweeping cyan-teal fiber-optic trajectories. Strictly avoid flat vector clip art, generic stock cityscapes, or daylight photography.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline paired with a trailing curved planetary arc that cuts diagonally across the viewport, bridging marketing copy with complex telemetry. Misusing this means applying the mint green highlight randomly to non-critical text rather than strictly to the terminal value-prop phrase.
MUST
- Use uppercase tracking (0.12em) strictly on 11px taxonomy headers and eyebrows.
- Reserve the vivid mint (#5eead4) for the most vital headline phrase and primary conversion triggers.
- Separate content zones with 1px hairline borders tinted in subtle slate-teal (#132a36).
- Maintain high contrast by keeping secondary text strictly above #758b99 on dark backgrounds.
AVOID
- Never use pure black (#000000); preserve the tinted cyan-teal abyssal depth (#040d12).
- Do not style footer taxonomy headers in white; they must use the accent mint tone.
- Avoid sharp 0px corners; buttons and input modules require rounded corners (10px-12px).
- Never apply high-contrast drop shadows; rely on luminous linear gradients for elevation.
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