Design a dark-mode website section: deep navy void lit by refractive blue glass tiles and ambient cyan-to-magenta spectral glow.
LAYOUT
The top bar spans full width with a left-aligned logo, centered navigation links, and right-aligned auth actions. The hero follows an asymmetric two-column grid: left side holds the small uppercase eyebrow, massive display title, brief paragraph, CTA pair, and feature row; the right side dominates with a floating isometric system illustration. The hero resolves into a full-width light card with 32px top rounded corners that introduces the next section.
PALETTE (use these exact hex values)
- #070913 — Midnight Space: Deepest background canvas for the entire hero section
- #FAFBFC — Sheet Pure White: Surface for lower section content and crisp data card inserts
- #38BDF8 — Electric Cyan: Rim lighting, luminous connection traces, and glowing highlights
- #828BFA — Lavender Glow: Hero headline accent word and secondary glowing edges
- #1B2A5E — Deep Cobalt Glass: Translucent glass card fill with backdrop blur and border glow
- #FFFFFF — Headline Pure White: Primary heading typography, logo mark, and primary button background
- #94A3B8 — Muted Slate Text: Navigation links, body copy, and secondary pipeline step titles
- #F97316 — Donut Coral: Micro-accent highlight slice in metrics chart visualization
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px body-lg, 36px heading, 56px display. Tracking -0.03em at display, 0.08em at tracking badges. The typography is technical, pristine, and authoritative. Set in a geometric grotesque like Inter Display, it evokes precision banking infrastructure merged with cutting-edge artificial intelligence. Tight letter spacing (-0.035em) on display sizes ensures the large headlines feel solid and structural rather than airy.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created by combining physical isometric extrusion with glowing translucency rather than simple drop shadows. Slabs cast soft, colored environmental auras (diffuse cyan and purple ambient glow) onto surrounding layers. Chamfered edges catch high-contrast rim lighting that separates layered glass plates from the deep background.
IMAGERY
The imagery is entirely composed of tactile, 3D extruded glassmorphic interface mockups with authentic optical refraction, glowing internal neon pipelines, and physical depth. Realistic rendering techniques treat UI components like heavy acrylic tablets floating in space. Real-world photography, flat cartoon illustrations, or hand-drawn motifs are strictly excluded.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone refractive glass stage: layered 3D acrylic slabs illuminated by cyan rim highlights and bioluminescent underglows, embedding real, tactile white UI tables directly inside translucent neon prisms.
MUST
- Anchor 3D glass tiles with strong multi-stop linear gradient borders to simulate cyan rim lighting.
- Keep typography crisp, neutral, and tightly tracked to ground the ethereal futuristic graphics.
- Use deep radial gradients under graphics to blend deep blue into vivid electric violet and cyan.
- Contrast dark cosmic hero space with an abruptly rounded, crisp light section immediately below.
AVOID
- Do not use flat flat grey borders; all borders in the dark realm need translucent luminous tints.
- Never substitute the 3D glassy realism with flat vector illustrations or cartoonish shapes.
- Avoid warm yellow, green, or red backgrounds that disrupt the cold bioluminescent spectrum.
- Do not round hero buttons to full pills; keep buttons at an architectural 8px radius.
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 中尝试 
