Design a dark-mode website section: deep-space developer console hovering over a warm planetary limb with stark high-density telemetry and glowing accents.
LAYOUT
The page vertically flows from a centered hero headline with dual CTA buttons directly into a 1200px wide code console card. Directly beneath, the footer begins with a 6-column modular architecture: company branding and socials on the left, four navigation link columns in the center, and a newsletter card on the right. Below this sits a full-width segmented status ribbon, finalized by a minimalist legal row with copyright and inline policy links.
PALETTE (use these exact hex values)
- #030712 — Space Void: Primary background canvas creating deep cosmic immersion across the entire layout
- #040d1a — Console Surface: Backdrop fill for code terminal card and status indicator telemetry banner
- #10233b — Cyan Wireframe Border: Structural 1px outlines on terminal card, buttons, input fields, and status bar
- #1d6bf3 — Hyper Blue: Primary CTA button fill, submit button icon background, and heading accent word
- #4c8cfc — Electric Azure: Terminal title accents, command line tokens, and secondary focus states
- #10b981 — Telemetry Emerald: Status indicator dots signaling live API uptime and healthy microservice state
- #ff7235 — Solar Dawn: Atmospheric background glow along horizon simulating dawn over planetary curved terrain
- #ffffff — Signal White: High-emphasis hero text, code quotes, logo mark, and primary labels
- #8ba1b7 — Muted Slate: Secondary documentation copy, navigation links, and parameter descriptions
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 54px display. Tracking -0.03em at display, 0 at body. The voice is razor-sharp, technical, and enterprise-grade, balancing cold precision with human warmth through the juxtaposition of clean modern sans headings and dense terminal monospace. Geist Sans provides mathematical clarity in headings, while JetBrains Mono ensures developer credibility in the API code block and telemetry readouts.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is created without drop shadows, using 1px stroke borders in #10233b over slightly elevated background fills (#040d1a). The background horizon atmosphere provides a natural low-frequency backlight that separates the foreground terminal console from the infinite space above.
IMAGERY
A photorealistic horizon curve of a rugged mountain or planetary surface at twilight, illuminated by an intense orange atmospheric glow (#ff7235) bleeding upward into a field of stars. Avoid cartoonish illustrations or 3D vector blobs; all imagery must evoke cosmic scale and physical realism.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal console floating immediately above an atmospheric dawn horizon, fusing cinematic warmth with a live-telemetry status ribbon. To use it properly, keep the orange glow strictly ambient behind the dark glassmorphic terminal, ensuring all foreground metrics remain crisply legible in high-contrast cyan and emerald.
MUST
- Always color the accent phrase in hero headings with electric blue (#4c8cfc) against pure white.
- Use uppercase JetBrains Mono with 0.08em letter-spacing for all category headers in dark surfaces.
- Indicate operational status using 6px solid green dots (#10b981) preceding status labels.
- Enclose technical code blocks and status bars inside 1px borders colored #10233b.
AVOID
- Never use pure black (#000000); always tint dark backgrounds with deep navy (#030712).
- Do not drop the command prompt icon '>_' from primary developer CTA buttons.
- Avoid pill radius on cards; reserve 9999px strictly for status badges and pills.
- Never render code syntax without explicit line numbering and monospace alignment.
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