Design a dark-mode website section: developer telemetry suspended over a dusky alpine ridge with crisp electric cobalt conduits.
LAYOUT
The viewport is organized as an asymmetrical two-column hero flanked by a sticky-style top navigation bar. The left column (roughly 48% width) stacks the pill badge, 56px H1, explanatory paragraph, dual action buttons, and a 3-item feature matrix. The right column (roughly 52% width) anchors an expansive interactive terminal card containing side-by-side code payload and flow diagrams.
PALETTE (use these exact hex values)
- #0a0e14 — Void Canvas: Deep navy-black base background overlaid beneath atmospheric mountain imagery
- #3b73ed — Cobalt Surge: Primary interactive calls-to-action, logo mark, and active tab indicators
- #ad8354 — Alps Ridge Warmth: Warm golden earth highlight reflected off background terrain ridges
- #0e131d — Card Trench: Interactive terminal panel and flowchart canvas background
- #ffffff — Text Primary: Main headline text, active tab headers, and button label typography
- #94a3b8 — Text Secondary: Body copy, inactive nav links, and secondary descriptions
- #22c55e — Success Emerald: Terminal status indicator dot for healthy API responses
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is ultra-precise, technical, and mature, driven by a neutral neo-grotesque sans (Inter) paired with a clean developer mono (JetBrains Mono). The massive weight of the headline conveys operational solidity, while small, letter-spaced uppercase badges add an aura of aerospace telemetry. Inter and JetBrains Mono are both freely available via Google Fonts and open-source licenses.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using translucent dark surfaces layered over an atmospheric landscape rather than drop shadows. Hairline 1px border strokes (#ffffff18) define container boundaries, separating floating components from the background. Glows are tightly constrained to subtle blue accent nodes inside the architecture diagram.
IMAGERY
The backdrop features a desaturated, dusky alpine ridge lit by a low warm horizon light that fades into black. Any photographic asset must be treated with a heavy top-to-bottom dark gradient overlay so typography remains legible. Whimsical 3D illustrations or flat cartoon vectors would be completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the juxtaposition of an expansive, low-lit mountain ridge with an immaculate, highly detailed terminal card showing code on the left and a node-based DAG flowchart on the right. Misusing this pattern means using generic abstract mesh gradients or omitting the technical depth of the interactive preview.
MUST
- Pair rich photography textures with deep atmospheric vignette gradients (#0a0e14) to maintain high contrast.
- Reserve vibrant electric cobalt (#3b73ed) exclusively for primary CTAs, active indicators, and focal points.
- Use 1px borders tinted at 10-15% white opacity for container definition against dark backgrounds.
- Keep hero display headline letter-spacing tightly tracked between -0.03em and -0.04em.
AVOID
- Do not use solid black (#000000) for panels; use tinted dark slate (#0d121c) to preserve atmospheric warmth.
- Avoid multi-colored neon button gradients; stick to a pure, flat electric blue tone.
- Do not scale body copy above 18px; maintain compact enterprise density.
- Avoid sharp 0px corners on interactive cards; strictly respect the 10px button and 16px card radius rhythm.
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. Try in DraPub 
