Design a light-mode website section: celestial particle light bleeding smoothly into a deep obsidian developer-grade command deck.
LAYOUT
The layout features a centered single-column final CTA block atop an edge-to-edge dark structural footer. Vertically in the CTA: eyebrow tag, main display heading, two-line value proposition, dual-action button group, and a four-column horizontal trust cluster. Directly below, the footer spans full width, dividing cleanly into a left company identity rail, four vertical link columns, and a right-aligned newsletter capture box, resolved by a bottom legal strip.
PALETTE (use these exact hex values)
- #FBF9F5 — Canvas Ethereal Light: Dominant background canvas for the hero and final CTA stage
- #0B191D — Footer Deep Obsidian: Solid base surface for the entire bottom footer navigation block
- #0F3836 — Pine Deep Primary: CTA button background and primary visual focal point
- #479B71 — Emerald Sage Accent: Newsletter subscribe button, checkmark accents, and brand logo mark
- #C88E52 — Solar Ochre: Eyebrow tag text and flanking hairline accents
- #11181C — Obsidian Body Text: Hero headline text and prominent display elements
- #5A656B — Slate Neutral Mid: Subtitles, secondary body copy, and feature card captions
- #ECEFF1 — Footer Off-White Text: Footer column headers, brand name, and newsletter prompt
- #84939A — Footer Muted Link: Navigation links, copyright notice, and legal items
- #1A282D — Footer Hairline Border: Subtle horizontal rules separating columns and sub-footer copyright
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 17px subheading, 20px heading, 42px display. Tracking -0.025em for headlines, 0.08em for uppercase tags. The typography is clinical, modern, and developer-centric, leaning on Inter's neutral neo-grotesque geometry. It achieves gravitas through tight tracking and punchy contrast rather than expressive serifs or decorative quirks. In open-source setups, Plus Jakarta Sans or Geist Sans match its technical clarity and high x-height perfectly.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth in the hero section is communicated through optical layering rather than physical skeuomorphism: misty particle fields and faint spherical bodies sit in deep atmospheric z-planes, while the primary Pine button floats above with a generous, low-opacity teal-tinted bloom (blur 24px, y-offset 12px). The footer completely flattens depth into planar architectural grids divided by razor-sharp 1px dark borders (#1A282D).
IMAGERY
The imagery is ethereal and astronomical, rendering celestial rings, stippled curved point-clouds, and cratered moons in a light monochrome grain. It feels like an illuminated observatory or particle accelerator rather than a cartoon or tech vector graphic. Photography of people or standard geometric UI mockups would be entirely off-brand here.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the wide stippled cosmic particle stream arcing from the deep dark planetary horizon on the left up through the creamy light canvas on the right, bridging space exploration with developer tooling precision. To implement correctly, keep the particle texture fine-grained and monochromatic, allowing it to fade transparently beneath text layers.
MUST
- Retain the deliberate duality of a creamy, luminous upper CTA against a pitch-dark obsidian footer.
- Flank the uppercase ochre eyebrow tag with delicate, matching 1px hairline rules.
- Pair the deep forest green primary CTA button with a generous, blurred shadow tinted in dark teal.
- Use tight negative tracking (-0.03em) on headlines above 36px to preserve typographic tension.
AVOID
- Do not invert the footer to a light theme; the stark contrast anchors the bottom edge.
- Avoid loud, saturated neon greens; stick to organic pines (#0F3836) and sage hues (#479B71).
- Never drop heavy solid drop-shadows onto the trust items or text links.
- Do not allow the background planetary illustrations to compete with headline legibility.
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 中尝试 
