Design a light-mode website section: crisp developer ergonomics resting on luminous particle clouds and deep abyssal footers.
LAYOUT
The viewport is structured into two deliberate zones: a two-column hero CTA block above and an expansive five-column dark footer below. The hero pairs a left-aligned 480px text hierarchy (eyebrow, display headline, body paragraph, twin CTA cluster, compliance row) opposite a wide 680px floating window mockup. Below, the footer spans the full width with a top border divider, placing identity and newsletter capture on the left and four neatly spaced navigation columns on the right.
PALETTE (use these exact hex values)
- #ffffff — Canvas Light: Primary hero background delivering clean contrast for headline type and ambient floating graphics
- #04161a — Abyssal Deep Teal: Footer container background anchoring the base of the page with extreme depth
- #0c2026 — Dashboard Shell: Sidebar container within the preview dashboard interface and embedded code terminal background
- #0d8267 — Brand Emerald: Primary CTA fill, active link accents, badge borders, and confirmation states
- #2dd4bf — Brand Mint Highlight: Status indicator pips, active code highlights, and subtle nebula particle highlights
- #0c191d — Text Primary Dark: Hero display headlines and high-emphasis metric numbers on light surfaces
- #4b5563 — Text Secondary Slate: Hero explanatory body text and light-theme trust icon badges
- #8da1a6 — Footer Text Dim: Footer navigation links, input placeholders, and copyright metadata
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 18px body-lg, 24px heading, 52px display. Tracking -0.03em for headlines, 0.04em for caps badges. The typographic tone is authoritative, terse, and technical. The geometric neo-grotesque type delivers uncompromising clarity for API terminology while remaining approachable through generous lowercase proportions. Plus Jakarta Sans or Inter ensures free open-source implementation without compromising the engineered financial-tooling atmosphere.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through dramatic spatial layering rather than traditional elevation ramps. The hero canvas remains flat, while the product dashboard floats on a composite drop-shadow (0 24px 48px -12px rgba(4, 22, 26, 0.18)) overlapping a nebulous stippled background. Translucent glassy spheres float on independent z-planes with internal radial specular highlights to heighten realism.
IMAGERY
The imagery language merges precise developer software UI with abstract celestial particle dust. High-resolution UI captures show live cURL scripts and financial telemetry enclosed in clean containers. Accompanying artwork comprises stippled point-cloud constellations and refracting aqua glass spheres; raw photography or illustrated cartoons are strictly incompatible.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the stippled celestial particle bloom that erupts from beneath a hyper-sharp, elevated dashboard card. It bridges the pure white marketing hero and the deep dark-teal footer without needing a harsh geometric separator. If this stippled glow is replaced with standard solid gradients or flat vector shapes, the brand loses its distinct airy yet technical poise.
MUST
- Retain the strict split between the luminous white upper canvas and the abyssal #04161a footer ground.
- Use emerald #0d8267 exclusively for conversion cues, interactive inputs, and key badge accents.
- Keep hero display headlines tightly letterspaced at -0.03em to maintain punchy editorial cadence.
- Frame code and dashboard snippets inside rounded 16px cards with dual light-and-dark nested surfaces.
AVOID
- Do not introduce standard rounded-corner rectangles where full 999px pill geometry is expected.
- Never tint the hero background; it must remain pure white #ffffff to maintain contrast with the floating art.
- Avoid bright generic blue accents; the palette must remain anchored in emerald teal #0d8267 and mint.
- Do not scale body text beyond 18px; preserve clarity and developer-focused utility.
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 中尝试 
