A black and white back office for ERP, CRM and internal tools, with four bright accents — coral, yellow, green and mint — reserved for the small things that matter: progress bars, status dots, charts and highlights. Headings use the playful Bricolage Grotesque, body text the calm DM Sans. The result is an admin that feels light and friendly without losing the clarity a daily work tool needs.

Everything is plain HTML, CSS and JavaScript. There is no framework, no library and no build step: open index.html and it works. An optional npm + PostCSS pipeline is included if you want to edit the CSS sources.

What sets it apart

• A distinctive look: black, white and grays, thin black outlines around colored shapes, hand-drawn style highlights and tilted stickers. It stands out from the usual blue admin templates.
• Dependency-free charts: bar, line, donut, sparkline and heatmap charts come from a small SVG library written for the theme, with tooltips, animations and light/dark colors. There is no Chart.js or ApexCharts to load.
• Built for real back-office work: orders, invoices, stock, customers and tasks, with the interactions you expect — filters, sorting, bulk actions, drag and drop, progress tracking.

Pages

Features

• Light and dark mode: light by default, dark mode from the top bar, remembered between visits.
• Interactive components in vanilla JavaScript: data tables, kanban, to-do list, tabs, dropdowns, native <dialog> modals, toasts, global search.
• Easy theming: every color, font, radius and spacing value is a CSS custom property in one file. Change the four accents in a few lines.
• Responsive: collapsible sidebar on desktop, off-canvas menu on mobile, layouts checked from 390px phones to large screens.
• Accessibility practices: semantic landmarks, skip link, visible focus states, keyboard-operable tabs and sortable headers, labeled form fields, text contrast meeting WCAG AA, and a text label next to every color-coded status.
• Print styles for invoices.
• Clean code: validated HTML, CSS organized by component with a table of contents, commented JavaScript split by page.

Technical details

• HTML5, modern CSS (custom properties, native nesting compiled with PostCSS), vanilla JavaScript (ES2020)
• No jQuery, no Bootstrap, no framework, no runtime library
• Inline SVG icon set drawn for the theme
• Full HTML documentation: file structure, installation, customization, chart API, connecting your data

Requirements and limitations

• Static front end only: there is no backend, database or authentication. Forms validate in the browser and show a confirmation, and demo data is written in the HTML or generated in js/dashboard.js. You connect your own backend or API.
• Fonts load from Google Fonts. The documentation explains how to self-host them.
• Demo company names, people and figures are fictional.