Design a dark-mode website section: clinical deep-space utility anchored by an incandescent cerulean horizon and structured developer-first data blocks.
LAYOUT
The vertical composition is split into two deliberate acts: an airy, centered CTA block with deep vertical negative space, followed by a grounded wide-body dock. Within the lower pod, a 2-column macro split allocates roughly 40% to brand identity, code demonstration, and social handles on the left. The remaining 60% contains a four-column sitemap stacked above a compact horizontal email subscription utility.
PALETTE (use these exact hex values)
- #020612 — Abyssal Canvas: Root page background providing maximum optical contrast for luminescence
- #070d1e — Chamber Surface: Footer container fill with subtle blue undertone and inset depth
- #0b1429 — Terminal Substrate: Background for inline API snippet and input field wells
- linear-gradient(90deg, transparent 0%, #38bdf8 45%, #60a5fa 55%, transparent 100%) — Horizon Ray: High-intensity horizontal hairline glow demarcating the footer boundary
- #2563eb — Cobalt Action: Primary interactive fill for CTA buttons and newsletter trigger
- #6366f1 — Brandmark Indigo: Right-side color anchor for the display logo text gradient
- #ffffff — High Lumen: Headlines, active states, and brandmark left terminus
- #94a3b8 — Muted Slate: Supporting body paragraphs, navigation links, and terminal syntax keys
- #f472b6 — Method Magenta: HTTP verb highlight in the embedded JSON preview box
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 48px heading, 72px display. Tracking -0.025em at display, 0.08em at caps. The voice is authoritative, clinical, and developer-centric, evocative of modern high-throughput biotechnology software. Using Inter or Geist anchors the design in modern enterprise tools, while the display-scale wordmark conveys infrastructure scale. For production environments, Inter is freely available and an ideal 1:1 match across all weights.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through ambient luminescence rather than layered box-shadows. The docked footer acts as a dark plate sliding over a void, with localized radial cerulean flares spilling over the edge to create simulated backlighting. Inset UI elements like code previews and input boxes utilize darker cavity shades with faint 1px slate boundaries.
IMAGERY
No photographic imagery is present; the visual drama is supplied entirely through synthetic lighting effects and precise typography. Graphic accents are strictly limited to vector astronomy symbols (4-point sparks) and technical UI glyphs like arrows and mail icons. Introducing real-world photography or organic 3D renders would contradict the sleek scientific minimalism.
SIGNATURE DETAIL — the thing that makes this design itself
The incandescent cyan horizon beam atop the docked footer pod. It acts as an optical transition line separating the high-level marketing CTA from granular functional site links, instantly making the dark canvas feel atmospheric. It is commonly misused by making the glow a solid uniform border or oversaturating the entire card background.
MUST
- Retain the neon horizontal hairline shine centered precisely on the top edge of the footer container.
- Ensure the brand text 'INFERA' utilizes the white-to-indigo linear horizontal fill gradient.
- Pair the monospace API code payload directly below the brand description for developer-focused positioning.
- Keep navigation column headers strictly uppercase, 11px, with letter-spacing exceeding 0.1em.
AVOID
- Never replace the laser-sharp top glowing edge with a standard flat grey border stroke.
- Do not use saturated backgrounds; all dark surfaces must remain deeply muted midnight tones.
- Do not drop the API code container below the navigation columns; it belongs in the brand column.
- Avoid solid pure-white for navigation links; they must remain low-key until hovered.
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 中尝试 
