Design a dark-mode website section: deep-night precision agtech combining atmospheric orbital glow with rigorous telemetry typography.
LAYOUT
The composition follows a dual-tier macro structure: the top tier splits into an asymmetric hero CTA on the left and a unified 4-column metric ribbon on the right. Below, a full-width horizontal rule marks the transition into a dense six-column footer architecture. The footer terminates in an anchored three-point sub-bar balancing system telemetry, copyright, and legal anchors.
PALETTE (use these exact hex values)
- #070d18 — Deep Space Void: Deepest canvas background providing high contrast for glowing ambient graphics
- #050913 — Footer Abyssal: Ground level surface color for the primary link columns and legal sub-footer
- #2b66ff — Cobalt Autonomous: Primary interactive action button fill and newsletter submit arrow background
- #60a5fa — Atmospheric Cyan: Secondary heading highlight text and subtle glowing telemetry accents
- #22c55e — Telemetry Active Green: Live system status indicator dot and operational badge icon
- #ffffff — Starlight White: Primary headers, stat values, and prominent column headers
- #94a3b8 — Muted Range Slate: Body descriptive copy, inactive footer links, and metric supporting labels
- #1e293b — Subtle Radar Border: Metric dividers, button borders, input strokes, and horizontal rules
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 36px heading, 44px display. Tracking -0.02em at display, 0.08em at overline caps. The typographic tone is cool, disciplined, and computational. Plus Jakarta Sans or Inter delivers crisp legibility across dense navigation links and bold architectural headlines without eccentricities. Strict weight moderation (medium headers, regular body) ensures technical authority suited for enterprise autonomous robotics.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through layered chromatic depth and lighting rather than dropshadows. The base canvas anchors content, while background astral gradients and faint topographic vector meshes produce infinite perceived depth. Small interactive elements rely on 1px stroke borders (#1e293b) to define boundaries against the void.
IMAGERY
Visual assets leverage deep-space cosmic vortexes, autonomous drone perspective glow, and faint topographic elevation lines. Abstract atmospheric lighting replaces literal ranch photographs to emphasize high-tech automation over manual labor. Unprocessed stock photos of cattle or daylight farm fields would severely degrade the cybernetic tone.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is pairing deep-space nebula imagery with precision agricultural telemetry, crowned by the bi-color headline ('Run more acres. With fewer headaches.') where the second phrase glows in sky blue. It instantly converts a rustic industry into aerospace-grade infrastructure. Misusing this by using plain flat dark backgrounds destroys the sense of high-altitude autonomous vantage.
MUST
- Use letter-spaced uppercase (0.08em) exclusively for category headers, eyebrows, and system status tags.
- Split long headings into stark white and luminous light-blue (#60a5fa) segments to create dynamic pacing.
- Separate horizontal metric figures with hairline 1px vertical borders in #1e293b rather than boxed cards.
- Keep footer link lists dense, strictly left-aligned, and set in muted slate (#94a3b8) with 12px vertical spacing.
AVOID
- Do not introduce heavy drop shadows or skeuomorphic bevels; keep elevation purely planar and tonal.
- Never use warm accent colors like orange or red for non-destructive operational states.
- Avoid solid container boxes around metrics; maintain the open telemetry wireframe aesthetic.
- Do not set footer category titles in sentence case or lowercase; enforce uppercase micro-type.
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 中尝试