Design a dark-mode website section: surgical deep-forest telemetry with clinical white utility.
LAYOUT
The page flows vertically through two distinct operational spaces. First, an expansive 680px-tall dark CTA enclosure framed with generous external page margins. Directly beneath, after an 80px gap, sits an expansive multi-column white utility grid: 1 wide brand bio column, 4 lean navigation columns, and 1 rightmost lead-capture column, closed by a hairline-separated sub-footer.
PALETTE (use these exact hex values)
- #021617 — Obsidian Teal Void: dominant background for the rounded CTA section
- #093834 — Deep Cyan Glow: ambient radial spotlighting behind headline text and edge nodes
- #ffffff — Canvas White: clean stark background for the primary site footer and input fields
- #34d399 — Radiant Mint: primary button fill, highlight headline text, and active domain tag
- #0f172a — Slate Headline: footer category headings, logo typography, and primary footer labels
- #64748b — Muted Slate: footer link lists, copyright notice, and explanatory body copy
- #99f6e4 — Teal Frost: badge label typography and pulse icon stroke
- #e2e8f0 — Border Subtle: newsletter input field outline and sub-footer separator line
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em for display, 0.05em for badge caps. Disciplined, developer-centric, and quietly authoritative. Inter or Geist provides the neutral mechanical precision suited for infrastructure and incident telemetry, while the glowing mint accent on display type conveys automated recovery and health.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely via color contrast and ambient light fields rather than box shadows. The CTA card floats against the canvas by virtue of its deep #021617 fill juxtaposed with internal radial light bleeds (#093834). Interactive elements like buttons and inputs stay almost entirely flat with crisp 1px borders.
IMAGERY
Abstract telemetry graphics only: faint node networks with subtle 1px connecting arcs and glowing terminal dots at the card perimeter. Avoid photorealistic people, 3D clay objects, or skeuomorphic panels.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone 'Make self-healing / your new baseline' headline set against an obsidian-teal card containing faint dot matrices and glowing ECG telemetry badges. Removing the radiant mint text color transition instantly flattens the product's identity.
MUST
- Retain the dark-to-light boundary between the floating CTA card and the white base footer.
- Highlight key headline endings in #34d399 against the deep teal card background.
- Keep footer column headers in #0f172a with 600 weight and links in #64748b with 400 weight.
- Use 24px border radius on the outer CTA card container with horizontal inset padding.
AVOID
- Do not apply heavy drop shadows to the dark CTA card; rely entirely on background contrast.
- Do not render the footer on a dark canvas; the stark transition to pure #ffffff is deliberate.
- Avoid using bright green on footer links; confine #34d399 strictly to CTA buttons, accents, and logos.
- Never stack the trust proof items vertically on desktop layouts.
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 中尝试 
