Design a light-mode web interface screen: deep cybernetic dark hero cascading through a chromatic laser horizon into clinical enterprise light surfaces.
LAYOUT
The page opens with a full-width dark hero section featuring split copy on the left and a floating console on the right, punctuated by a curved horizon light beam. It transitions cleanly into an airy 4-column light feature list, followed by an asymmetric dual-pane developer showcase, a balanced 3-column pricing matrix, a 2-column testimonial row, and concludes with a deep-navy multi-column footer.
PALETTE (use these exact hex values)
- #080C16 — Deep Space Void: Canvas background for the immersive hero console and the dark persistent footer
- #FFFFFF — Pure Canvas White: Primary surface for feature grids, pricing tiers, and social proof sections
- #F8FAFC — Soft Wash Gray: Subtle container fill for feature panels and nested code mockups
- #38BDF8 — Horizon Cyan Flare: Left-side radiant beam, glowing accent lines, and active telemetry traces
- #F43F5E — Horizon Magenta Flare: Right-side radiant beam and high-energy optical glow in hero horizon
- #2563EB — Electric Royal: Primary call-to-action buttons, key metric highlights, and selected pricing borders
- #0F172A — Obsidian Slate: Headlines and high-contrast labels on light surfaces
- #64748B — Muted Slate: Secondary copy, descriptive subtitles, and inactive metadata tags
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 18px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.025em on display, 0em on body. The typographic tone is precise, technical, and frictionless. Inter or its direct equivalents provide uncompromising clarity across both high-density data visualization and bold marketing slogans, balancing developer credibility with enterprise cleanliness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through chromatic luminescence in the dark canvas, using blurred radial glows underneath sharp console viewports. On the light canvas, elevation is almost entirely flat, demarcated by 1px subtle strokes (#E2E8F0) and minimal 0px 8px 24px rgba(0,0,0,0.04) shadows under elevated UI mockups.
IMAGERY
Imagery is purely programmatic: dark SaaS dashboard mockups with vector line charts, developer code consoles with syntax highlighting, and an iOS mobile device frame. Photography is restricted solely to circular customer profile headshots (40px) in testimonial cards.
SIGNATURE DETAIL — the thing that makes this design itself
The luminous optical horizon: a vivid, curved cyan-to-magenta laser flare that serves as the visual threshold between the dark telemetry hero and the white enterprise presentation below. Replicate this with an elliptical CSS box-shadow/linear-gradient layer with a 60px blur pinned along the bottom edge of the hero container.
MUST
- Keep the horizon beam strictly at the boundary between the dark hero and the light main content.
- Use solid #2563EB for primary transactional buttons and reserve neon cyan/magenta exclusively for optical glows.
- Enforce -0.02em letter spacing on all titles above 24px to preserve modern neo-grotesque authority.
- Use 1px borders (#E2E8F0 on light, #1E293B on dark) rather than heavy drop shadows for separation.
AVOID
- Do not bleed the neon red-blue laser gradient into body text or button fills.
- Do not use dark backgrounds for the core pricing or feature matrix sections.
- Avoid pill-shaped radiuses on standard action buttons; limit full pills to tags and badges.
- Never drop the border contrast on cards below 1px subtle slate (#E2E8F0).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2192:3760. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
