Design a dark-mode website section: cosmic enterprise sophistication blending crisp stark-white conversion spaces with deep space midnight consoles.
LAYOUT
The top section features an asymmetric two-column split: left column hosts an eyebrow badge, 48px heading, explanatory paragraph, dual CTA buttons, and 3-part trust micro-features, while the right column houses an overlapping 620px-wide data console. Below this hero-like CTA block, the background transitions abruptly across a starlit horizon into a dark navy 5-column footer. The footer arranges brand and contact info on the far left, three categorized link columns in the center, and a boxed newsletter module on the far right.
PALETTE (use these exact hex values)
- #020B18 — Abyssal Navy: deep background for the entire footer section and lower boundary
- #FFFFFF — Pure Canvas: dominant background for the hero CTA and primary narrative space
- #0A1322 — Console Slate: dark glassmorphic container background for the portfolio preview interface
- #0B5CFF — Electric Cobalt: primary call to action buttons, text highlight accents, and active status indicators
- #5842FF — Cosmic Violet: supporting gradient tones in the floating badge icon and cosmic nebula backdrop
- #EBF1FF — Pill Tint: soft background tint for feature pills and secondary informational badges
- #0A0E1A — Obsidian Body: high-contrast display heading and primary typography on light canvas
- #5E6C84 — Muted Slate: supporting body copy, descriptive captions, and secondary light text
- #8E9BAE — Footer Muted: column navigation links, copyright text, and metadata in footer
- #10B981 — Metric Emerald: positive delta badges, win rates, and bound status indicators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, highly technical, and crisp, executed entirely via a precision neo-grotesque sans-serif like Inter. Heavy display weights (700) project certainty and enterprise capability, while strict tabular tracking and compact body sizes (13-15px) convey data fidelity in the dashboard preview. Licensing Inter is frictionless via Google Fonts, with Plus Jakarta Sans serving as an ideal higher-personality drop-in alternative.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through luminous layering and ambient atmospheric glow rather than standard grey drop shadows. The dark interface card floats over the particle background with an expansive low-opacity black shadow combined with a gentle blue ambient rim light. In the footer, elevation is strictly flat and architectural, relying on subtle surface color shifts from #020B18 to #061426 for inputs.
IMAGERY
The imagery features an ethereal, deep-space planetary particle cloud composed of saturated magenta, cyan, and violet dust motes against deep indigo. The particle effect dissolves smoothly into the clean white CTA space on the left, bridging clean B2B SaaS with cosmic computational imagery. Photography of humans or generic 3D illustrations would feel completely foreign here.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-world composition: an immaculate stark-white high-conversion CTA on the left colliding organically with an interstellar glowing particulate cloud and obsidian dark-mode dashboard on the right. Misuse commonly occurs when designers flood the entire page with cosmic purple particles, destroying text readability on the light side.
MUST
- Retain the high-contrast dual canvas where the CTA header is bright white and the footer is deep void navy.
- Use electric blue #0B5CFF selectively on key verbs in display titles to guide reader emphasis.
- Maintain 16px corner rounding on the floating dashboard container to soften the high-density technical interface.
- Use a subtle 1px border with rgba(255, 255, 255, 0.08) on dark interface tiles to define shape without heavy drop shadows.
AVOID
- Do not let the cosmic nebula dust bleed entirely over the white CTA text area; maintain clean readability.
- Never use dark grey text on the dark navy footer; always stick to #8E9BAE or lighter for accessibility.
- Avoid fully sharp 0px corners; all interactive cards and inputs must feature 8px or 16px radii.
- Do not center-align the main CTA block; this layout strictly adheres to left-aligned narrative hierarchy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
