Design a dark-mode abstract background artwork: deep void meets a blazing accretion disk anchored by stark white grotesque typography.
LAYOUT
The layout uses a split compositional structure: the left 45% is an uncluttered typographic column resting over deep spatial void, while the right 55% erupts with cosmic orbital energy. A fixed-height top navbar spans the width with comfortable inset margins, leading to an announcement chip, hero headline, supporting paragraph, and dual CTAs stacked vertically. The page grounds itself along the lower-left baseline with a horizontal triad of wireframe telemetry badges.
PALETTE (use these exact hex values)
- #030509 — Obsidian Deep: Deepest canvas background behind typography on the left hemisphere
- #ff6b18 — Accretion Core: Punctuation accent dot, telemetry icon glows, and hot stellar focal points
- #38bdf8 — Nebula Azure: Atmospheric dust glow, planetary horizon rim, and cosmic depth tint
- #ffffff — Photon White: Display headline, primary button fills, and high-visibility header links
- #94a3b8 — Stardust Gray: Body copy, secondary navigation links, and feature item labels
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Helvetica Now Text), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 56px heading, 72px display. Tracking -0.03em at display, 0.04em at badge caps. The typography communicates hyper-advanced engineering, precision, and cosmic authority through an immaculate modern neo-grotesque. By setting display type with tight tracking (-0.035em) and crisp line breaks, it balances emotional awe with computational rigor. Geist Sans, Inter, or SF Pro Display are ideal freely available substitutions that preserve this technical yet approachable tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is created purely through photographic celestial layers and light emission rather than CSS box shadows. The text floats cleanly above deep black empty space, while the glowing plasma disk and illuminated planetary atmosphere provide background depth planes. Glowing elements like icons and dots use subtle 4px to 12px color blooms with no hard dark shadows.
IMAGERY
The imagery language is photorealistic deep-space astrophotography featuring hyper-detailed accretion disks, gravitational lensing, and atmospheric planetary rims. Textures include fine starfields, dust motes, and radiant thermodynamic glows transitioning from electric blue to magma orange. Abstract vector shapes, human photography, or whimsical 3D renders are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Void-to-Vortex' composition: placing high-contrast, razor-sharp white grotesque typography into a calm pitch-black vacuum on the left, perfectly counterbalanced by an intensely violent orange-and-cyan accretion swirl on the right. Misusing this pattern by centering the text or flooding the left canvas with bright nebular gas immediately destroys readability and dramatic tension.
MUST
- Position all heavy visual elements (planets, accretion disks) on the right to preserve 50% void space on the left.
- Use pure white (#ffffff) exclusively on solid CTA buttons and display typography over dark backing.
- Anchor headline punctuation with a contrasting electric orange (#ff6b18) dot to echo cosmic fire.
- Maintain a fully rounded 999px pill geometry across all navigation links, buttons, and status tags.
AVOID
- Do not place high-density text or multi-column copy over the bright swirl of the nebula.
- Do not use rectangular buttons with sharp 0px or small 4px corner radii.
- Do not tint body copy pure white; keep it restrained to slate gray (#94a3b8) to avoid optical fatigue.
- Do not introduce secondary saturated accent hues like green, purple, or red.
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 中尝试