Design a dark-mode website section: deep galactic dark mode anchored by high-velocity gradient light streaks and surgical typography.
LAYOUT
The visual layout is organized in a strict top-down funnel. It begins with a centered high-impact conversion message, proceeds through a horizontal tri-part feature validation strip, and concludes in an expansive four-column site directory card topped with rounded corners. The lower bar isolates copyright from utility navigation via standard space-between alignment.
PALETTE (use these exact hex values)
- #06080e — Abyssal Canvas: Deep foundational background behind hero CTA and bottom border edges
- #090d16 — Footer Slate: Surface layer for the massive curved footer module spanning the viewport
- #1a2233 — Subtle Border: Hairline separator for the footer perimeter, inputs, and vertical feature dividers
- linear-gradient(135deg, #52eed3 0%, #6e6cf5 100%) — Primary Gradient: Fills primary interactive triggers including conversion buttons and newsletter submit
- linear-gradient(90deg, #64b5f6 0%, #818cf8 100%) — Accent Gradient Text: Applied specifically to the keyword 'today.' inside the display headline
- #ffffff — Pure White: Primary headings, brand wordmark, active column headers, and button label text
- #94a3b8 — Muted Slate: Subheading paragraph, value props, and active navigation links
- #526077 — Ghost Slate: Input placeholder text, legal notices, and bottom copyright line
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, -0.01em at body, 0 at micro. The typographic tone is technical, commanding, and ultra-modern. Set in a tight geometric sans resembling Inter or Plus Jakarta Sans, it leverages strict tracking reductions at large scales to project velocity and precision, transitioning into transparent, highly readable utility copy at lower scales.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is completely optical rather than volumetric. The design avoids CSS drop shadows, establishing spatial hierarchy solely through luminous background art, surface tonal contrast (#06080E vs #090D16), and razor-thin 1px borderline highlights.
IMAGERY
A photorealistic dark valley landscape layered with long-exposure speed trails of cyan and violet neon streaks. Imagery must evoke cinematic velocity, high bandwidth, and computational power; soft, warm, or pastel photography is completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display title anchored over radiant high-speed landscape trails, transitioning directly into a rounded full-bleed footer tray. To use it properly, allow the background light trails to visually funnel downward toward the CTA button cluster; over-saturating the footer with additional gradients destroys this focal path.
MUST
- Reserve the vibrant cyan-to-violet gradient strictly for primary conversion triggers and keyword emphasis.
- Maintain high typographic contrast by keeping link lists at #94A3B8 and headers at #FFFFFF.
- Use hairline 1px borders (#1A2233) to delimit dark surfaces instead of diffuse drop shadows.
- Give the display headline ample breathing space by maintaining a minimum 96px vertical section clearance.
AVOID
- Do not use saturated solid backgrounds for secondary buttons; keep them wireframe or ghosted.
- Avoid bright white borders; borders must never exceed rgba(255, 255, 255, 0.12) opacity.
- Do not apply drop shadows to text or buttons; depth comes entirely from background glow imagery.
- Never stack the feature trust items vertically on desktop; preserve the single inline row.
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 中尝试