Design a dark-mode abstract background artwork: astronomical scale meets delicate frosted glass devtools anchored to a fiery event horizon canvas.
LAYOUT
The header spans full-width with a generous inner container, hovering invisibly over the scene. The left hemisphere hosts the primary narrative stack (eyebrow, massive title, subtext, dual CTA, user proof). The right hemisphere features pinpoint diagrammatic callout nodes embedded in the artwork, all grounded by a full-width frosted feature ribbon docked along the bottom.
PALETTE (use these exact hex values)
- #0c0714 — Void Black: Deep cosmic background canvas behind all illustrations and UI layers
- #ff7e5f — Solar Flare: Primary brand accent seen in active CTA pills and nebula light points
- #ffa385 — Ember Peach: Highlight tint for top borders, secondary text gradients, and button hovers
- #ffffff — Starlight White: Hero display text, active link labels, and emphasized feature titles
- #9e94b2 — Nebula Lilac: Body copy, navigation items, inactive states, and technical callout bodies
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 64px display. Tracking -0.03em at display, 0.01em at body, 0.25em at overline. The typographic tone is ultra-engineered yet accessible, utilizing Inter for pure mechanical clarity. Its neutral grotesque geometry counterbalances the intensely dramatic, cinematic background illustration, ensuring the product reads as high-performance cloud infrastructure rather than a video game.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, airy density.
DEPTH
Depth is created through luminosity and layered translucency rather than traditional drop shadows. The rich cosmic background bleeds through backdrop-blurred glass containers, producing natural, ambient illumination that highlights border perimeters.
IMAGERY
The visual anchor is a hyper-detailed, cinematic sci-fi landscape depicting a blazing accretion disk or solar event horizon. Any replacement art must evoke astronomical scale, rich particle dust, and incandescent warmth; flat vector art or generic isometric mockups would destroy the atmospheric mood.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated landscape annotation nodes: hairline vector lines connecting floating microcopy directly to glowing peaks of a cosmic event horizon, visually fusing abstract software capabilities to a vast physical-feeling universe.
MUST
- Anchor feature callouts directly to the background terrain with delicate 1px connector lines.
- Use generous frosted glassmorphism (20px+ blur) for all low-level floating containers.
- Maintain strict left-alignment on hero copy to let the right-side cosmic illustration dominate.
- Set overline labels in uppercase with at least 0.2em tracking for a technical, precise tone.
AVOID
- Do not use opaque solid backgrounds for cards or docks; transparency is essential.
- Never place heavy drop shadows with dark offsets; rely solely on ambient light bleed.
- Avoid square or sharp corners on buttons; keep primary actions strictly pill-shaped (9999px).
- Do not clutter the right half of the hero layout; it belongs entirely to the visual narrative.
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 中尝试