Design a light-mode website section: an ascending staircase of luminous cards transforming complex raw aerial telemetry into refined mission intelligence.
LAYOUT
The composition is governed by an asymmetrical split layout inside a 1280px max-width boundary. The upper left opens with an eyebrow badge, a high-impact two-line display headline, and a short sub-paragraph, followed immediately by cards 01 through 04 stepping upward in staircase progression. The right side is dominated by a substantial vertical card for step 05 containing operational metrics and a detailed aerial viewport. Below this hero arrangement, two balanced horizontal cards frame enterprise compliance credentials and integrations.
PALETTE (use these exact hex values)
- #faf9fc — Atmosphere Canvas: overall page background providing soft contrast against pure white cards
- #ffffff — Card Surface: foreground card container background across all workflow steps and bottom tiles
- #f8fafc — Sub-Cell Surface: light fill for inner metric blocks and sensor status rows
- #181836 — Deep Charcoal: high-contrast text for major display headings, step titles, and primary metrics
- #63667e — Muted Slate: descriptive body copy, secondary column headers, and unselected status labels
- #4338ca — Electric Indigo: active step-05 badge fill, key metric emphasis, and primary actionable highlights
- #e0e7ff — Subtle Lavender: inactive step badge background and secondary connective highlights
- #eaedf3 — Telemetry Border: hairline boundary framing cards, metric panels, integration pills, and table dividers
- #10b981 — Success Emerald: live stream indicators, positive trend carets, and cleared status badges
- #f59e0b — Warning Tangerine: moderate risk telemetry indicators, vegetation alerts, and map inspection waypoints
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 28px heading-lg, 44px display. Tracking -0.03em at display, 0 at body, 0.08em on uppercase badges. The typography is clinical, confident, and mission-critical, evoking aerospace telemetry and high-assurance software. Plus Jakarta Sans (or Inter) brings crisp geometric circularity to headings and ultra-clean legibility to 11px labels and metric tables. The letter tracking is noticeably cinched at display sizes (-0.03em) to prevent headlines from sprawling, while tabular figures maintain columnar discipline in risk scores.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through a gentle, multi-layered spatial stack rather than aggressive black shadows. Each white card casts a diffused, low-opacity drop shadow tinted with indigo (rgba(90, 80, 140, 0.06) 0px 16px 36px), backdropped by an ambient soft lavender blur behind the cards. Cards overlap slightly along the diagonal axis, reinforcing physical depth and forward procedural momentum.
IMAGERY
Imagery is grounded in hyper-realistic, technical geospatial assets: orthomosaic point clouds, wireframe altitude meshes, and crisp aerial satellite photography with vector flight path overlays. Avoid abstract 3D cartoons, generic corporate stock photography, or decorative illustrations; all imagery must look like genuine autonomous flight telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The ascending diagonal staircase layout of cards 01 through 05, where each card progressively rises in elevation and y-position toward a prominent terminal action card, supported by an ambient indigo underglow. It transforms a standard linear feature list into an active kinetic pipeline; flattening the cards onto a level grid immediately destroys the identity.
MUST
- Stagger the step cards diagonally from lower-left to upper-right to evoke sequential progress.
- Use pure white (#ffffff) cards over the faintly tinted #faf9fc ground to establish subtle edge contrast.
- Keep borders ultra-fine at 1px solid #eaedf3; rely on soft ambient diffusion rather than harsh shadows.
- Highlight the final terminal step ('05') with high-contrast filled badges and larger spatial footprint.
AVOID
- Do not align the pipeline cards horizontally on a single baseline; it destroys the ascending staircase motif.
- Do not introduce saturated colored backgrounds for entire cards; color belongs solely in pills, icons, and stats.
- Do not use sharp 0px corners; maintain the unified 16px outer and 8px inner radius system.
- Do not omit the delicate atmospheric purple glow sitting underneath the overlapping steps.
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. Try in DraPub 
