Skip to content
MS Keys Gate
Concept / DemoSaaS / product UI

Meterway — SaaS dashboard

Dense information laid out clearly, accessible charts, and a light and dark product theme.

A concept by MS Keys Gate, built to demonstrate capability. It is not a client project and was never commissioned.

Screens

meterway.example

Overview. Headline metrics, a primary chart, and what changed since last week.

What it sets out to prove

  • Show a lot of numbers without the screen feeling loud
  • Make charts readable for colour-blind users and screen readers
  • Keep filters, date range and export where the eye already is

Built with

  • React
  • TypeScript
  • Accessible charting
  • Design tokens

Charts with a table underneath

Every chart has a visually-hidden data table, so the information is available to assistive tech, not just the pixels.

One token set, two themes

Light and dark are the same components with swapped tokens — contrast is checked in both at build time.

Take this further

The thinking here carries straight into a real project. See the Web design service, or tell us what you have in mind.