Design a dark-mode website section: deep galactic dark mode anchored by vivid nebula gradients, monospace telemetry cards, and multi-tier developer footer architecture.
LAYOUT
The page flows from a left-heavy hero CTA block into an expansive nebula field on the right. Below the hero sits a wide, multi-cell quickstart terminal that bridges into the main footer. The footer is organized into five structured columns (brand summary, three link stacks, newsletter subscription) followed by a horizontal subfooter bar with real-time status telemetry.
PALETTE (use these exact hex values)
- #06080e — Void Black: Primary page background across hero and base footer canvas.
- #0d111b — Surface Midnight: Background for floating quickstart card and input elements.
- #f69d88 — Nebula Peach: Warm start point of primary action buttons and cosmic particle glow.
- #a382e8 — Nebula Violet: Cool trailing point of gradient buttons and dot accents.
- linear-gradient(90deg, #f69d88 0%, #a382e8 100%) — Action Gradient: Fills primary interactive elements including main CTA and submit button.
- #ffffff — Pure White: Hero display text, logo mark, and section titles.
- #94a3b8 — Slate Muted: Secondary description copy, subheadings, and terminal headers.
- #64748b — Charcoal Faint: Footer navigation links, copyright, and inactive placeholder text.
- #22c55e — Operational Green: Live system status badge indicator dot in the subfooter.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.03em at display, 0 at body. The typography pairs modern, confident grotesque sans-serifs (Inter/Geist) with precision developer monospace typography (JetBrains Mono). The voice is technical, highly authoritative, and engineered for reliability, matching modern observability infrastructure tools.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 12px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous cosmic background gradients contrasting against crisp, flat obsidian cards with 1px semi-transparent borders (#ffffff14). Surfaces do not cast diffuse drop shadows; instead, translucent overlays and dark borders give the illusion of floating directly in space.
IMAGERY
The visual anchor is a hyper-detailed, swirling spiral nebula composed of cosmic stardust, warm golden peach light, and cold violet particles sweeping across the top-right quadrant. Editorial graphics must remain abstract, astronomical, and physics-inspired, avoiding cartoon illustrations, 3D clay graphics, or generic office photos.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping cosmic stardust spiral in the upper right paired with the four-column monospace quickstart terminal card sitting directly atop the comprehensive footer architecture.
MUST
- Keep terminal code snippets strictly monospace with muted label headers.
- Use the peach-to-violet gradient sparingly, limited to primary CTA buttons and subtle accents.
- Maintain high-contrast white text for primary headers against the cosmic void background.
- Use 1px subtle borders (#ffffff14) to give structure to transparent and glass surfaces.
AVOID
- Do not saturate secondary buttons; keep them dark charcoal with faint borders.
- Avoid harsh pure-black backgrounds; use cosmic void #06080e to preserve nebula blending.
- Do not use heavy box shadows; rely on hairline borders and deep background contrasts.
- Never make footer links brighter than 50% opacity slate to avoid competing with headings.
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