Design a dark-mode website section: deep-space planetary perspective paired with luminous cyan gradients and crisp enterprise legal precision.
LAYOUT
Centered single-column hero stack spanning 1200px max-width. Sequence descends from floating top navbar to status pill, followed by centered 56px headline, three-line 16px subcopy, dual CTA button group, 4-column metric grid, and finally an enterprise trust strip. The curved planet horizon serves as the visual footer anchor.
PALETTE (use these exact hex values)
- #02050e — Cosmic Void: Deepest canvas background across entire viewport
- #0a101d — Orbital Card Surface: Subtle translucent container fill for metric cards and secondary buttons
- #38bdf8 — Atmosphere Cyan: Headline emphasis, metric icons, and primary gradient highlight
- #34d399 — Neon Aurora Mint: Badge indicator dot, secondary metric highlight, and gradient terminal
- linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #34d399 100%) — CTA Action Gradient: Primary conversion button background with smooth multidirectional glow
- #ffffff — Text Primary: High-emphasis display headlines, brand logo, and stat figures
- #94a3b8 — Text Secondary: Body copy, section subheadings, and descriptive captions
- #1e293b — Subtle Border Slate: Card borders, secondary button outlines, and pill borders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 28px subheading, 56px display. Tracking -0.03em at display, 0.08em at uppercase microcopy. Engineered, technical, and unflinchingly authoritative. The neo-grotesque sans-serif gives an algorithmic precision suited for high-stakes enterprise legal operations. Tight tracking at large sizes evokes Silicon Valley infrastructure products, while tracked uppercase microcopy conveys military/aviation caliber diligence.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely via luminosity against darkness rather than physical drop shadows. A subtle ambient gradient emanates from behind the center headline, while the curved Earth horizon provides atmospheric backlighting. Metric cards float over this celestial backdrop via 1px border strokes tinted with 10% white and faint inner glows.
IMAGERY
A photorealistic rendering of planet Earth viewed from low orbit occupies the bottom third of the frame, featuring city light clusters connected by thin luminescent curved network arcs. Twinkling point-light stars and soft volumetric space dust scatter across the upper corners. Any cartoon illustrations, flat vector artwork, or warm daylight office photography would clash severely with this motif.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line headline where 'Same-day,' cuts through the white typography in glowing electric cyan (#38bdf8), directly echoing the illuminated horizon arc of the planet below. This exact connection between the speed claim and the planetary network reinforces global instantaneous delivery. Misuse occurs when cyan is splashed indiscriminately across body text or icons.
MUST
- Keep background tones strictly in deep space navy-black (#02050e) without warm grey undertones.
- Apply the electric cyan (#38bdf8) accent selectively to emphasize turnaround metrics and key phrases.
- Use 9999px full pill geometry for all call-to-action buttons and status chips.
- Encase stat metrics in subtly bordered glass cards with 14px border radius and 1px borders.
AVOID
- Do not introduce warm hues like orange, yellow, or red into the primary visual hierarchy.
- Never use sharp, 0px-radius rectangular borders on cards or primary conversion buttons.
- Avoid flat black (#000000); always allow the atmospheric celestial glow to modulate surface darkness.
- Do not set paragraph body copy to pure white (#ffffff); reserve white exclusively for display typography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub