Design a dark-mode website section: cosmic deep-space darkroom illuminated by hyper-saturated cyan-to-sapphire streaks and monumental masthead typography.
LAYOUT
Structured top-to-bottom in two distinct sections: first, a centrally aligned call-to-action block with high vertical clearance (approx 96px top/bottom), featuring a headline, paragraph, dual buttons, and micro-trust items. Below, the page transitions into a full-bleed footer anchored by a container-wide 'ARZANA' logotype, followed by a 6-column layout (Brand/API column, four link directory columns, and a newsletter/social column), ending with a bottom baseline copyright bar.
PALETTE (use these exact hex values)
- #030712 — Deep Cosmos Base: Deepest canvas background framing the entire CTA and footer structure
- #070b19 — Midnight Charcoal: Slightly elevated surface background used in the code block and input fields
- #2563eb — Electric Cobalt: Solid primary action button fill and leftward start of the hero gradient
- #38bdf8 — Cyan Flare: Mid-point glowing gradient highlight in headline and masthead logo
- #6ee7b7 — Mint Aurora: Right-side terminal gradient stop on the colossal brand name and sparkles
- #1e293b — Subtle Border Slate: Fine outlines for secondary button, input wrapper, and API code snippet box
- #ffffff — Text Pure White: Main headline text, primary button labels, and section headings
- #94a3b8 — Muted Slate Gray: Body copy, subheaders, and passive directory column links
- #475569 — Faint Timestamp Gray: Terminal line numbers, copyright notice, and legal sub-links
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700/900. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 42px heading-lg, 110px display. Tracking -0.03em at large sizes, -0.01em at body. The voice is authoritative, modern, and developer-first. The sans-serif (Inter) delivers clean architectural precision with tight tracking, while the monospace accent brings immediate technical credibility. Substitution with Geist or SF Pro maintains this crisp engineering posture.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through luminous optical lighting rather than elevation drop shadows. Atmospheric cyan and indigo radial blooms behind the CTA copy and bottom-right corner give the perception of an illuminated space horizon above an infinite dark ground plane.
IMAGERY
No photographic imagery is used. Atmospheric visual language relies entirely on vector lighting effects—specifically a planetary orbital limb light streak on the right edge and geometric 4-point sparkle stars beside the footer wordmark.
SIGNATURE DETAIL — the thing that makes this design itself
The massive, horizon-spanning 'ARZANA' footer wordmark paired with twin mint sparkles and an immediate code snippet directly beneath it. This transforms what is traditionally a forgotten footer area into a cinematic architectural billboard.
MUST
- Use high-contrast white text against the #030712 void background for optimal legibility.
- Restrict bright gradient fills (blue to mint) exclusively to focal words and the masthead logo.
- Maintain strict multi-column alignment in the footer navigation using 14px muted gray links.
- Ground developer audience interest with an authentic, syntax-highlighted monospace terminal card.
AVOID
- Do not introduce light grey backgrounds or white cards that break the cosmic aesthetic.
- Never make the giant brand masthead a solid flat white; it requires the horizontal gradient.
- Avoid using rounded-pill (999px) buttons; stick to the structured 6px boxy aesthetic.
- Do not clutter the cosmic gradient with heavy structural borders or drop shadows.
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