Design a light-mode website section: technical aerospace clarity driven by modular micro-interfaces, precision data telemetry, and an orbital progression arc.
LAYOUT
The section is structured as an asymmetrical two-column layout across a 1340px boundary. The left column (occupying ~38% width) holds a single towering hero card containing overarching value copy, CTA, orbital trajectory diagram, and stage progression footer. The right column (~62% width) is organized into a 3-column by 2-row grid of smaller, modular milestone cards arranged sequentially from 1 to 5, concluding with a verified launch summary card.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: ambient background framing all content cards
- #FFFFFF — Card Surface: elevated card backgrounds for feature containers and embedded modules
- #E2E8F0 — Border Subtle: 1px hairline outlines on cards, dividers, and micro-interface frames
- #0F172A — Text Primary: display headlines, card titles, and primary action buttons
- #64748B — Text Muted: explanatory body copy, inactive metadata, and step descriptions
- #2563EB — Telemetry Blue: orbital flight paths, icon frames, sparklines, and active state indicators
- #16A34A — Mission Green: deploy confirmation icons, passing test status dots, and positive delta values
- #B91C1C — Warning Rust: category eyebrow uppercase label and critical telemetry status
- #0B0F17 — Viewport Void: dark backgrounds for embedded 3D simulation windows and space photography
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 44px display. Tracking -0.02em at display, 0 at body. The typography conveys military-spec precision and scientific reliability through an unadorned grotesque sans-serif (Inter). Tight tracking on bold headings (-0.02em) creates compact structural weight, while generous line heights on body copy maintain readability across dense technical UI labels. Geist or SF Pro serve as pixel-perfect substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1340px container, comfortable density.
DEPTH
Depth is strictly planar and non-tactile on the primary canvas, relying entirely on 1px borders (#E2E8F0) on clean white cards over an off-white field (#F8F9FA). Visual depth is instead achieved internally within embedded media components through high-contrast photorealistic space graphics and dark simulation viewports (#0B0F17). Shadows are entirely avoided in favor of crisp architectural borders.
IMAGERY
Imagery features high-precision aerospace visuals: accurate 3D CAD models of satellites, lunar rovers on cratered lunar regolith, and high-resolution orbital photography of Earth from low orbit. Imagery must always convey physical realism and mission-critical engineering. Abstract vector shapes, whimsical isometric illustrations, or decorative gradient blobs are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping celestial trajectory arc on the primary card that curves over lunar terrain through numbered stage milestones, terminating in a green deployment checkmark.
MUST
- Use 1px borders (#E2E8F0) without box-shadows to define cards against the #F8F9FA canvas.
- Keep all status colors functional: green for verified/deploy, blue for active/trajectory, rust for eyebrow alerts.
- Enclose realistic micro-software interfaces inside each feature card rather than abstract marketing graphics.
- Align all card headers with the consistent vertical sequence: step badge, icon, title, body, then UI inset.
AVOID
- Do not introduce fuzzy drop shadows or multi-layer glow effects on light cards.
- Do not use saturated brand gradients on card surfaces; keep card backgrounds pure #FFFFFF.
- Do not substitute the realistic lunar/space renders with flat vector or 3D clay illustrations.
- Do not omit the small sequential numerical badges (1-5) on the modular feature cards.
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 中尝试 
