Design a dark-mode website section: deep midnight canvas electrified by luminous data streams converging into an intelligent core.
LAYOUT
The header sits fixed at the top with an expansive horizontal spread. The main viewport is structured as a two-column 50/50 hero: the left column holds a category pill, massive display headline, explanatory paragraph, dual action buttons, and a three-column telemetry bar. The right column showcases a horizontal workflow diagram (Inputs -> Axis Copilot Core -> Outputs) linked by curvilinear glowing particle streams.
PALETTE (use these exact hex values)
- #03060f — Canvas Abyss: Root background canvas providing high-contrast backdrop for particle lighting effects
- #070f1e — Surface Card: Background fill for input/output glass cards and navigation containers
- #13314d — Border Cyan Muted: Subtle bounding strokes (1px) around HUD cards and pills
- #22d3ee — Electric Cyan: Primary brand accent, input stream trails, and highlighted headline phrasing
- #4ade80 — Signal Green: Output stream luminescence, status badges, and gradient terminal endpoint
- linear-gradient(90deg, #1d8cf8 0%, #4ade80 100%) — Hero CTA Gradient: High-visibility primary action button and energetic accent text gradient
- #ffffff — Text Primary: Dominant display headlines, major card titles, and high-contrast metrics
- #94a3b8 — Text Secondary: Supporting paragraph text, navigation links, and descriptive sublabels
- #475569 — Text Dimmed: Category headers (INPUTS, OUTPUTS) and inactive UI states
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 15px body, 16px body-lg, 28px heading, 56px display. Tracking -0.03em at display, 0.05em at caps. The typography is disciplined, precise, and computational, relying on a clean modernist neo-grotesque like Inter Display. Tight tracking at display sizes (-0.035em) yields a confident enterprise presence, while strict uppercase micro-copy (10-11px, +0.08em tracking) imparts a trading-floor telemetry feel. Substitute with Plus Jakarta Sans or SF Pro Display without loss of tone.
GEOMETRY & SPACING
Corner radii — cards 8px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, tight density.
DEPTH
Depth is created entirely through optical bioluminescence rather than traditional drop shadows. Translucent glass surfaces at rgba(7, 15, 30, 0.75) float above a pitch-black canvas, backlit by radiant particle streams and a soft radial blue halo centered behind the core node. Elements higher in the hierarchy emit subtle outer glows (#22d3ee) rather than cast shadows.
IMAGERY
The imagery is purely synthetic, composed of dense particle point clouds and vectorized streamline splines resembling fiber-optic neural pathways. There are no photographic portraits or lifestyle imagery; every graphic represents abstract financial and AI data flows converging through a processing core.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the convergent particle synapse: two vertical arrays of HUD cards connected by flowing, multi-filament luminous curves into a pulsating circular reasoning hub. It visually translates abstract multi-source synthesis into a single coherent process; misusing it as static background wallpaper destroys its functional storytelling role.
MUST
- Anchor high-tech authority by setting primary headlines in pure white against deep abyss black (#03060f).
- Restrict vibrant cyan-to-green gradients exclusively to the active value prop and primary interactive CTA.
- Use fine 1px semi-transparent borders on all dark card surfaces to maintain crisp separation.
- Ensure particle trails flow logically from input nodes on the left to output nodes on the right.
AVOID
- Do not add solid, opaque gray or white card backgrounds that break the dark atmospheric immersion.
- Never use warm colors (red, orange, yellow) except for critical error states; preserve the cool cybernetic palette.
- Avoid thick button borders (>1px) or heavy drop shadows with blur values that simulate daylight physics.
- Do not allow the particle stream graphics to obscure typographic contrast of the central node text.
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 中尝试