Design a dark-mode website section: deep-space midnight illuminated by an ethereal curtain of electric cyan and teal theatrical light.
LAYOUT
The hero operates on a strictly centered, top-down hierarchy. An airy 64px global navigation bar introduces the brand, flowing into an authoritative 52px display headline and succinct two-line value text. Directly below, social proof indicators build enterprise trust, followed immediately by a dual-CTA pill cluster. The visual climax is a centered 720px interactive prompt card suspended directly over the horizon glow.
PALETTE (use these exact hex values)
- #020611 — Midnight Base: Foundational canvas background color anchoring the dark theatrical theme across the page.
- #061325 — Glass Surface: Translucent background fill for floating hero prompt card with backdrop blur.
- #38bdf8 — Electric Cyan: Primary glowing light rays, active accents, border glows, and start of button gradient.
- #5eead4 — Mint Teal: Key phrase text highlight, terminal button gradient hue, and sparkle icon tint.
- linear-gradient(90deg, #4ba3f5 0%, #34d7bc 100%) — Primary Gradient: High-visibility fill on the primary hero 'Book a demo' CTA pill button.
- #ffffff — Text Pure White: Primary headings, brandmark wordmark, and high-emphasis labels.
- #94a3b8 — Text Muted Slate: Supporting descriptive paragraph, placeholder prompt text, and trust badge labels.
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Plus Jakarta Sans, Geist Sans), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 52px display. Tracking -0.025em on display, 0 on body. The typography speaks with the quiet, authoritative precision of high-end enterprise infrastructure. Rendering the headline in Inter or an equivalent geometric sans-serif keeps the focus on clarity and scale, preventing the dramatic background lighting from making the design feel chaotic. The switch to mint teal (#5eead4) on 'end-to-end' provides the essential cadence break.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical phenomena rather than classical drop shadows. The backdrop simulates vertical light curtains piercing through darkness, while a glowing cyan ground plane gives the illusion of a reflective stage floor. Floating cards use semi-transparent dark fills with subtle cyan rim lighting (1px stroke with 25-40% opacity) that catches the ambient backlighting.
IMAGERY
The visual world avoids stock photography and 3D device renders, relying entirely on synthetic lighting effects resembling theatrical aurora borealis. The vertical streaks of light represent computational velocity and clarity piercing through operational complexity. Adding photorealistic human faces or literal rental property photos would instantly clash with this futuristic computational atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the theatrical curtain of vertical cyan light rays illuminating a floating glass prompt panel from behind, grounded by a sharp horizontal horizon glow. Recreate this using multiple overlapping vertical CSS radial-gradients or CSS mask blurs (#38bdf8 and #5eead4) over a deep navy backdrop. A common mistake is making the rays too sharp or solid, which destroys the ethereal atmospheric haze.
MUST
- Use dramatic theatrical cyan and teal vertical light rays against a deep midnight navy (#020611) background.
- Highlight only the final punchy value proposition in the display heading with mint teal (#5eead4).
- Employ true 999px pill radiuses for all buttons, badge tags, and secondary action containers.
- Add a subtle 1px cyan glow border (rgba(56, 189, 248, 0.3)) to elevated glass panels.
AVOID
- Never use pure black (#000000); maintain deep midnight blue (#020611) to preserve color depth.
- Do not apply square or low-radius corners (<16px) to hero interactive components or pills.
- Avoid multi-colored light rays; stay strictly within cobalt, electric cyan, and mint green spectra.
- Do not fill secondary buttons with solid colors; keep them translucent glass with fine borders.
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 中尝试