Design a light-mode website section: aerospace-grade editorial precision built with electric cobalt beams and crisp stippled geospatial cartography on stark white canvas.
LAYOUT
The viewport is organized into a clean asymmetric two-column structure within a 1280px container. The left column holds the status badge, two-tone display headline, body narrative, CTA pair, and trust seal. The right column gives breathing room to the diagonal flight path of the drone and the Earth curve, while the bottom anchors four balanced KPI cards.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary background canvas across the entire viewport and modal surfaces.
- #090e24 — Deep Obsidian: Primary headline text, logo wordmark, and prominent numerical values.
- #0052ff — Electric Cobalt: Primary CTA buttons, secondary headline emphasis, radar scan beams, and status dots.
- #4b5565 — Slate Neutral: Hero subheadings, navigation links, and primary card metric descriptions.
- #8c96a5 — Muted Silver: Subordinate captions, fine disclaimer text, and secondary card annotations.
- #e6eaf2 — Surface Border: Card outlines, pill containers, secondary button strokes, and dividers.
- #059669 — Radar Teal: Coverage speed metric icon tint and associated status visualizers.
- #d97706 — Telemetry Amber: Mission security and reliability icon stroke container.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 28px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0em at body. The typography communicates defense-grade precision and advanced AI autonomy through clean neo-grotesque geometry. Tight tracking at display sizes delivers authoritative weight, while high x-height maintains legibility in miniature metric descriptions. Inter or Plus Jakarta Sans are the standard open implementations.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly restrained to enhance technical precision. Metric cards float above the stippled Earth projection using a nearly invisible shadow (0px 8px 24px rgba(9, 14, 36, 0.04)) combined with a distinct 1px border. The primary CTA uses flat color without bevels or drop shadows, maintaining modern planar elegance.
IMAGERY
The visual anchor is a hyper-realistic 3D rendering of an autonomous fixed-wing aircraft set against a halftone point-cloud globe. A projected translucent blue pyramidal frustum highlights an orthomosaic satellite mapping tile. Decorative UI details include faint astronomical dot constellations and fine technical crosshair markers.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone navy and cobalt split headline combined with the stippled point-cloud Earth scan beam. This signature establishes the bridge between abstract software intelligence and physical autonomous aerospace mapping. It is ruined if both headline lines are the same color or if the scanning grid is omitted.
MUST
- Keep the canvas pure #ffffff to preserve crisp aerospace technical clarity.
- Split primary display headlines strictly between #090e24 and electric #0052ff.
- Use light 1px borders (#e6eaf2) around floating metric cards and capsule badges.
- Align all metric tiles in a rigid 4-column horizontal strip.
AVOID
- Do not introduce dark mode canvases; this system relies entirely on stark daylight brightness.
- Never use generic photography; all imagery must feature realistic aerospace vehicles and geospatial telemetry.
- Do not round card corners beyond 20px; retain sharp industrial engineering discipline.
- Avoid solid heavy shadows under KPI cards; rely on 1px borders and ultra-subtle diffuse elevation.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试