Design a dark-mode website section: rugged mountain topography meets glass-morphic ai telemetry under a warm sunset gradient.
LAYOUT
The hero uses an asymmetric two-column composition beneath a minimalist fixed-width header. The left column hosts the textual narrative: a technical eyebrow badge, large three-line display headline, explanatory paragraph, and dual call-to-action buttons. The right column showcases a multi-module glass console featuring a sidebar, a horizontal pipeline flow, performance tiles, and a live deployment status pill. The bottom cuts cleanly into a warm cream canvas for subsequent narrative flow.
PALETTE (use these exact hex values)
- #0D1117 — Canvas Dark: Deep base darkness behind hero overlay and photography shadows
- #273748 — Glass Border: Subtle hairline perimeter outlining floating data panels and inner modular blocks
- #D64B3B — Terracotta Primary: Primary CTA fill, terminal period on headline, and active pipeline indicator icon
- #34D399 — Signal Green: Positive delta metrics, success pips, and production readiness checks
- #38BDF8 — Telemetry Cyan: Distilled model line charts and secondary telemetry tags
- #F1F5F9 — Off White Text: Hero headline text, prominent numbers, and primary button labels
- #94A3B8 — Muted Slate Text: Body copy, secondary navigation links, and telemetry labels
- #FAF7F2 — Base Transition Cream: Canvas color of the succeeding page section below the hero
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Fraunces, Source Serif Pro), weights 400/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 64px display. Tracking -0.03em. The typography blends high-end editorial sophistication with developer-centric rigor. The headline utilizes a distinct humanist serif (reminiscent of Newsreader or Instrument Serif) whose italic flourish evokes mastery and proprietary craftsmanship. All surrounding user interface elements, labels, and figures utilize a crisp, ultra-legible neutral sans (Inter or Geist) that reads as an enterprise-grade developer tool.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 100px between sections, 1360px container, comfortable density.
DEPTH
Depth is created using optical translucency and gradient lighting rather than conventional drop shadows. Surface layers stack from the deep scenic photograph at Level 0 to frosted translucent cards (Level 1) bordered by subtle 1px luminous strokes that catch ambient light. Inside these cards, nested sub-modules (Level 2) use slightly darker fills and inner borders to create inset technical precision.
IMAGERY
The imagery features an expansive, cinematic alpine mountain range illuminated by low-angle golden-hour sunlight against deep dusk shadows. A digital wireframe mesh or constellation of fine cyan-and-white telemetry particles subtly overlays the landscape to signify artificial intelligence infrastructure mapped onto physical scale. High-saturation stock photos or flat illustrations would entirely compromise this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the juxtaposition of an italic humanist serif headline with an ultra-fine, dark glassmorphic telemetry dashboard superimposed directly over warm alpine mountain topography. To execute correctly, ensure the landscape glows warmly through the translucent ~75% opacity dark cards without sacrificing UI contrast, and anchor the headline with a vibrant terracotta terminal period.
MUST
- Pair a serif editorial headline with precise, sans-serif technical data metrics.
- Use 1px translucent borders (#273748) on glass cards rather than heavy drop shadows.
- Accent strictly with terracotta (#D64B3B) for primary actions and emerald (#34D399) for positive state indicators.
- Maintain the warm sunset backdrop glow behind the sharp, dark technical telemetry modules.
AVOID
- Do not use opaque solid grey surfaces for dashboard cards; preserve frosted glass transparency.
- Do not apply heavy multi-layered drop shadows; depth is derived from surface translucency.
- Do not set telemetry numbers or body copy in serif; preserve serif solely for display titles.
- Do not saturate secondary buttons; maintain low-contrast glass fills for secondary actions.
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 中尝试 
