Design a dark-mode website section: tactile glass interfaces emerging from a warm mountain dusk connected by luminescent emerald diagnostic traces.
LAYOUT
The page follows a balanced asymmetrical split layout framed within a 1280px max-width container. The left column stacks the eyebrow badge, display headline, body paragraph, twin CTA buttons, and telemetry card in a strict 24px vertical rhythm. The right column showcases the expansive multi-modal 3D processing pipeline anchored on a dark concrete podium.
PALETTE (use these exact hex values)
- #0b0c0a — Obsidian Canvas: deep atmospheric foundation beneath the mountain photograph
- #141714 — Smoked Glass Panel: translucent backdrop for metric cards and floating telemetry panels
- #e8984e — Amber Glow: primary call-to-action fills, key headline emphasis, and ambient backlights
- #4ade80 — Telemetry Emerald: operational status dots, verified checkmarks, and glowing connector tracks
- #f3f4f1 — Alabaster White: high-contrast headline text, active labels, and primary numeric statistics
- #9b9d94 — Muted Khaki: body copy, inactive navigation links, and code parameter syntax
TYPOGRAPHY
Typeface Geist (or Inter,SF Pro Display,Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0 at body. The typographic voice blends technical precision with artisanal sophistication. Geist provides clean, legible engineering credibility for metrics and interface text, while the sudden warmth of the serif italic adds thoughtful editorial weight. Teams without Instrument Serif can substitute Newsreader Italic or Playfair Display Italic seamlessly.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through physical stratification: a photographic atmospheric base sits behind translucent glass cards, which float over a solid 3D podium. Subtle top-edge inner highlights and diffuse ambient occlusion shadows (rgba(0,0,0,0.6)) provide realistic glassmorphic refraction.
IMAGERY
A cinematic sepia-dusk mountain panorama with heavy atmospheric haze and natural grain provides organic warmth. Crisp, glossy 3D product hardware renderings sit in the foreground; illustrative clip art or flat cartoon graphics would completely shatter the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an organic sepia mountain vista overlaid with translucent glass hardware connected by glowing emerald trace lines. Replicate it by anchoring floating dark glass panels (rgba(20,24,21,0.65)) over a warm twilight backdrop, using 1px white-alpha borders and glowing neon interconnects. It is ruined if saturated futuristic cyber-blues replace the earthy dusk tones.
MUST
- Pair clean geometric sans headers with an expressive serif italic for the concluding word.
- Restrict neon emerald (#4ade80) exclusively to operational status, checkmarks, and schematic circuits.
- Use 1px borders with low-opacity white (rgba(255,255,255,0.12)) to define glass edges against photography.
- Reserve the warm amber fill (#e8984e) strictly for primary actions to maximize visual conversion.
AVOID
- Never replace the natural landscape background with flat generic solid gray or blue gradients.
- Do not apply the serif italic typeface to standard body copy or button labels.
- Avoid harsh 100% white borders on cards; always use translucent alpha values.
- Do not use high-saturation reds or blues that fight the sepia and emerald balance.
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 中尝试 
