Design a dark-mode website section: misty highland dusk fading into clinical deep-slate modular navigation for enterprise artificial intelligence.
LAYOUT
The page transitions vertically from an atmospheric conversion section into a grounded technical footer. The CTA section anchors text and dual buttons to the left third of the container, allowing the right horizon to breathe. Below, the footer unfolds across a full-width container divided into an identity block (left), four equal navigation columns (center), and an interactive subscription/contact stack (right). A 1px divider terminates the layout into a balanced two-sided legal bar.
PALETTE (use these exact hex values)
- #0A0E14 — Obsidian Base: Solid background for footer and dark edge blend of the CTA banner
- #121822 — Subtle Charcoal: Background fill for newsletter email input and social icon tiles
- #1E293B — Border Slate: Dividers, hairline horizontal rules, and input borders
- #2563EB — Electric Cobalt: Primary action fill for demo booking and subscribe triggers
- linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) — Azure Glow: Primary CTA button gradient fill with top-edge specular highlight
- #82B9FF — Cyan Ice: Gradient finish on headline display type highlighting AI keywords
- #FFFFFF — Text Primary: Primary headings, active link states, and prominent CTA typography
- #94A3B8 — Text Secondary: Body descriptions, footer navigation links, and column headers
- #64748B — Text Muted: Legal copyright, sub-footer inline anchors, and form placeholders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.02em at display, 0.08em at micro-caps. The typography is disciplined, objective, and institutional yet modern. Set in a geometric neo-grotesque like Inter, it avoids eccentric quirks in favor of clinical clarity appropriate for enterprise healthcare billing. Display sizes leverage tight tracking (-0.02em) and dual-tone gradients to project technological precision without feeling cold.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through lighting, atmospheric haze, and tonal contrast rather than layered drop shadows. Interactive components rely on 1px borders in #1E293B and subtle surface value shifts between #0A0E14 and #121822 to communicate boundaries. The CTA button uses a microscopic top-edge specular linear gradient to give a faint tactile lift.
IMAGERY
Photography depicts an atmospheric, dim natural landscape—rolling green hills shrouded in morning mist under a fading deep-navy sky. The sky subtly integrates a fine particle matrix resembling digital constellations or binary code. Abstract stock 3D renders, neon glows, or high-saturation sunny photography would completely break this calm, clinical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone composition: an organic misty landscape subtly infused with a digital binary particle sky that seamlessly bleeds into a monolithic dark enterprise footer. Misusing it involves separating the hero image from the footer with a harsh horizontal line instead of letting the dusk gradient naturally dissolve into #0A0E14.
MUST
- Use uppercase tracking (0.08em) strictly on 11px category labels like 'PRODUCT' or 'COMPANY'.
- Keep footer link lists strictly vertical with 12px gaps between text items.
- Blend the bottom edge of the hero landscape photography seamlessly into the #0A0E14 footer base.
- Apply subtle 1px #1E293B borders around inputs to maintain contrast against dark backgrounds.
AVOID
- Do not introduce sharp 0px corners or fully rounded 999px pills on inputs and standard buttons.
- Avoid bright white text for descriptive body copy; use muted slate #94A3B8 to prevent visual fatigue.
- Never place heavy drop shadows under buttons; rely on high-contrast cobalt fills and subtle borders.
- Do not break the multi-column footer into uneven margins; use a balanced 6-column modular grid.
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 中尝试 
