Design a dark-mode website section: developer-grade property automation set against an expansive sunlit alpine landscape grounded by deep midnight system chrome.
LAYOUT
The page flows from an open, centered daylight hero section into a structured, dual-pane technical terminal card that straddles the boundary before resolving into a dense multi-column dark footer. The footer arranges brand and social identifiers on the far left, a 4-column link directory in the center, and newsletter capture with trust certifications on the right. A fine baseline utility row closes the viewport with copyright and privacy controls.
PALETTE (use these exact hex values)
- #060b14 — Midnight Ground: Deep navy canvas foundation for the full-width footer and base utility bar
- #0a101f — Console Slate: Background fill for the terminal preview card and newsletter input field
- #1a263d — Console Stroke: One-pixel structural borders enclosing the code block, pill chips, and dividers
- #0d6efd — Cobalt Action: High-intent CTA buttons, focal headline emphasis, and input submit triggers
- #10b981 — Operational Emerald: Live system status indicators, API response 201 badge, and security icon highlight
- #f59e0b — Security Amber: Accent badge icon tint for operator trust and enterprise access credentials
- #ffffff — Signal White: High-contrast headings, active navigation tabs, and primary body copy
- #8b9bb4 — Muted Slate: Footer column links, terminal comments, and supporting subtitle descriptions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), 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 labels. The typography presents an authoritative, precision-engineered tone using clean geometric neo-grotesque type (Inter match) balanced against functional monospace characters. Headlines are tightly tracked (-0.02em) with heavy weights for commanding presence, while micro-labels rely on wide tracking to optimize readability at 11px. JetBrains Mono provides unambiguous legibility for technical endpoints and parameter keys.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled strictly through chromatic layering and hairline geometry rather than blurred drop shadows. The top photography acts as a bright atmospheric ground, upon which the midnight navy terminal and footer surfaces sit with 1px structural borders (#1a263d). Nested components like the newsletter input and status pills use subtle tint shifts (#0e172a against #060b14) to imply spatial stacking.
IMAGERY
The imagery language contrasts high-fidelity outdoor landscape photography (rolling verdant green hills under a hazy daylight sky) with stark, clean developer terminal UI. Photography must remain expansive, natural, and soft-focus, without harsh artifacts or urban clutter, serving strictly as an emotional canvas for enterprise automation.
SIGNATURE DETAIL — the thing that makes this design itself
The deliberate juxtaposition of a bright pastoral landscape hero with an anchored, midnight-blue API terminal console and industrial footer layout.
MUST
- Keep footer column titles in uppercase 11px type with wide letter-spacing (0.08em).
- Pair photographic landscape hero sections directly with dark engineering terminals to maintain high visual contrast.
- Use saturated cobalt blue (#0d6efd) strictly for primary call-to-action triggers and key headline phrases.
- Render code snippets inside a dedicated monospaced font with subtle syntax coloring (green, slate, cyan).
AVOID
- Do not use generic rounded pill buttons for standard actions; keep interface buttons at 8px radius.
- Do not use pure black (#000000) for the dark sections; use deep midnight navy (#060b14).
- Do not crowd footer link columns; enforce a minimum 24px column gap and 12px vertical item gap.
- Do not hide system health metrics; surface operational uptime directly within the brand perimeter.
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 中尝试 
