Brynvel — Admin Dashboard HTML Template

Dark-first HTML admin dashboard with hand-built SVG charts, data tables and a light theme.

Aug 05, 2026 Admin Dashboard UI Kits Web Elements 984 views 700 downloads (0)

Description

Brynvel is a free, production-ready HTML admin dashboard template for analytics consoles, SaaS back-offices, internal tools, operations and monitoring panels, billing and customer-management screens, and any application interface where dense data has to stay readable for hours at a time. It is a genuine application UI, not a marketing page dressed up with a sidebar — there is no hero section, no feature grid, no testimonial carousel. Every screen is an app shell: a collapsible left rail, a sticky command bar with a working ⌘K palette, and a data canvas. The palette is a clean break from the rest of the catalogue: a cool blue-black ground at #0A0D12, panels at #10141C, and a single azure accent at #1FB6FF, with green, amber and red reserved strictly for state — healthy, degraded, failed — and never used as decoration. Host Grotesk leads the display, Schibsted Grotesk holds the interface text, and Azeret Mono carries every figure in tabular numerals so columns align and digits never jitter between renders.

The overview page is built around one deliberate hierarchy decision: a single north-star number rendered at roughly three times the scale of anything else on the page, with the secondary metrics set as hairline-separated rows rather than four competing cards. Below it sit sparkline stat tiles, an area chart with a hover crosshair and tooltip, ranked acquisition bars, a plan-mix donut, a recent-accounts table and a live activity feed. It follows how data products actually look in 2026 — quiet chrome, restrained colour, and tables treated as the primary interface rather than an afterthought behind the charts.

What ships in the download

Six fully built pages, responsive from 390px up, all hand-written semantic HTML with three small stylesheets and two vanilla scripts:

Overview (index.html) — north-star KPI block with sparkline, four stat tiles, full-width area chart with hover crosshair, ranked acquisition channels with CAC summary, plan-mix donut with legend, recent-accounts table and live activity feed, system status line
Analytics (analytics.html) — tabbed views, filter chips, weekly sessions bar chart with highlighted peak, five-stage activation funnel with drop-off percentages, six-month cohort retention heatmap, top-pages table with inline sparklines, and a designed empty state
Customers (customers.html) — a full data table with sortable columns, row selection driving a bulk-action bar, live search with a no-results state, pagination, and a slide-over detail drawer carrying usage meters and an event history
Billing (billing.html) — current-plan card with four usage meters and a near-limit warning, payment method panel, four plan radio cards, sortable invoice table with paid / processing / failed states, and a monthly spend chart
Settings (settings.html) — vertical tab navigation across profile, team, notifications, API keys and a danger zone, with real form controls, toggle switches, a team table with role selects, and copy-to-clipboard API keys
Sign in (login.html) — split authentication screen with a photographic backdrop, SSO and passkey options, and a social-proof panel

Charts with no chart library

Every chart is hand-built SVG in assets/js/charts.js — no Chart.js, no D3, no canvas, no network requests. Charts are declarative, so the markup carries the data and the script renders it: drop a <div class="chart__wrap" data-chart="area" data-values="164000,171000,168400" data-labels="Mar,Apr,May"> into the page and you get an axis, a gradient fill, an animated draw-in and a hover tooltip. Four types ship: spark, area, bar and donut. The entire template weighs 10.6 KB of CSS and 7.7 KB of JavaScript gzipped, with zero dependencies and no build step.

Dark and light, both designed

Brynvel is dark-first, but the light theme is a genuine second surface ramp rather than an inverted afterthought — its own greys, its own accent value, its own shadows. The choice persists in localStorage and is applied by a blocking snippet in <head>, so there is no flash of the wrong theme on load. Everything visual is a CSS custom property in assets/css/tokens.css: change --accent and the charts, active navigation state, focus rings, filter chips and primary buttons all follow, because none of them hardcode the colour.

Accessibility

Semantic landmarks and real <table> markup throughout. Tabs use proper role="tablist" / role="tab" / role="tabpanel" wiring, sortable headers expose aria-sort and are operable from the keyboard, icon-only buttons carry aria-label, and focus rings stay visible. Metric direction is encoded with an arrow as well as colour, so status never depends on colour alone, and the heatmap flips to dark ink on its hottest cells to hold a 4.5:1 contrast ratio. prefers-reduced-motion is fully honoured — chart draw-in, scroll reveals and the live pulse all stop.

Who it's for

Use Brynvel as the foundation for a SaaS analytics console, an internal admin panel, a customer or subscription management back-office, an operations and monitoring dashboard, a billing portal, a fintech or reporting interface, or the authenticated side of any product that already has a marketing site. Because it is an application shell rather than a landing page, it drops cleanly into React, Vue, Laravel, Django or Rails as a static reference — the markup is plain HTML and the behaviour is plain JavaScript with no framework assumptions baked in.

Other free templates from the same studio

Brynvel joins a growing free catalogue on html.design — every template ships with the same craft level, all free to download and use. If an admin dashboard isn't what you need today, look at Vornu for an indigo SaaS bento marketing site, Halvorn for an emerald corporate consultancy, Cratewell for a bold moving company, Meridia for a navy-and-brass real estate site, Axioma for a creative agency, or Volta for a fitness brand. Each is built around a different visual recipe, and all of them are free.

Customising

Open assets/css/tokens.css and edit the :root block — change --accent to reskin the whole console, --canvas and --surface to shift the surface ramp, or the three font tokens to change the typographic voice. The stylesheets are split by concern (tokens.css for design tokens, reset, buttons and forms; shell.css for the rail, command bar, drawer, palette and toasts; ui.css for panels, stats, charts and tables), so you can find what you need without scrolling through one giant file. Buttons that would hit a backend raise a toast instead — this is a front-end template, and there is no server behind it.

Free for personal and commercial use, no attribution required, no email gate. Built and maintained by html.design.