Design a dark-mode website section: deep obsidian terrain glowing with isometric cyan energy and sharp developer primitives.
LAYOUT
The header sits top-aligned at 1280px max width with balanced text navigation. Below, the hero section cleanly halves the canvas: the left side anchors the title, subtitle, CTA group, and trust proof, while the right side hosts a multi-layered isometric ecosystem of code, graph, and flow panels orbiting a central luminescent core. The layout then flows down into a centered secondary feature section.
PALETTE (use these exact hex values)
- #04070D — Obsidian Deep: Primary surface canvas framing the entire hero viewport
- #0C121D — Glass Dark: Background for floating interface cards and overlays with heavy backdrop-blur
- #00F0FF — Electric Cyan: Highlight gradient stop for display headline and illuminated isometric layers
- #00A3FF — Vibrant Cerulean: Primary CTA fill, active badges, and isometric core reflections
- #1E2A3B — Stroke Border Slate: 1px hairline borders on buttons, cards, and floating telemetry panels
- #10B981 — Active Green: Uptime indicator dot and positive metrics trends
- #FFFFFF — Pure White: Display headings, active navigation items, and button text
- #94A3B8 — Slate Gray: Secondary copy, passive navigation links, and code parameter syntax
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The typography is technical, calm, and ultra-precise. Inter provides a clean, neutral modernist foundation, allowing the heavy display size and cyan gradient to command authority without decorative distraction. JetBrains Mono balances the commercial polish with genuine developer credibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through isometric perspective and colored volumetric cyan light. Glass panels float at distinct Z-planes above a moody dark mountain range, separated by fine 1px slate borders and glowing light cast from the central cubic processor.
IMAGERY
Photorealistic moody mountain terrain shrouded in low-key nocturnal lighting sits in the lower third, overlaid with sleek isometric 3D glass geometry glowing in electric cyan. Photography must remain atmospheric and dark; bright daylight photography or whimsical illustrations would completely destroy the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline transitioning into an electric cyan gradient ('whole economy.') directly echoing the glowing isometric 3D processor core on the right. This visual rhyme instantly ties the abstract financial promise to tangible technological compute power.
MUST
- Use high-contrast white for headers and bright cyan gradients only for focal points.
- Maintain a 1px solid border (#1E2A3B) on all floating glass containers to separate dark layers.
- Pair isometric 3D renders with matching 2D telemetry cards tilted along the same angle.
- Use monospace typography strictly for code blocks, JSON payloads, and numeric rates.
AVOID
- Do not use warm tones (yellows, reds) except for deliberate warning states.
- Avoid solid opaque backgrounds on cards that float over 3D background imagery.
- Never center-align the hero copy; the split-screen balance depends on strict left alignment.
- Do not omit the 1px subtle stroke on dark glass cards; they will dissolve into the canvas.
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 中尝试 
