Design a light-mode website section: mission-critical aerospace blue meets calm enterprise clarity across glowing telemetry reticles and structured navigation columns.
LAYOUT
The arrangement follows an architectural two-tier flow: top conversion card followed by comprehensive bottom directory. The top consists of an inset 1280px-wide card with 64px internal padding, centering headlines and twin action buttons over symmetrical radar telemetry rings. Beneath the card, a generous 64px gap introduces the 6-column footer grid: a 2-column brand anchor on the left, four product and company links columns in the center, and a newsletter column on the right. A clean horizontal baseline wraps the layout with legal items aligned edge-to-edge.
PALETTE (use these exact hex values)
- #f5f7fa — Canvas Ground: Outer background surface for the footer and surrounding content container.
- linear-gradient(135deg, #0b5ed7 0%, #06399b 100%) — Cobalt Radar Gradient: Dominant background gradient fill for the floating autonomous radar CTA container.
- #0b5ce6 — Signal Blue: Brand anchor used for uppercase category headers and newsletter submission button.
- #ff7a00 — Target Orange: High-visibility telemetry blip accent dot inside the radar graphic.
- #4db4ff — Reticle Cyan: Semi-transparent radar arcs, concentric range rings, and sensor detection nodes.
- #0f172a — Navy Text Primary: Wordmark typography and primary button text on white backgrounds.
- #5b6577 — Slate Text Secondary: Footer navigation links, body copy, and copyright text.
- #e2e6ed — Subtle Border: Dividers, social media icon boundaries, and text input outlines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.02em at display, 0.08em at uppercase labels. The typography communicates aerospace precision, reliability, and modern autonomous engineering. Plus Jakarta Sans (or Inter) provides rigid legibility across data-dense links and authoritative presence in the 44px display headline. The typographic voice is clinical yet approachable, entirely avoiding serif flourishes or expressive handwritten quirks.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is conveyed purely through surface luminance contrasts rather than drop shadows. The rich cobalt gradient card pops vividly against the matte #f5f7fa ground purely via high chromatic saturation and value difference. Micro-elements like social tiles and input fields use crisp 1px strokes (#e2e6ed) to carve out quiet local boundaries without blur.
IMAGERY
Abstract radar vector graphics depicting polar coordinate grids, range circles, and sensor blips form the visual texture. Vectors are rendered as razor-sharp 1px lines in translucent cyan and electric blue, occasionally punctuated by a single orange contact pip. Photographic cutouts, stock hardware renders, or fuzzy raster textures are entirely absent and would disrupt the technical precision.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the inset cobalt CTA card overlaid with authentic sensor-reticle line art and dual-color radar pips (cyan and orange). To use it correctly, treat the background as an active electronic display screen framed in deep blue, with the white primary button acting as the brightest focal point. It is commonly misused by turning the radar rings into heavy, distracting decorative swirls rather than subtle 1px engineering telemetry.
MUST
- Use uppercase 11px bold text with wide tracking strictly for navigation column headers.
- Maintain high contrast between the glowing cobalt CTA and the quiet off-white footer canvas.
- Restrict bright orange (#ff7a00) exclusively to singular radar blip accents.
- Keep radar telemetry vectors thin (1px stroke) and low opacity (15% to 30%).
AVOID
- Never use dark grey or black backgrounds for the radar CTA card.
- Do not style footer navigation links in bold or all-caps; keep them 14px regular.
- Avoid heavy drop shadows; rely entirely on hue contrast and crisp borders for layering.
- Never omit the right arrow indicator from the primary 'Schedule a demo' action button.
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 中尝试