Design a dark-mode website section: deep space canvas ignited by electric indigo gradients and crisp synthetic glass interfaces.
LAYOUT
The header sits at the top with brandmark left, navigation centered, and action right. Below, the hero splits into a balanced two-column desktop arrangement: a left-aligned typography column with badge, heading, narrative paragraph, CTA pair, and trust proofs; and a prominent right column hosting the tilted software interface illuminated by ambient glow.
PALETTE (use these exact hex values)
- #06080d — Abyssal Canvas: Root background canvas providing pure dark contrast behind all layout elements
- #0d131d — App Container Surface: Background fill for the floating software window and inner card containers
- #1b2537 — Subtle Border Slate: Delicate 1px borders on UI panels, buttons, and app mockup sections
- #2968ff — Electric Blue Primary: High-visibility primary action buttons, active navigation markers, and glow origins
- linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%) — Accent Gradient: Text fill gradient applied to the focal value proposition keyword
- #1e3a8a — Luminescent Aura: Subtle deep blue radial halo casting luminance behind the app perspective mockup
- #f8fafc — Primary Text White: Display headings, active labels, and primary button text
- #8893a7 — Muted Text Slate: Explanatory subtext, navigation links, inactive sidebar items, and meta icons
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. The typography is cold, precise, and highly technical, utilizing a modern grotesque sans-serif with geometric undertones. Its tight tracking and high x-height evoke modern high-performance desktop developer tooling. Ideal fonts include Inter or Geist Sans, which can be substituted with Plus Jakarta Sans without stylistic decay.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminescence rather than traditional dropped shadows. Dark floating elements use fine 1px strokes (#1b2537) to delineate boundaries against the deep #06080d background, accompanied by low-opacity, broad-radius radial blue glow behind the primary mockups.
IMAGERY
Visual assets are exclusively high-fidelity software UI mockups presented in an oblique, floating 3D perspective. Organic lifestyle photography or generic vector illustrations would break the analytical, developer-grade precision of this environment.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the juxtaposition of a bold electric-to-lavender gradient word against an pitch-dark void, directly mirrored by a 3D-angled app window resting atop a dot-matrix stipple glow field. To use it properly, keep the stipple field low-contrast and ensure the glow emanates only from the software container itself.
MUST
- Keep text-fill gradients strictly reserved for 1-2 words in the primary heading to prevent visual noise.
- Use 1px subtle strokes (#1b2537) against #0c121b surfaces to build elevation rather than blurry black shadows.
- Maintain strict left-aligned editorial hierarchy on the text side while anchoring the right with product interface visuals.
- Pair the electric blue brand color (#2968ff) with soft lavender/purple transitions in key hero moments.
AVOID
- Do not use solid pure white (#ffffff) for multi-line body copy or navigation links.
- Do not introduce high-radius fully round pill shapes for standard CTA buttons; keep them at 10px.
- Avoid heavy drop shadows with high opacity; depth must emerge from luminescence and subtle border contrast.
- Do not apply the gradient text treatment to captions, body paragraphs, or UI interface labels.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
