Design a dark-mode website section: deep cyber-tactical darkness illuminated by high-velocity cyan particle trails and precision green actuation buttons.
LAYOUT
The page flows vertically from an open, atmospheric hero section to a strictly disciplined tabular footer. The top half is centered, featuring an eyebrow badge, two-line dual-color display heading, concise paragraph, and dual CTAs. The lower half shifts to a left-aligned, six-column grid containing brand meta, categorized links, and an email capture form, sealed by an edge-to-edge legal copyright bar.
PALETTE (use these exact hex values)
- #01070e — Void Canvas: Deepest background tint behind the footer grid and lower viewport.
- #040d1a — Abyssal Navy: Background for form inputs and deep visual horizon blending.
- #56e39f — Active Emerald: Primary interactive buttons, eyebrow status pill icon, and subscribe action.
- #52f6d6 — Beam Cyan: Hero headline emphasis line, radiant streaks, and visual energy.
- #ffffff — Pure White: Primary headline phrases, footer group headings, and logo mark.
- #a3b2c2 — Tactical Silver: Hero subheadings, input placeholders, and secondary descriptions.
- #5e7083 — Subdued Slate: Footer navigation links, copyright notice, and legal sub-links.
- #1d2c3f — Border Chasm: Input field borders and social icon button outlines.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px heading, 52px display. Tracking -0.03em at display, 0.08em at micro tags. Disciplined, austere, and technologically advanced. The geometric sans-serif communicates industrial-grade capability and tactical precision without decorative distraction. If Inter is unavailable, Geist or SF Pro Display faithfully maintains the engineered, unadorned voice.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 120px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through photonic luminosity and background atmospheric fade rather than drop shadows. Bright cyan/emerald light trails simulate physical speed and focal depth, while the structural footer sits solidly on an opaque abyssal plane (#01070e) that anchors the lower viewport.
IMAGERY
Abstract, long-exposure light streaks depicting ultra-high-speed horizontal trajectories converging at an infinite vanishing point. Avoid realistic stock photography of vehicles or people; aesthetic strictly relies on computational, synthetic velocity trails and dark vacuum environments.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line headline split (White over Beam Cyan) suspended directly above a high-velocity particle horizon that bleeds seamlessly into an austere deep-navy footer grid. Recreate it by tinting the primary emphasis phrase with #52f6d6 while anchoring actions with #56e39f buttons; never muddy the background with multi-colored noise.
MUST
- Use solid mint green (#56e39f) strictly for high-priority terminal conversion actions and status dots.
- Render the secondary line of hero headings in energetic beam cyan (#52f6d6) to retain the dynamic tactical tone.
- Maintain high tracking (0.12em) and uppercase transform on small 11px status tags.
- Encase input boxes in deep navy (#071220) with thin slate-tinted borders (#1d2c3f).
AVOID
- Do not introduce warm accents like red, orange, or yellow anywhere in this palette.
- Do not add heavy shadows or blur cards over the luminous kinetic particle backdrop.
- Do not use pill (999px) border radii on primary buttons; use a precise 8px military-style radius.
- Do not let background cyan light trails overlap or compromise the legibility of footer link columns.
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 中尝试