Design a dark-mode website section: luminescent isometric scientific planes suspended in void-black data streams with precision cyan-gradient typography.
LAYOUT
The hero operates as a two-column 60/40 split on a 1320px desktop grid. The left column stacks metadata vertically: launch pill badge, 54px display headline, three-line narrative paragraph, dual CTA row, multi-column metrics bar, and trust caption. The right column is entirely dedicated to the floating isometric strata visual, bathed in vertical cyan-to-purple auroral light streaks extending beyond the top and bottom fold.
PALETTE (use these exact hex values)
- #030712 — Canvas Void: Deepest background layer establishing infinite negative space across the hero viewport
- #0A101F — Glass Fill: Semi-transparent tinted container surface for interactive pills, cards, and secondary buttons
- #263249 — Glass Border: One-pixel translucent border defining interactive boundaries and stats containment
- #FFFFFF — Primary Text: High-contrast headings, stat values, and prominent interactive labels
- #94A3B8 — Secondary Text: Editorial paragraph copy, stat captions, and inactive navigation links
- linear-gradient(90deg, #3164F4 0%, #7EE7C8 100%) — Luminescent Gradient: Primary CTA button fill and gradient mask on headline emphasis keyword
- #A855F7 — Aurora Violet: Sub-surface ambient reflection lighting the lowest isometric platform layer
- #2DD4BF — Aurora Teal: Glow highlights on DNA particles and upward volumetric beam column
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600. Sizes 12px caption, 14px body-sm, 15px body, 18px subheading, 20px heading, 54px display. Tracking -0.03em at display, 0 at body. The typography is clinical, authoritative, and computationally precise. A single neo-grotesque sans family (Inter/Geist) handles all responsibilities, communicating research-grade rigour through disciplined hierarchy rather than expressive serif flourishes. Substitution should favor neutral geometric grotesques with tabular numeral support for scientific figures.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1320px container, comfortable density.
DEPTH
Depth is constructed through optical luminescence and transparency rather than conventional drop shadows. Interface panels float on Z-indices defined by translucent dark glass fills (#0A101F at 65% opacity) bounded by 1px white-alpha borders. Atmospheric background glow and vertical volumetric light beams create natural physical depth behind the UI layer.
IMAGERY
The imagery consists of precision-engineered, multi-layered isometric glass plates holding scientific data visualizations: topological heightfields, molecular structures, and DNA strands rendered as luminescent point clouds. Photorealistic human photography or flat 2D vector illustrations are strictly forbidden and would break the computational deep-tech atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The four-tier isometric glass stratum pierced by a vertical column of volumetric light, visually mapping abstract AI foundation layers directly into physical scientific domains (physics, chemistry, biology). Replicate it with stacked rounded-corner SVG planes at 30-degree skew, rendered with particle lattices and edge luminescence. Misusing it as a generic decorative card stack without scientific meaning destroys the narrative.
MUST
- Reserve the sapphire-to-aquamarine gradient strictly for the single primary CTA and the headline punchline word.
- Use 1px hairline borders with white alpha transparency (0.08 to 0.15) on all dark container frames.
- Maintain strict negative tracking (-0.025em to -0.03em) on display headlines above 40px.
- Keep editorial body text within 48ch to 54ch width to preserve reading cadence against floating graphics.
AVOID
- Never introduce warm hues like orange, red, or yellow that break the cold laboratory lighting spectrum.
- Do not apply solid opaque grey or white backgrounds to cards; surfaces must remain deep translucent glass.
- Avoid heavy drop shadows; rely entirely on volumetric lighting and translucent borders for edge definition.
- Do not style secondary actions with gradient fills; reserve gradients purely for the primary conversion path.
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 中尝试 
