Design a dark-mode website section: deep midnight telemetry grid anchored by icy blue accents and enterprise social proof.
LAYOUT
Vertically centered single-container stack: eyebrow pill at top, followed by hero headline and explainer, a five-card horizontal metric strip, a three-card testimonial row, and concluding with a muted horizontal logo ribbon.
PALETTE (use these exact hex values)
- #030712 — Canvas Deep Dark: Dominant global backdrop color across the entire section
- #08101E — Card Surface: Card interior surface creating subtle contrast against canvas
- #1E293B — Card Border: Hairline 1px border framing metric cards, testimonials, and pills
- #0F2038 — Icon Tile Fill: Background squircle tile housing stat icons with subtle glow
- #FFFFFF — Primary Text: Hero headline, key metric values, and high-contrast titles
- #94A3B8 — Secondary Text: Subtitle paragraphs, metric sub-labels, and testimonial body text
- #64748B — Muted Text: Author titles, tertiary metadata, and logo ribbon caption
- #38BDF8 — Electric Cyan: Key emphasized headline text, quotation marks, and primary icons
- #10B981 — Safety Green: Status pulse dot inside the top badge and user stats icon
- #64748B — Logo Monochrome: Low-contrast treatment for partner and enterprise logos
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em for headings, 0.05em for uppercase pills. The typography is technical, calm, and uncompromisingly precise, conveying enterprise stability and zero-tolerance reliability. Inter or Geist delivers the requisite clinical geometry without ornamental distraction.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous contrast rather than drop shadows. Surface layers step from deep canvas (#030712) to card fills (#08101E) bordered by subtle #1E293B hairlines, accented with glowing icon pods (#0F2038).
IMAGERY
Photography is restricted strictly to circular professional headshots of tech executives and engineering leaders. Vector assets consist of sharp, geometric line icons and flat monochrome company wordmarks.
MUST
- Use 1px borders (#1E293B) to separate card surfaces from the midnight background.
- Limit electric cyan (#38BDF8) strictly to key focal words, quotation glyphs, and metric icons.
- Keep testimonial author headshots in clean circular crops (36px diameter) with subtle border.
- Maintain strict equal-height alignment across the 5-column metric card grid.
AVOID
- Do not use drop shadows; rely entirely on hairline borders and contrast tiers for depth.
- Avoid warm colors (red, orange, yellow); this palette relies purely on cyan, emerald, and cool slate.
- Do not set customer logos in full brand colors.
- Avoid crowded card paddings under 20px.
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 中尝试 
