A finance and accounting back office in black, white and gray, with frosted-glass surfaces and one brand gradient — electric blue to violet — kept for headings, primary buttons and the current page in the sidebar. Headings and large figures use Sora, the interface uses Geist with tabular numbers so amounts line up in every table.

Everything is plain HTML, CSS and JavaScript. There is no framework, no runtime 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

• Built around finance workflows: cash position with a 3-month forecast, a 13-week cash forecast with base, best and worst scenarios, bank reconciliation with suggested matches, an invoice editor with live VAT and discount totals, two-step bill approvals and expandable financial statements.
• Dependency-free charts: area charts with forecast zone, scenario range and reference line, grouped and negative bars, waterfall, donut and sparklines, drawn by a small SVG library written for the theme. Tooltips, resize handling and light/dark colors included.
• Color-blind friendly data: statuses are encoded by shape (filled, outline, half, dashed, triangle) with a text label, and chart series are told apart by black, gray and one accent — never by blue versus violet.

Pages

Features

• Sidebar navigation: a floating glass sidebar groups the seven modules and their pages, with counters for items that need attention, plus a command palette (⌘K or Ctrl+K) to jump to any page or quick action.
• Light and dark mode: light by default, dark mode from the top bar, remembered between visits. Charts redraw in the new colors.
• Data tables: search, filter chips, sorting, row selection, bulk actions, row menus, pagination and side drawers for record details.
• Interactive components in vanilla JavaScript: native <dialog> modals and drawers, tabs, segmented controls, dropdown menus, toasts, file drop zones, one-time code input.
• Easy theming: every color, font, radius and spacing value is a CSS custom property in one file. Change the two brand colors and every gradient follows.
• Responsive: checked from 390px phones to large desktop screens. The sidebar becomes a drawer below 1280px and wide tables scroll inside their panel.
• Accessibility practices: skip link, landmarks, visible focus states, keyboard-operable tabs, palette and sortable headers, labeled form fields, text contrast meeting WCAG AA, reduced-motion and reduced-transparency support.
• Print styles for invoices and financial statements.

Technical details

• HTML5, modern CSS (custom properties, native nesting compiled with PostCSS), vanilla JavaScript
• No jQuery, no Bootstrap, no framework, no runtime library
• Inline SVG icon set drawn for the theme
• Validated HTML, commented CSS and JavaScript split by page
• HTML documentation: file structure, installation, customization, navigation, components, chart API, connecting your data, building the CSS

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 the page scripts. 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.