Design a dark-mode website section: deep-space terminal glow and dual-horizon flares framing high-velocity developer infrastructure and utilitarian navigation.
LAYOUT
The section is divided into two major stacked structures: a prominent contained hero CTA card above and a multi-column directory footer below. Inside the CTA card, content is centrally aligned with auxiliary monospace technical details pinned to the top right. The footer distributes into an asymmetric 5-column layout: the brand and newsletter column occupies double-width on the left, followed by four equally spaced link columns on the right, terminating in a bottom legal split-bar.
PALETTE (use these exact hex values)
- #05070f — Void Black: Root page background behind CTA card and site footer container.
- #0a0f1d — Elevated Obsidian: Background fill for the primary CTA banner enclosing ambient lighting.
- #162035 — Subtle Grid Line: Card outlines, vertical column dividers, and wireframe perspective lines.
- #ef5d4e — Engine Coral: Primary button fill, hero emphasis text, logo mark, and footer category titles.
- #2872fa — Horizon Cyan Glow: Atmospheric left-side horizon flare accentuating developer speed.
- #e84738 — Solar Coral Glow: Atmospheric right-side horizon flare providing energetic warmth.
- #ffffff — Pure White: Display headings, primary button labels, and active logo text.
- #8c96ab — Slate Neutral: Body copy, footer links, badge text, and terminal commentary.
- #4f596d — Muted Ash: Input placeholder text, terminal flags, and legal copyright lines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 20px heading, 48px display. Tracking -0.03em at display, 0em at body. The typography conveys clinical precision, developer focus, and velocity. Inter provides a clean, modern, zero-fuss interface vehicle, while JetBrains Mono injects authentic CLI tooling credibility. If substitutions are necessary, Geist Sans and Geist Mono seamlessly match the stark, engineering-first aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is not constructed with drop shadows or skeuomorphic bevels, but entirely through luminous atmospheric gradients. Radial and linear edge flares in electric blue and coral radiate across a dark #0a0f1d surface, mimicking ambient backlighting behind the CTA container. Input fields and secondary buttons sink into the dark canvas through subtle, low-contrast boundary strokes.
IMAGERY
Visual assets are strictly schematic, vector-driven, and atmospheric. The aesthetic leans on curved horizon light sweeps, faint wireframe perspective grids, and monospaced code overlays. Realistic photography, cartoon mascots, or generic UI mockups are strictly prohibited as they destroy the sleek, high-compute terminal atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the curved dual-horizon glow spanning the CTA card base, where cyan light on the left blends over an ethereal perspective grid into warm coral light on the right. Misusing it by over-saturating the glow into solid shapes or removing the fine wireframe grid degrades it from an orbital developer landscape into a generic neon blur.
MUST
- Reserve the vivid #ef5d4e coral solely for key conversion buttons, category headers, and selective text emphasis.
- Maintain the 24px border-radius consistently on prominent floating container cards.
- Use JetBrains Mono or a similar monospaced font for all terminal commands and code symbols.
- Separate horizontal footer links and social lists with thin 1px vertical borders in #162035.
AVOID
- Do not color the entire headline in coral; only highlight semantic emphasis phrases.
- Avoid harsh high-contrast borders; keep surface card borders strictly near #162035.
- Do not use multi-color gradients inside buttons; keep the primary button solid #ef5d4e.
- Never drop generic photographs or 3D character illustrations onto this minimalist technical grid.
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. 在 DraPub 中尝试