Design a dark-mode website section: layered isometric data planes floating in obsidian space illuminated by cybernetic neon cyan and mint glow.
LAYOUT
The hero employs a balanced split layout within a 1280px grid container. Left column carries the semantic payload: announcement pill, two-tone display headline, descriptive subtext, button group, and proof metrics arranged with consistent 24px vertical rhythm. Right column hosts an expansive floating isometric stack diagram with right-flanked textual callouts.
PALETTE (use these exact hex values)
- #02050A — Void Canvas: Deepest dark navy background providing high contrast for glowing visual assets
- #08101D — Subtle Surface: Subtle backdrop tint for input containers, cards, and secondary interactive borders
- #00B4F5 — Electric Cyan: Dominant interactive color for primary buttons, active nodes, and data routing paths
- #34D399 — Neon Emerald: Gradient terminus and system health indicator used for metrics and status pings
- #FFFFFF — Primary Text: High-emphasis headlines, active badges, and navigation labels
- #8F9CAE — Muted Text: Descriptive body copy, secondary navigation links, and diagram annotations
- linear-gradient(90deg, #00B4F5 0%, #38EF7D 100%) — Borealis Gradient: Applied across headline emphasis text to visually bind place intelligence to AI
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px heading, 56px display. Tracking -0.03em at display, 0.01em at caption. The typographic tone is authoritative, hyper-modern, and engineering-grade. Using a precision grotesque with tight display tracking creates density and technological sophistication. When deploying fallback fonts, Inter or Plus Jakarta Sans maintain the crisp digital architecture required by the identity.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and transparency rather than traditional drop shadows. Visual tiers emerge by layering translucent glassy surfaces against localized cyan and navy backlights. Isometric graphics hover in simulated spatial z-index via stacking order and glowing edge perimeters.
IMAGERY
Visual assets consist of razor-sharp isometric 3D technological schematics depicting urban infrastructure, neural paths, and data points. Aesthetic is clean, cybernetic, and mathematical, relying on neon line vectors and luminous glass tiers. Realistic stock photography, soft hand-drawn illustrations, or warm lifestyle renders are completely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The three-layer isometric translucent plane stack illuminated by cybernetic data flows and cyan edge-glows. To replicate it, construct layered geometric glass planes in axonometric projection, connecting each tier to real-world metadata with hairline dashed leaders. It is commonly ruined by adding opaque backgrounds or clunky drop shadows.
MUST
- Use pure white text for headlines and reserve bright cyan/emerald exclusively for strategic emphasis.
- Maintain high contrast by keeping canvas levels below #050B14.
- Use pill border radius (999px) strictly for status indicators and micro-badges.
- Pair primary interactive buttons with high-contrast dark text rather than white on cyan.
AVOID
- Do not introduce solid opaque light backgrounds or stark grey card panels.
- Avoid warm colors like orange, red, or yellow except in explicit error states.
- Do not drop soft blurred outer drop-shadows on buttons; use sharp glows or flat fills instead.
- Never set running body paragraphs in pure white (#FFFFFF); always step down to slate (#8F9CAE).
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 中尝试 
