Design a dark-mode abstract background artwork: standing at the edge of cosmic data streams where deep red nebulae converge into piercing electric blue light.
LAYOUT
The page follows an asymmetric spatial balance. The top edge houses a sparse, airy navigation bar; the left middle block contains the semantic text hierarchy (eyebrow, 64px display headline, subtitle, dual CTAs); the bottom-left third is anchored by three micro-feature columns; the entire right half is reserved for the artistic focal point and light tunnel.
PALETTE (use these exact hex values)
- #05070f — Void Black: Deepest canvas background visible in the upper-left quadrant behind the primary typography.
- #ffffff — Signal White: Primary headline text, navigation link hover states, and solid background for primary pill buttons.
- #9da4b6 — Nebula Muted: Subtitles, secondary body copy, navigation menu items, and feature descriptions.
- #3cd4f6 — Laser Cyan: Eyebrow tag text, right-side light vortex streaks, and glowing atmosphere behind the cliff silhouette.
- #d92d27 — Supernova Crimson: Upper arching light streaks and cosmic dust particles framing the central horizon.
- #f16e34 — Solar Ember: Warm transitional velocity streaks bridging the red dust and the cyan vortex core.
- #0a0d14 — Button Dark Text: Label typography inside white primary capsule buttons for maximum local contrast.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px subheading, 16px body, 64px display. Tracking -0.025em at display, 0.12em at eyebrow. The typography speaks with cool, measured, scientific authority. By employing an unadorned neo-grotesque sans-serif like Inter or Plus Jakarta Sans, the voice avoids melodrama and allows the cosmic artwork to convey emotion while the text delivers calm, precise clarity. Free substitutions include Geist Sans or SF Pro Display.
GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 999px, buttons 999px. Spacing on a 8px unit, 32px gaps, 120px between sections, 1360px container, airy density.
DEPTH
Depth is entirely cinematic and environmental, created by atmospheric perspective in the illustration rather than CSS shadows. The interface elements exist on a singular, completely transparent plane directly over the canvas, with solid white buttons achieving elevation solely through extreme luminance contrast against the dark background.
IMAGERY
The visual hero is a sweeping, photorealistic digital artwork depicting hyper-accelerated light trails converging in deep space. A tiny, contemplative human silhouette stands on a dark rocky promontory, gazing into the cyan singularity. Cartoonish vectors, flat illustrations, or mundane corporate photography would completely break the grandeur.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-temperature atmospheric vortex—a sweeping diagonal arc that separates smoldering deep crimson nebulae on the left from a blinding cyan hyperspace singularity on the right, with a lone silhouetted watcher providing immense human scale. It is misused when UI text is allowed to drift into the bright cyan core, destroying readability.
MUST
- Keep typography strictly constrained to the dark void in the upper-left quadrant for maximum readability.
- Use full pill (999px) border radii for all standalone primary action buttons.
- Render eyebrow metadata in uppercase cyan (#3cd4f6) with loose letter spacing (+0.12em).
- Ensure icons are featherweight line illustrations (1.25px to 1.5px stroke width) without container backgrounds.
AVOID
- Do not place translucent glassy cards or borders over the cosmic background image.
- Do not introduce filled colored backgrounds (red or cyan) for CTA buttons.
- Do not move the display headline over the high-brightness vortex on the right side.
- Do not use serif or decorative display typefaces that clash with the clean tech aesthetic.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试