Design a dark-mode abstract background artwork: sparse typographic discipline anchored against an incandescent particle event horizon in deep celestial void.
LAYOUT
The page follows an asymmetric split layout: the left 45% accommodates technical metadata, display typography, dual CTAs, and a 4-column metric telemetry row. The right 55% is given entirely to an explosive, glowing particle vortex that breaks past the right viewport boundary. An ethereal wireframe perspective grid anchors the bottom edge.
PALETTE (use these exact hex values)
- #06070d — Void Black: Root background canvas providing maximum contrast for bioluminescent particle rendering
- linear-gradient(90deg, #ff2a5f 0%, #9035ea 100%) — Plasma Gradient: Hero CTA background and accent keyword typography gradient fill
- #ff3366 — Supernova Coral: Telemetry pill dot indicator, primary metric value, and leading edge glow
- #00e5ff — Cyan Flare: Metric accent for reliability stat and trailing edge particle highlights
- #ffb049 — Starlight Gold: Latency metric highlight indicating measured performance thresholds
- #8c70ff — Nebula Iris: Secondary metric coloration and smooth blend between coral and cyan
- #ffffff — Pure Starlight: Main headline copy, active nav elements, and critical callout labels
- #8b93a7 — Stardust Muted: Supporting paragraph body copy, secondary navigation links, and metric descriptions
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,SF Pro Display,Geist), weights 300/400/500/600. Sizes 11px caption, 12px body-sm, 16px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.18em at micro-caps. The typographic tone is precision-engineered, serene, and computational. Setting the oversized headline in an ultra-lightweight geometric neo-grotesque evokes spaceflight instrumentation and modern mathematical elegance. Plus Jakarta Sans or Inter serve as seamless, technically sound matches.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical atmospheric illumination rather than traditional drop shadows. Luminescent red and cyan particle flares cast soft radiant glows into the dark field, while foreground text floats crisply atop the spatial void via high contrast and sheer clarity.
IMAGERY
The visual hero is a generative 3D particle sphere forming a hyper-luminous arc resembling an astronomical event horizon. Micro-dots in fiery crimson, orange, and electric blue cascade along orbital trajectories over a faint wireframe perspective plane. Photorealistic screenshots or flat corporate vector illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The singular defining gesture is the delicate, ultra-light headline punctuated by a multi-color gradient keyword ('Automatically.') that directly mirrors the high-energy crimson-to-cyan planetary particle vortex on the opposite side of the screen.
MUST
- Keep display typography weights light (300-400) even at sizes above 48px to prevent visual heaviness.
- Restrict color saturation strictly to particle graphic elements, gradient CTAs, and telemetry numbers.
- Ensure secondary body copy stays around 40-50% optical luminance (#8b93a7) against the dark background.
- Use subtle 1px translucent borders (rgba(255, 255, 255, 0.12)) rather than heavy solid strokes.
AVOID
- Do not use heavy, bold sans-serif display typefaces that compete with the organic particle visual.
- Never place full-bleed white or light-themed cards over the dark void canvas.
- Avoid flat solid accent colors on primary actions; always favor smooth chromatic plasma gradients.
- Do not tint the background canvas with muddy brown or bright blue; retain deep obsidian (#06070d).
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 中尝试