Gridwell — Energy Monitoring Dashboard Template

Gridwell is a dark admin dashboard template for energy and facilities monitoring: consumption, solar generation, cost and carbon KPIs, a monthly consumption chart, use by system, and a live sites table with baseline alerts.

A consumption page shows half-hourly demand and meter status, and settings cover tariffs and alert rules. The forest palette and IBM Plex type keep dense data readable on a control-room screen.

• Product teams building energy monitoring 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 Gridwell are handled through your DistroSource account — open a support ticket from the order and include your order number.