Helmsman — Logistics & Fleet Dashboard Template

Helmsman is an admin dashboard template built for logistics & fleet: a sidebar shell, KPI cards, charts, status tables and a settings page, all in plain HTML, CSS and JavaScript.

The sample data is written for the domain — Shipments today, On-time rate, Vehicles active, Avg. stops / route — so the layout reads as a finished product, not a placeholder.

• Product teams building logistics & fleet software
• Developers who need a finished UI shell to wire to an API
• Internal tools that need to look like real software
• Prototypes and investor demos with realistic data

• Sidebar shell with grouped navigation and user card
• Topbar with search, notifications and a primary action
• Four KPI cards with deltas
• Line, bar and donut charts as inline SVG (no chart library)
• Status tables with tone-coded pills
• Second data page and a full settings page
• Responsive down to phone width with a collapsing sidebar
• Design tokens at the top of the stylesheet

• 3 HTML pages
• css/style.css design system and css/dashboard.css
• js/main.js progressive enhancement
• README.txt with setup notes

• Any modern browser
• Static hosting (Netlify, Vercel, S3, cPanel)
• Works without a build step

• A text editor
• A static host or any web server
• No build tools required

1. Unzip and open index.html — it works from a folder

2. Change the design tokens at the top of css/style.css

3. Replace sample text, contact details and prices

4. Swap the generated artwork tiles for your photography

5. Connect the form in js/main.js to your form service or backend

• All colours, radius and fonts are CSS custom properties
• Sections are self-contained blocks that can be reordered or removed
• Icons are inline SVG; swap any glyph in place
• Swap the font pairing by changing one Google Fonts link

• Personal — for your own private, non-commercial projects. Not for client work.
• Commercial — for one commercial project or one client project.
• Agency — for multiple client projects, up to the limits stated on this page.

No tier permits reselling or redistributing the files themselves.

Questions about Helmsman are handled through your DistroSource account — open a support ticket from the order and include your order number.