Design a dark-mode website section: deep void canvas illuminated by cyan data streams funneling into crystalline synthesis.
LAYOUT
Asymmetric two-column split at the top: left column holds metadata pill, 48px display heading, subtext, and dual CTA buttons, followed by social proof logos. Right column hosts the interactive 3D synthesis diagram with radiating source tags. The bottom spans a 4-column horizontal feature shelf.
PALETTE (use these exact hex values)
- #06080D — Obsidian Canvas: Deepest background base across the full viewport
- #0D131F — Card Surface: Semi-translucent container background for cards and badges
- #1B2433 — Subtle Border: 1px structural outline on floating source cards and bottom grid
- #38BDF8 — Electric Cyan: Bright glow accents, spark icons, and gradient start
- #2563EB — Cobalt Glow: Primary button fill and gradient endpoint for highlighted heading copy
- #0EA5E9 — Neon Trace: Glowing directional lines routing from data sources into central hub
- #FFFFFF — Text Primary: Headings, primary button text, and strong label titles
- #94A3B8 — Text Muted: Descriptive body copy, counts, and metadata labels
- #475569 — Text Faint: Trusted-by supertitle and non-interactive logos
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, 15px subheading, 18px body-lg, 48px display. Tracking -0.03em on display, 0 on body. Clean, engineered, and ultra-precise modern sans-serif. The voice is authoritative enterprise AI, made approachable through open tracking and clean geometric letterforms.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous contrast and glassmorphic overlays rather than drop shadows. Soft radial cyan-blue lighting glows beneath the 3D isometric crystal, while floating cards sit at z-10 with hairline borders catching faint edge light against the void.
IMAGERY
The visual hero is a synthetic 3D isometric artifact—a glowing crystalline hexagonal core resting on dark tiered plinths. Avoid photographic imagery or hand-drawn illustrations; maintain architectural, geometric, and computational 3D forms.
SIGNATURE DETAIL — the thing that makes this design itself
The orthogonal glowing data circuit network that connects floating glassmorphic document badges into a central isometric blue hexagonal prism. Recreate it with 1.5px glowing strokes, rounded corners, and translucent badge nodes; never substitute with straight angled arrows or chaotic curves.
MUST
- Use deep dark backgrounds (#06080D) so neon cyan/blue glowing accents stand out with clear contrast.
- Render connecting lines as clean 90-degree orthogonal paths with smooth 12px fillet corners.
- Apply gradient text specifically to emphasize high-value keywords, keeping surrounding text solid white.
- Ensure source badges display precise, compact hierarchy: icon left, title top, metric below.
AVOID
- Do not use high-opacity white fills on cards; stick to translucent dark glass (#0D131F with 1px border).
- Avoid warm colors (red, orange, yellow); the palette is strictly cold cyan, cobalt, and slate.
- Do not omit the glow halos around the central geometric illustration.
- Never make connecting data pipe strokes thicker than 1.5px to preserve technical delicacy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
