Design a dark-mode website section: deep-space research canvas illuminated by electric periwinkle gradients, structured pipeline schematics, and measured analytical telemetry.
LAYOUT
The top region hosts a fixed-width container with a slim, balanced navbar (brand glyph on left, five navigation links center, ghost pill CTA right). The hero section splits into an asymmetrical two-column layout: left column contains the pill badge, display typography, explanatory paragraph, and dual button row; right column contains the wide architecture pipeline board. Directly beneath the diagram, a three-column grid of metric cards balances the visual weight before transitioning to a discreet uppercase logo ribbon.
PALETTE (use these exact hex values)
- #05070f — Abyssal Void: Global background floor underpinning all hero and navigation elements
- #0d1322 — Node Slab: Internal schematic blocks, flow chips, and metric card backgrounds
- #1a2337 — Subtle Boundary: 1px container outlines, card dividers, and inactive wire connectors
- #3b66ff — Electric Cobalt: Primary conversion button fill, active connector threads, and brand glyphs
- linear-gradient(90deg, #4272ff 0%, #7ae2cf 100%) — Cognitive Gradient: Emphasis text fill on headline suffix and key schematic glow accents
- #4ade80 — Validation Mint: Realism score telemetry line chart and verification checkmarks
- #f8fafc — Signal White: Primary headline, card titles, and high-visibility data labels
- #8493ad — Slate Muted: Body descriptions, column headers, meta tags, and inactive links
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 64px display. Tracking -0.035em on display, 0.01em on captions. The typography conveys deep empirical rigor and Silicon Valley AI maturity. By using an engineered geometric sans like Plus Jakarta Sans with ultra-tight display tracking, the text reads like scientific instrumentation rather than promotional hyperbole. The pairing of clinical white with an electric gradient creates a decisive shift from problem statement to dynamic solution.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through luminosity stacking and border contrast rather than diffused drop shadows. Nested containers step up slightly in brightness from canvas (#05070f) to card trench (#090e18) to interactive node (#0e1524), each separated by crisp 1px borders (#1a2337). Radial cyan-blue glows behind schematic centers provide focal illumination without lifting surfaces into traditional skeuomorphic space.
IMAGERY
The visual language uses precision technical schematics, vector pipeline nodes, and synthetic generative imagery like the luminescent cyan point-cloud human silhouette. Photographic content is confined strictly to tiny, round social-proof avatars. Vector line illustrations, clip art, or lifestyle photography are entirely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-column technical pipeline schematic with a glowing cyan point-cloud human silhouette at its center. This element grounds abstract 'simulation' claims into an understandable technical architecture, visually routing inputs through generative psychographics into simulated outputs. Misusing it involves turning it into a static decorative graphic rather than an authentic diagram with named nodes and coherent directional flows.
MUST
- Keep container backgrounds below #101626 to maintain severe cosmic contrast against accent graphics.
- Restrict the cyan-blue linear gradient exclusively to the headline conclusion and key schematic highlights.
- Use 1px borders (#1a2337) on every structural card to outline shapes without heavy drop shadows.
- Maintain -0.035em letter-spacing on display headlines to give technical authority to neo-grotesque type.
AVOID
- Do not apply heavy fuzzy box-shadows; separation is achieved purely via borders and luminosity shifts.
- Never use pure black (#000000); maintain deep cold navy (#05070f) for atmospheric depth.
- Do not set sub-headlines or body copy in the gradient fill; reserve gradients strictly for focal points.
- Avoid warm colors (red, amber, yellow) unless explicitly indicating an error state.
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 中尝试 
