Design a light-mode website section: mission-critical aviation telemetry framed by crisp alpine skies, dark glass interfaces, and precise cobalt blue signals.
LAYOUT
The page opens with a top bar navigation spanning 1280px with left-aligned branding and right-aligned action buttons. The hero splits horizontally into a left-hand headline lockup (eyebrow, massive 56px title, body, dual CTAs, live metric counter) and a right-hand 4-step interactive pipeline. Each step features a top sequential marker with a dedicated vertical card below. At the bottom, a curved white container (24px radius) rises over the mountains to introduce the next module.
PALETTE (use these exact hex values)
- #F8FAFC — Sky Canvas: Uppermost page background blending into pale atmospheric mountain imagery
- #FFFFFF — Elevated Sheet: Primary surface for interactive cards, telemetry panels, and lower section container
- #081226 — Cockpit Void: Dark terminal surface for simulated radar feeds and CPDLC chat message logs
- #2858FF — Avionics Cobalt: Primary CTA fill, headline text emphasis, step link highlights, and key brand marks
- #0B132B — Obsidian Body: Display headings, logo typography, and primary headline text
- #526077 — Aero Slate: Body paragraphs, metadata subtitles, step descriptions, and inactive nav items
- #10B981 — Status Emerald: Telemetry gain badges, connectivity status dots, and positive performance graphs
- #E2E8F0 — Boundary Line: Outlines for secondary buttons, card divisions, and step connectors
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is authoritative, aerospace-grade, and mathematically precise. Inter delivers neutral, hyper-legible communication with tight letter-spacing (-0.035em) on display headlines that gives a contemporary enterprise feel. Uppercase subheaders and tracked captions replicate cockpit instruments and regulatory telemetry.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat-to-subtle with almost no blur elevation. Contrast relies on sharp surface divergence—crisp white (#FFFFFF) and deep cockpit blue (#081226) juxtaposed over the atmospheric misty landscape. Delicate 1px borders (#E2E8F0) define card edges cleanly without relying on diffuse drop shadows.
IMAGERY
The visual world uses genuine high-altitude aeronautical imagery: crisp daylight flight through cloud layers and distant, hazily filtered mountain ranges. Cards feature authentic technical UI representations—vector radar sweeps, CPDLC avionics text boxes, and sparkline metrics. Saturated consumer stock photos or 3D cartoon illustrations are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive four-column horizontal workflow pipeline combining simulated dark cockpit instruments (radar and text messaging) side-by-side with crisp white enterprise metric cards, directly bridged by sequential numbered steps. It communicates complex infrastructure integration at a single glance.
MUST
- Anchor primary CTAs in uniform #2858FF cobalt blue with simple monochrome vector glyphs.
- Pair dark telemetry cards with crisp white metric cards across the 4-step workflow showcase.
- Use uppercase 11px text with 0.08em tracking exclusively for technical and system metadata.
- Ensure the hero split cleanly provides 40% width to copy and 60% width to the workflow cards.
AVOID
- Do not use dark backgrounds for the entire page canvas; keep the overall theme high-key light.
- Never substitute the vibrant #2858FF cobalt blue with dull commercial navy or cyan.
- Do not round card corners beyond 16px, except for full-width section containers and micro pills.
- Avoid heavy drop shadows; depth is created strictly through surface contrast and crisp 1px hairline borders.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
