Design a dark-mode website section: deep-navy precision architecture framing high-conversion metrics and comprehensive enterprise utility navigation.
LAYOUT
The composition follows a two-tier vertical structure: a dominant floating CTA card on top followed by a six-column utility footer below. The CTA card is divided into a 55/45 split between headline copy with dual action buttons on the left and a 2x2 metric matrix on the right. Below, the footer is organized into a brand-and-trust summary column, four navigation columns, and a dedicated newsletter capture block.
PALETTE (use these exact hex values)
- #06090e — Deep Space Canvas: Root background canvas behind the floating CTA card and base for the footer columns
- #0a101d — Card Surface: Primary surface for the hero CTA banner, featuring a low-opacity radial gradient
- #0d1524 — Metric Well: Background fill for the 2x2 KPI metrics display card on the right
- #1a2538 — Subtle Border: Structural strokes separating sections, metric cards, input fields, and social icons
- #2563eb — Electric Blue: Primary CTA button, newsletter submit button, and gradient text accent for headline highlights
- #38bdf8 — Cyan Highlight: Secondary stop in the '24/7' headline gradient and active link highlights
- #f43f5e — Neon Pink: Eyebrow tag text, tiny sparkle icon, and trending metric icon fill
- #10b981 — Emerald Tint: Call answering metric icon and callout graphic tint
- #ffffff — Primary Text: Headings, metric numbers, brand logo, and active control labels
- #94a3b8 — Secondary Text: Body copy, metric labels, newsletter description, and unhovered footer navigation links
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 40px heading-lg. Tracking -0.03em at display, 0.08em at uppercase captions. The type choice feels clinical, high-tech, and conversion-focused, characteristic of modern B2B AI platforms. Tight negative letter-spacing on display sizes (-0.03em) makes the primary headline punchy, while generous line-height on body text ensures legibility on dark backgrounds. Inter or Plus Jakarta Sans are direct drop-in matches for this aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through tone layering and thin borders rather than drop shadows. Surface level 0 canvas is deepest (#06090e), with the main CTA container elevated via a 1px border (#1a2538) and subtle top-down radial navy sheen. Inset metric wells drop slightly darker to create an engraved dashboard look.
IMAGERY
Avoid photographic assets entirely; this design relies entirely on graphic UI components, vector iconography, and numeric typography. Icons are clean 1.5px stroke outline glyphs (phone, calendar, clock, trend line, shield) placed within colored rounded squircle tiles. Stock photography would disrupt the precision engineering tone.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline lockup with the vibrant blue '24/7' gradient punch, anchored horizontally against a 2x2 multi-colored metric console inside a single floating container. It instantly separates sales copy from operational proof without requiring tabs or extra sections. It fails if the metrics are arranged linearly or if the gradient text uses low-contrast colors.
MUST
- Use deep navy (#06090e) as the base rather than pitch neutral black to retain chromatic depth.
- Highlight specific key phrases in headlines with an electric blue to cyan horizontal text gradient.
- Enclose distinct metric sets inside a secondary, darker recessed well (#0d1524) with 20px radius.
- Maintain strict 11px uppercase tracking (0.08em) for all footer category column headers.
AVOID
- Do not use harsh 100% white borders; stick to deep slate borders (#1a2538) to preserve dark immersion.
- Do not allow the CTA headline to exceed two lines on desktop viewports.
- Do not omit the contextual subtitle beneath metric numbers; it grounds the data claim.
- Do not mix rounded pill buttons with square card corners; maintain the cohesive 10px/24px rounded language.
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 中尝试 
