Design a light-mode web interface screen: clean spatial telemetry and fleet route monitoring rendered with airy cobalt precision and soft card surfaces.
LAYOUT
The workspace employs a fixed 240px left-hand navigation sidebar paired with a top global utility bar housing search and quick creation buttons. The main content canvas flows from a combined hero welcome module and hardware graphic at the top, down to a 4-column KPI metric row. Below, the layout splits into a 60/40 grid housing the interactive map alongside stacked performance charts and quick action shortcuts, terminating in a full-width tabular activity feed.
PALETTE (use these exact hex values)
- #f4f6fa — App Canvas: Background canvas framing all floating workspace cards and the sidebar layout.
- #ffffff — Card Surface: Primary surface for modules, data tables, map containers, and metric tiles.
- #2563eb — Cobalt Primary: Primary interactive element color, brand markers, active nav state, and dominant chart series.
- #0f172a — Deep Slate: High-contrast headings, primary metric numerals, and prominent labels.
- #64748b — Muted Slate: Subheaders, table column titles, inactive navigation links, and axis labels.
- #10b981 — Emerald Status: Active live indicator dots, positive metric trends, and healthy battery icons.
- #f59e0b — Amber Alert: Delayed delivery indicators, warning badges, and secondary chart trajectory line.
- #e2e8f0 — Border Subtle: Dividers, search input stroke, table row separators, and map control bounds.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 26px display. Tracking -0.02em at headings, 0 at body. Plus Jakarta Sans delivers an engineered, contemporary clarity tailored for real-time logistics and telematics. Its geometric proportions and open apertures keep dense strings, coordinates, and percentage points legible at small sizes (11px to 13px). If licensing is constrained, Inter or DM Sans serve as frictionless, drop-in alternatives.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created purely through layer contrast between the pale #f4f6fa background canvas and clean #ffffff cards. Soft ambient shadows (0 2px 8px rgba(15, 23, 42, 0.04)) are applied only to floating map tooltips and overlays. Card boundaries rely almost entirely on fill contrast rather than thick outline strokes.
IMAGERY
Vector illustrations feature smooth isometric hardware mockups (such as the central smartwatch) rendered in deep navy and blue with smooth lighting, accented by stylized botanical leaf motifs. Real photography is confined strictly to circular user avatar portraits (24px to 32px) within table cells and map waypoint pins.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated hero showcase featuring an isometric smart watch mockup framed by flat botanical vector foliage beside clean telemetry cards. It bridges clinical hardware monitoring with a refined consumer-tech warmth; losing this visual anchor turns the screen into an ordinary, sterile fleet dashboard.
MUST
- Use solid white (#ffffff) for card panels over the faint grey-blue (#f4f6fa) canvas.
- Maintain uniform 16px corner radii on all major dashboard modules and containers.
- Accompany device status changes with strict semantic colors: emerald for live, amber for delayed.
- Limit high-chroma cobalt blue (#2563eb) strictly to active states, key data lines, and primary CTAs.
AVOID
- Do not introduce dark canvas backgrounds or high-contrast drop shadows.
- Never use sharp 0px corners on buttons or cards; avoid breaking the 16px/8px hierarchy.
- Do not style secondary chart series in heavy saturated primaries; reserve vivid blue for main series.
- Avoid crowded data tables; enforce 48px minimum row height with ample cell padding.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
