Design a dark-mode website section: deep cosmos dark mode transitioning into clean terrestrial white cards with neon laser accents.
LAYOUT
The section is divided into three horizontal strata. Top stratum: a two-column hero where the left column houses the category pill, 48px heading, and subcopy, while the right holds an integrated split-container featuring a 4-item stats grid alongside the orbital image. Middle stratum: an equal-width 5-column grid of white feature cards with identical 24px inner padding. Bottom stratum: a subtle single-row metadata bar with trust credentials separated by thin vertical hairline dividers.
PALETTE (use these exact hex values)
- #05060A — Void Black: Deepest canvas background for the hero header and space graphic container
- #FFFFFF — Card Surface White: Solid white ground for bottom feature cards and lower credibility ticker
- #0F131C — Muted Glass Dark: Background for the floating semi-transparent metric panel beside the orbital image
- #FFFFFF — Text Primary Dark: Headings, big statistics, and primary typography against the dark surface
- #0E1118 — Text Primary Light: Headings and prominent titles inside the white feature cards
- #8A94A6 — Text Secondary Muted: Body copy, supporting explanations, and trust badge labels across both zones
- #7952F5 — Orbit Purple: Eyebrow tracker, first feature accent, and model iteration indicator
- #F05D5E — Mission Coral: Reliability metrics, shield icon glow, and second card accent bar
- #4D9BF7 — Throughput Cyan: Compute scaling metrics, lightning icon stroke, and third card indicator
- #8C66F9 — Telemetry Orchid: Data quality metric, crosshair icon, and fourth card footer bar
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 38px heading-lg, 48px display. Tracking -0.03em on display, 0.08em on all-caps meta labels. The typography is technical, austere, and authoritative. Using a precision grotesque sans-serif like Inter or Geist gives it the rigorous demeanor of an aerospace flight deck or high-performance compute console. The combination of tight, heavy display headers with wide, micro-tracked metric labels commands institutional trust.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created not through blurry diffuse drop shadows, but through clean structural tiering. The black hero surface sits as the infinite backdrop, while white feature cards appear sharply elevated like physical modular components docked onto the lower third. The telemetry panel over the orbital photography uses subtle 1px border outlines (#202738) rather than deep blur effects.
IMAGERY
A single cinematic, photorealistic satellite view of Earth's atmosphere showing intense blue sunlight scattering across the curvature of the planet into deep black void. Imagery must remain purely astrophysical, scientific, and realistic—no cartoonish illustrations, 3D abstract clay shapes, or generic office photography.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-horizon split canvas: the seamless transition from an infinite #05060A dark space hero with orbital photography directly into a shelf of crisp, pure-white floating cards, each anchored by a signature pastel bottom progress rule.
MUST
- Pair every white feature card with its dedicated chromatic accent for icon, metric, and bottom rule.
- Maintain high value contrast between the #05060A upper canvas and the #FFFFFF card surface.
- Keep metric numerals at 28px-38px bold while their contextual captions stay 11px uppercase with 0.08em tracking.
- Render the mini trend arrows inside small pill shapes alongside metric figures.
AVOID
- Do not bleed the space background image across the entire section behind the white cards.
- Never use generic single-color iconography across all cards; each must preserve its bespoke hue.
- Do not use dark card backgrounds in the bottom row; the contrast transition is essential to the identity.
- Avoid heavy drop shadows; cards rely on crisp border delineation and sharp pure white fills.
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 中尝试 
