Design a dark-mode website section: electric neural blue meets dense physical compute, bridging deep silicon architectures with glowing volumetric spatial telemetry.
LAYOUT
The layout utilizes a two-column desktop split hero with 55% allocated to the left-hand messaging hierarchy and 45% reserved for the 3D isometric apparatus. The left column stacks systematically: announcement pill, 52px display heading, lead paragraph, dual CTA buttons, a 3-part metric module, and an inline trust badge. The bottom of the viewport reveals the docked curved shoulders of the next section container.
PALETTE (use these exact hex values)
- #040711 — Void Canvas: Root background canvas behind hero graphics, header, and typography
- #0a101f — Substrate Surface: Background fill for floating cards, stats modules, and docked lower sections
- #3b66f5 — Primary Indigo Action: Solid primary CTA button fill and interactive focus rings
- linear-gradient(90deg, #3b82f6 0%, #a855f7 100%) — Scale Gradient: Hero headline emphasis and secondary section highlighted phrases
- #38bdf8 — Neural Cyan Glow: Volumetric data streams, active chip wires, and metric icons
- #22c55e — Telemetry Success: Checkmark icons in telemetry HUD card and system status indicators
- #ffffff — Pure Optical White: Primary headings, primary button label, and high-priority metrics
- #94a3b8 — Slate Muted: Hero body copy, inactive nav links, and stat explanatory labels
- #1e293b — Subtle Border Outline: 1px stroke defining cards, pill badges, and secondary button boundaries
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 28px heading, 52px display. Tracking -0.03em on display, -0.01em on body. The typographic tone is authoritative, highly technical, and modern enterprise infrastructure. Utilizing Inter with tight display tracking creates a dense, engineered feel that matches AI silicon specifications. Open-source substitutes like Plus Jakarta Sans or Geist Sans maintain the necessary architectural precision.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through light emission rather than ambient occlusion shadows. Opaque and semi-translucent dark surfaces float directly above deep cosmic backdrops, illuminated from behind by cyan and electric blue radial glows. Glassmorphism is applied via subtle backdrop blur on telemetry HUD elements with fine 1px edge reflections.
IMAGERY
The visual hero is a photorealistic yet stylized 3D composition: an isometric dual-tier compute module labeled 'HARDWARE' and 'MODEL' connected by fiber optic laser lines that blossom into a glowing wireframe neural network brain. Surrounding space contains soft starry nebulae and subtle PCB circuit traces. Flat vector illustrations or stock photography are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-plane isometric hardware-to-brain nexus: physical silicon heat-spreaders below wired directly via neon light conduits to a hovering neural network above. It physically illustrates the metaphor of 'Model-Hardware Co-Design'. Misusing it as purely decorative clipart without the physical chip labels breaks its communicative purpose.
MUST
- Ground the canvas in absolute void black (#040711) so neon photon effects project genuine optical glow.
- Use 1px subtle strokes (rgba(255,255,255,0.08)) to delineate cards instead of heavy drop shadows.
- Apply the linear-gradient (#3b82f6 to #a855f7) sparingly only to key hook words in major display titles.
- Keep metric titles at 28px-32px bold with compact 13px descriptive labels beneath.
AVOID
- Do not introduce light grey surface cards; always rely on semi-transparent dark navy glassmorphism.
- Never use plain drop shadows with black blur; use colored radial glows (cyan/blue) for illumination.
- Do not make the secondary button filled; it must remain a ghost outline to preserve visual hierarchy.
- Avoid warm colors like yellow, orange, or red outside of explicit system warning states.
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 中尝试