Design a dark-mode abstract background artwork: deep space developer infrastructure suspended inside a glowing bioluminescent particle vortex and crisp telemetry callouts.
LAYOUT
The page opens with a standard top navigation bar pinned at 1280px width containing grouped menu links and a twin sign-in/action set. The hero section splits into a strict 50/50 two-column layout: left column contains the terminal kicker, display headline, body paragraph, twin CTA buttons, and trust indicators; right column hosts the particle vortex with overlaid telemetry badges. Below the fold, a horizontal 4-column feature tray provides balanced technical capability summaries.
PALETTE (use these exact hex values)
- #050913 — Abyssal Void: Primary background surface creating total contrast for luminous particles and bright text.
- #0A1322 — Deep Starlight: Background for floating HUD cards, badges, and footer tray borders.
- #15E3BE — Bioluminescent Cyan: Primary call-to-action button, active telemetry markers, and first terminal accents.
- #A855F7 — Cosmic Violet: Secondary particle highlights, telemetry nodes, and gradient end stop in hero title.
- #4F46E5 — Electric Indigo: Mid-spectrum particle field glow and transition hue in headline gradient.
- #FFFFFF — Starlight White: High-emphasis headline text and primary active link states.
- #7E90A6 — Muted Slate: Body copy, supporting captions, terminal prefix dots, and passive links.
- #1C2B3E — Glass Border: Subtle wireframe borders for secondary buttons, telemetry pills, and divider lines.
TYPOGRAPHY
Typeface Geist Sans (or Inter Display, SF Pro Display), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 54px display. Tracking -0.03em at display, 0 at body. The typographic character is austere, clinical, and developer-native. Pairing a tightly-spaced modern neo-grotesque (Geist or Inter) for headlines with crisp tabular monospace for telemetry gives the interface the feel of an aerospace telemetry dashboard. Font licensing can be satisfied entirely using open-source Geist or JetBrains fonts.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical glow, additive particle blending, and translucent glass surfaces rather than dropped box-shadows. Elevated HUD chips use 1px border outlines (#1C2B3E) and 40% opaque dark backgrounds to hover naturally over complex particle waves.
IMAGERY
The visual focal point is a procedural 3D particle vortex ring depicting millions of luminous points undulating in a wave formation from cyan through indigo and violet. No photography, 3D human figures, or literal hardware renders are used; abstract mathematical simulations represent computation.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the asymmetric pairing of an organic, glowing 3D particle torus on the right with floating HUD telemetry chips wired directly to data clusters, counterbalanced by an ultra-crisp left-aligned terminal layout.
MUST
- Retain the pure deep black #050913 canvas so the cyan particle glow appears intensely radiant.
- Use monospaced type strictly for telemetry data, terminal kickers, and metric counters.
- Confine the multi-hue gradient strictly to the accent wordmark in the hero display typography.
- Maintain generous 999px pill rounding on all call-to-action buttons.
AVOID
- Do not use solid card backgrounds that block or obscure the underlying particle ring graphic.
- Never apply high-radius circular shapes to HUD chips; keep telemetry cards at 6px to 8px corners.
- Avoid warm colors like orange or yellow; this system relies purely on cool cyan, blue, and purple.
- Do not center-align hero text; maintain a disciplined left-aligned lockup contrasting the right-side visual.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3408:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试