Design a dark-mode website section: deep navy twilight illuminated by vivid cyan-blue gradients and crisp telemetry dashboards.
LAYOUT
The page structure splits into two primary tiers. The upper CTA hero section uses an asymmetrical two-column layout: left column contains the pill category tag, 48px headline, value paragraph, dual action buttons, and trust bar; right column showcases an expansive floating product window mockup. Below a subtle full-width divider, the footer organizes company info on the left, a 4-column link matrix in the center, and a newsletter form pinned to the far right, finishing with a baseline legal bar.
PALETTE (use these exact hex values)
- #040914 — Canvas Void: Deepest background base for entire page section and footer.
- #091122 — Card Surface: Background fill for nested dashboard panels, cards, and input bars.
- #16233b — Border Subtle: Hairline 1px borders dividing footer columns, cards, and dividers.
- linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) — Gradient Primary: Primary conversion button fill, prompt arrow submit, and glow backdrop.
- #00f2fe — Cyan Glow: Badge icons, line chart stroke highlights, and subtle aura points.
- #10b981 — Health Green: Status indicator dots, positive delta metrics, and confirmation checkmarks.
- #ffffff — Text Primary: Hero headline text, metric figures, column titles, and active buttons.
- #94a3b8 — Text Secondary: Subtitles, body paragraphs, and secondary button label copy.
- #475569 — Text Muted: Footer navigation links, copyright text, and field placeholders.
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, 24px heading, 48px display. Tracking -0.03em at display, 0 at body. The type choice (geometric neo-grotesque like Inter) communicates calculated precision, tech authority, and modern SaaS fluency. Display sizes use bold, tight negative tracking (-0.03em) to convey speed and impact, while body copy relaxes into open, highly legible neutral rhythms. Inter or Geist Sans is a zero-friction drop-in replacement that retains the engineered, high-scale feel.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using translucent luminous glows and tinted surface step-ups rather than traditional shadows. The base level 0 canvas (#040914) recedes, while level 1 UI panels (#070e1c) and level 2 cards (#0a1325) feel elevated through subtle 1px cyan-tinted borders (#16233b). Key interactive triggers cast soft cyan diffuse halos (box-shadow: 0 12px 32px rgba(6, 182, 212, 0.25)).
IMAGERY
No photographic imagery is present. Instead, the visual vocabulary relies entirely on high-fidelity telemetry dashboards, clean SVG line graphs, micro-metric cards, and glowing geometric icon glyphs. Any added imagery must strictly be technical, vector-based product previews or abstract wireframes on midnight backgrounds.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the electric cyan-to-blue gradient CTA pill paired with its companion dark console preview glowing against the midnight canvas. To execute properly, retain the directional gradient (#2563eb to #06b6d4) with an identical colored outer blur halo. It is commonly misused by applying the glow to flat secondary buttons or using a saturated purple/pink instead of surgical cyan.
MUST
- Keep background surfaces in the deep blue/black spectrum (#040914) rather than neutral gray.
- Restrict energetic cyan-to-blue gradients strictly to high-value interactive focal points.
- Use 1px border lines (#16233b) to delineate card sections and footer boundaries cleanly.
- Maintain high typography contrast: pure white for headings, muted slate (#94a3b8) for descriptions.
AVOID
- Never introduce pure neutral gray (#000000 or #111111); preserve the deep midnight blue undertone.
- Do not use solid flat color fills for primary buttons; always use the cyan/blue gradient.
- Avoid thick borders or heavy solid drop shadows that break the subtle dark-mode glow aesthetic.
- Never style footer link lists in bright white; keep them restrained in slate (#64748b).
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 中尝试 
