Design a light-mode website section: ethereal planetary pastels transition into a deep void navy with developer-first technical rigor and precision typography.
LAYOUT
The top CTA uses an asymmetric two-column split: left side dominated by the starry celestial orb, right side anchoring the badge, display heading, conversion button group, and API code snippet. Directly beneath, the layout shifts to a monolithic dark container spanning the full width with prominent top corner radii. Inside the footer, a multi-column grid organizes brand identity on the left, four navigation columns in the center, and newsletter capture with social links on the right, terminating in a legal sub-bar.
PALETTE (use these exact hex values)
- #F8F9FC — Celestial Canvas: Dominant background for the upper hero and CTA section
- #090D1F — Void Surface: Primary surface for the rounded high-contrast footer container
- #4E55DE — Hyperlane Indigo: Primary button fill, brand icon backdrops, and active link highlights
- #FFFFFF — Card Interior: Background for the JSON API response code preview container
- #E2E5EE — Subtle Outline: Hairline 1px border for the API terminal and pill badges on light canvas
- #10B981 — Telemetry Green: Operational status indicator dots and 200 OK badge accents
- #141724 — Deep Space Ink: Primary headline and body text color across the light canvas
- #FFFFFF — Starlight White: Primary column headers and button typography inside the dark footer
- #8C95A8 — Cosmic Mist: Secondary navigation links, metadata, and disclaimer text inside the footer
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.025em for titles, 0em for body. The typography speaks with authoritative, quiet confidence; it balances speculative aerospace vision with clinical B2B SaaS utility. Plus Jakarta Sans provides clean, wide apertures that prevent high-density technical copy from feeling cramped. For code snippets, a monospaced font ensures structural symmetry and immediate developer recognition.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through atmospheric color transitions and crisp hairline borders rather than blurred drop shadows. The pure white code box pops against the faint #F8F9FC canvas through a delicate 1px perimeter contour. In the footer, micro-elements like trust pills use tone-on-tone darkening (#11172A on #090D1F) to visually nest within the void.
IMAGERY
Features a pointillist stipple-art planetary illustration with radiant particle dust that arcs into the typography, rendered in soft lavender, pastel pink, and cyan tones. The visual metaphor merges orbital mechanics with cloud architecture. Photography is completely avoided in favor of precise technical cards and cosmic vector artwork.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal split between an airy pastel-nebula CTA canvas and an imposing 36px-radiused deep void footer. This transition symbolizes building on Earth while reaching into deep space, grounding dreamy pointillist illustrations with an uncompromisingly technical JSON terminal block.
MUST
- Retain the large 36px rounded top edge on the dark footer to create a distinct architectural horizon.
- Pair the whimsical pastel stippled space artwork exclusively with razor-sharp monospaced code elements.
- Keep borders on technical cards to exactly 1px solid #E2E5EE for crisp modern definition.
- Use pill-shaped 999px radii only for contextual tags, status badges, and social icon buttons.
AVOID
- Do not invert the hero to dark mode; the contrast relies on transition from celestial light to void dark.
- Avoid heavy drop shadows or skeuomorphic bevels; surfaces must remain flat and geometric.
- Do not use saturated primary colors other than #4E55DE to preserve scientific and enterprise credibility.
- Never drop the font size of footer link items below 13px to ensure legibility on dark surfaces.
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 中尝试 
