Design a dark-mode website section: technical infrastructure hovering like glass instruments over a moody, misty alpine ridge.
LAYOUT
The top of the page features a clean, horizontal nav with spacious breathing room. The core hero is arranged as an asymmetrical split: the left 45% accommodates the value hierarchy (eyebrow, massive 3-line heading, description, CTA cluster, uptime status), while the right 55% presents an end-to-end routing schema flowing left-to-right into an orchestrator and down to infrastructure. The section concludes with an anchored four-part metrics ribbon spanning the container's base.
PALETTE (use these exact hex values)
- #0a0e14 — Atmosphere Canvas: Deep background tone blending the photographic underlay into interface framing
- #121824 — Frosted Container: Semi-transparent backdrop for architectural nodes, modal cards, and bottom stats dock
- #253041 — Subtle Outline: Single-pixel hairline borders distinguishing frosted panels from the photography
- #f06423 — Ignition Orange: Dominant call-to-action button, brand polyhedral icon, and tracked uppercase eyebrow
- #10b981 — Operational Emerald: Status indicator dot marking continuous infrastructure uptime and system availability
- #ffffff — Signal White: Hero headline, primary node titles, and stat values
- #8c96a5 — Slate Dust: Subparagraphs, nav links, node subtitles, and secondary descriptor labels
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0.12em at mono uppercase tags. The typographic tone is precision-engineered, modern, and serious, typical of dev-first infrastructure tools. Using Inter or Geist with tight display tracking gives the large headline a dense, authoritative impact, while technical sub-labels retain clinical clarity. For commercial deployment, Inter is free, open-source, and matches the intended technical voice seamlessly.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through subtle physical transparency rather than traditional dropped shadows. Dark frosted glass cards (#121824 at 70% opacity) float directly over a deep photographic background, bounded by faint 1px hairline borders (rgba(255, 255, 255, 0.12)) that catch atmospheric light. The central orchestrator tile uses a slightly brighter surface tone to suggest forward position in 3D space.
IMAGERY
A real photographic backdrop showing a sweeping, misty mountain range at dusk, desaturated and color-graded into cool obsidian, slate, and burnt ember tones. The organic crags and soft fog contrast sharply with the rigid geometric lines of the diagram. Generic cartoon vectors or abstract 3D clay shapes would completely break this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual device is the technical architecture diagram suspended directly over a dramatic natural landscape, connected by fine dotted routing arrows. The juxtaposition of precise, frosted geometric cards against wild mountain terrain communicates enterprise durability and calm operational control. Misusing it involves placing cartoonish icons or saturated vector graphics over the photo, destroying the cinematic balance.
MUST
- Ground the floating UI elements with dotted connector lines and directional arrow heads.
- Restrict the vibrant orange (#f06423) strictly to key interactive triggers and primary status focal points.
- Use backdrop-filter blur (12px to 16px) on surface panels to let the mountain underlay provide texture.
- Maintain high typographic contrast: 52px bold white headers balanced against muted #8c96a5 descriptions.
AVOID
- Do not saturate the background image; it must stay misty, cool, and subdued to preserve readability.
- Avoid heavy drop shadows; use 1px border outlines (#253041) for panel separation instead.
- Do not introduce secondary bright hues; keep auxiliary accents limited to the operational green dot.
- Never use fully opaque solid black cards, which destroy the organic depth of the composition.
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 中尝试 
