Design a dark-mode website section: deep midnight canvas anchored by volumetric isometric neon data layers and crisp modern typography.
LAYOUT
Structured around a persistent 64px white header bar at the top, transitioning abruptly to an asymmetric two-column hero at 1280px max width. Left column anchors title, description, and dual CTA buttons, while the right holds the tall isometric stack graphic. The hero terminates in an evenly spaced 4-column metric bar separated by hairline vertical rules.
PALETTE (use these exact hex values)
- #030611 — Canvas Void: Primary hero background canvas spanning behind content and graphics
- #FFFFFF — Navbar Surface: Crisp contrasting top utility navigation background bar
- #1264FE — Electric Cobalt: Key accent word fill in hero title, metric values, and primary CTA fill
- #FFFFFF — Pure White: Hero headline first/last lines, crisp high-priority typography
- #94A3B8 — Muted Slate: Body descriptive copy and secondary metric labels
- #0F172A — Navbar Text: Links, logo text, and labels within the light navigation bar
- #34D399 — Mint Teal: Growth indicator arrows and benchmark stats underneath metrics
- #1E293B — Divider Stroke: Vertical line separators dividing metric items and ghost button borders
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 36px heading, 64px display. Tracking -0.03em at display, -0.01em at body. Modern, structural, and strictly technical neo-grotesque sans-serif. The high-contrast letterforms deliver authoritative enterprise reliability while tight negative letter-spacing ensures a sleek, high-velocity infrastructure tone. Inter Display or Geist serve as exact replacements.
GEOMETRY & SPACING
Corner radii — cards 0px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via optical luminescence rather than CSS drop shadows. A radiant cyan-to-blue volumetric beam pierces dark semi-transparent glass planes, casting soft glow onto the dark canvas (#030611). Interfaces remain flat and razor-edged against this deep cosmic lighting.
IMAGERY
Isometric 3D technological diagrams featuring semi-transparent glass planes, dot grids, and concentrated light rays. The floating geometric prism emits clean ray-marched blue light with minimal particle dispersion. Avoid realistic photography, soft human avatars, or hand-drawn tech doodles.
SIGNATURE DETAIL — the thing that makes this design itself
The abrupt architectural juxtaposition of a clean, clinical white utility navigation bar sitting atop a pitch-black, blue-glow isometric volumetric hero section.
MUST
- Keep the contrast between the pure white navbar and the deep midnight hero canvas razor-sharp.
- Use electric cobalt (#1264FE) exclusively for the key value emphasis and primary interactives.
- Maintain tight tracking (-0.035em) on display headings above 48px to preserve geometric density.
- Isolate the stats with 1px border dividers tinted in muted dark blue (#1E293B).
AVOID
- Do not tint the top navigation bar dark; the white-on-dark split is intentional and critical.
- Do not round button corners beyond 8px—avoid pill shapes for CTAs in this system.
- Do not use warm hues (red, orange, yellow) except as tiny data speckle points in graphics.
- Do not allow the isometric illustration to overlap or reduce contrast on primary headline text.
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 中尝试 
