Design a dark-mode website section: deep-crust seismic radar meets stark enterprise utility across a severe dark-to-light interface threshold.
LAYOUT
The layout features a dual-zone vertical stack. The upper zone is a centered, single-column dark-mode CTA featuring an eyebrow kicker, main display title, body excerpt, dual buttons, and trust markers. The lower zone immediately shifts to a 6-column light-mode grid spanning company bio, four navigation columns, and an email capture module, anchored by a full-width sub-footer.
PALETTE (use these exact hex values)
- #060b09 — Abyssal Slate: Deep backdrop for the CTA container, evoking subsurface depth.
- #ffffff — Clean Canvas: Light background for the footer section and primary text color in dark CTA.
- #f9fafb — Faint Neutral: Background for inline code chips and API preview badge.
- #22c55e — Radioactive Emerald: Primary CTA button background, kicker eyebrow text, checkmarks, and brand logo icon.
- #0f766e — Deep Mineral Green: Radial backdrop illumination behind the CTA headline.
- #111827 — Ink Primary: High-contrast headings, logo wordmark, and footer column titles.
- #4b5563 — Driftwood Slate: Footer navigation links, description text, and input placeholders.
- #9ca3af — Vapor Grey: Body copy on dark surfaces and subtle legal copyright footnotes.
- #e5e7eb — Structural Stroke: Hairline separator rules and input field perimeter outlines.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 44px heading. Tracking -0.02em at 44px, +0.06em at 11px uppercase. Inter (or Geist) provides an objective, computational demeanor suited for enterprise deep-tech and resource exploration. Its dense vertical metrics and tight tracking in display roles convey precision engineering, while mono accents introduce developer rigor without disrupting corporate clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly atmospheric rather than physical. The dark section achieves z-axis presence through layered radial green illumination and fine topographic lines beneath the text, while the light section relies solely on flat 1px borders (#e5e7eb) with zero box-shadows.
IMAGERY
Vector-based topographic contour wireframes rendered in faint, dark teal-green lines mimic geophysical subterranean mapping. Avoid photographic hero cutouts or generic 3D illustrations; graphics should represent raw data, radar grids, and geological intelligence.
SIGNATURE DETAIL — the thing that makes this design itself
The stark bisection of an ambient deep-earth radar dark CTA directly atop an austere, surgical white enterprise footer, bound together by precise emerald green functional highlights.
MUST
- Retain the sharp contrast between the dark atmospheric CTA canvas and the pure white footer.
- Use emerald green (#22c55e) sparingly as a functional signal for discovery and primary actions.
- Pair monospace code previews with sleek neo-grotesque UI typography.
- Keep contour line overlays extremely subtle (under 10% opacity) against the dark backdrop.
AVOID
- Do not blend or blur the boundary between the dark CTA and the light footer.
- Avoid using bright green for long body copy or background surfaces outside buttons.
- Never apply harsh drop shadows to footer inputs or buttons; rely on crisp 1px strokes.
- Do not center-align the footer columns or newsletter signup components.
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 中尝试 
