Design a dark-mode website section: deep space telemetry with an electric blue event horizon grounding precision enterprise trust.
LAYOUT
The viewport is structured into a dominant central CTA stack that transitions seamlessly into a structured multi-column footer. At the top, centered typography cascades from a security badge down to the dual-action button group. Below this, a curving luminous horizon spans the full viewport width, acting as a visual threshold. Directly underneath lies the footer, organized into an asymmetrical left-heavy newsletter block, four equal text navigation columns, and a right-aligned compliance badge card.
PALETTE (use these exact hex values)
- #030712 — Deep Midnight Void: Absolute background canvas behind the ambient particle field and footer layer.
- #070e1e — Elevated Marine Slab: Background tone for the bottom navigation tray and trust container card.
- #1e293b — Subtle Outline Stroke: Delicate boundary line defining badges, input fields, and compliance callout cards.
- #38bdf8 — Electric Cyan: High-emphasis hero text highlights, trust badge accents, and primary action gradient start.
- #2563eb — Cobalt Luminescence: Gradient base for the primary CTA button and bottom horizon mesh aura.
- #ffffff — Pure White: Headline text, logo mark typography, and high-priority button text.
- #94a3b8 — Muted Slate: Subtitles, body descriptions, footer links, and helper labels.
- #64748b — Dim Slate: Section uppercase eyebrows, inactive link headings, and copyright text.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.025em on display headings, +0.06em on small caps. The typography relies on a neutral, engineered neo-grotesque (Inter or similar match) that conveys scientific rigor, cryptographic certitude, and institutional reliability. High-contrast white weights define the bold statements, while disciplined uppercase tracking on metadata gives the impression of flight telemetry or mission-critical console readouts. Free substitutes like Plus Jakarta Sans or Geist seamlessly maintain this structural integrity.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than physical skeuomorphic shadows. The deepest level is a rich midnight void (#030712), overlaid by a volumetric cyan particle mesh and an intense horizon light sweep. High-priority cards and navigation surfaces sit slightly elevated with 1px translucent strokes (#1e293b) rather than heavy drop shadows.
IMAGERY
The visual language relies on generative particle fields and a sharp planetary horizon curve rendered in electric cyan and deep indigo. The particle nodes emulate precision telemetry and physical AI sensor networks without using literal photography. Any cartoonish illustrations or stock photos of robots would clash severely with this cryptographic, enterprise-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the glowing curved planetary horizon line that separates the hero CTA from the lower footer infrastructure. It acts as both a metaphor for an event horizon and a physical lighting fixture casting soft cyan glow across the dark space. It must always curve slightly upwards at the center with faint particle grids fading into the lateral edges.
MUST
- Reserve vibrant cyan (#38bdf8) strictly for active triggers, focal terms, and glow cores.
- Maintain high contrast between pure white headings (#ffffff) and the deep void canvas (#030712).
- Keep footer column headers in uppercase with +0.06em tracking and muted cyan/slate coloring.
- Use generous vertical spacing (at least 64px) between the hero CTA actions and footer boundary.
AVOID
- Do not introduce warm tones like red, amber, or gold; stick strictly to cyan and cobalt hues.
- Do not make the footer background fully opaque black; keep the faint marine blue (#070e1e) shift.
- Do not drop secondary text below 11px or allow body contrast to slip under WCAG AA standards.
- Do not use sharp 0px corners on interactive buttons; adhere strictly to 8px or pill radiuses.
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 中尝试