Design a dark-mode website section: illuminated data streams converging through dark terrain toward high-altitude commercial clarity.
LAYOUT
The hero uses an asymmetrical two-column composition inside a 1360px container. The left 50% accommodates the editorial text hierarchy, primary CTA pair, metric credentials, and dock alert in a disciplined vertical stack. The right 50% lets the mountain image dominate, staging floating waypoint cards that follow the winding S-curve data path toward the mountain's peak.
PALETTE (use these exact hex values)
- #071317 — Obsidian Slate: Primary background tone across the hero section canvas and deep shadow falloffs.
- #0C1F26 — Deep Marine Glass: Background fill for floating data cards, pill tags, and notification banners.
- #249C73 — Emerald Core: High-priority primary CTAs, active telemetry indicators, and confidence bar fills.
- #89DCB5 — Luminous Mint: Display serif headline accent, section taglines, and lower-funnel fiber optics.
- #F6C174 — Sunrise Amber: Mountain crest illumination and high-tier milestone badge accent.
- #FFFFFF — Pure White: Primary headings, primary button text, metric numerals, and high-emphasis labels.
- #93A8B0 — Slate Mist: Supporting paragraph copy, navigation menu items, and telemetry sublabels.
- #1E3B44 — Cyan Border Glow: Subtle stroke for glass panels, pill tags, and secondary outline buttons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 20px subheading, 28px heading, 64px display. Tracking -0.03em at display, 0.05em on captions. The typography balances computational rigor with intellectual authority. The geometric sans-serif (Plus Jakarta Sans match) communicates robust engineering and platform scale, while the sudden pivot to an elegant, high-contrast italic serif for 'Finally, the why.' injects human insight and philosophical depth.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through atmospheric luminosity and scale rather than drop shadows. Interface panels float as frosted translucent glass layers over a glowing composite landscape, separated by 1px subtle strokes (rgba(255, 255, 255, 0.12)) and soft ambient under-glows matching the nearest light source.
IMAGERY
The visual hero is a cinematic, surreal photographic composite of rugged alpine peaks intersected by a winding highway of glowing bioluminescent particles and fiber-optic data streams. The mood shifts from cool oceanic abyss to dawn alpine summit. Abstract generic corporate 3D shapes or standard dashboard screenshots are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a bold geometric headline with an italic serif tag ('Finally, the why.') that mirrors a physical path of glowing telemetry leading directly out of darkness into an amber mountain peak.
MUST
- Reserve the italic serif strictly for philosophical, emotional punchlines within major display headings.
- Maintain a clear temperature shift from cool teal fiber optics in the foreground to warm gold at the mountain peak.
- Use hairline 1px borders with 10-15% white opacity to give dark HUD elements physical edges without clutter.
- Align the CTA cluster directly with the secondary social proof and beta banner along the left column.
AVOID
- Do not render standard body text or UI control labels in the serif typeface.
- Avoid flat black backgrounds; the dark canvas must retain a deep marine/teal undertone (#071317).
- Never use solid, fully opaque fills on floating telemetry milestone cards or HUD panels.
- Do not apply drop shadows with black spread; use diffuse colored back-glows (teal or amber) instead.
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 中尝试 
