ALedger: accounting conventions
Meterline
A dashboard that answers one question for SaaS founders: is AI making or losing us money?
- Type
- Self-initiated concept
- Role
- Solo: research, product design, motion
- Year
- 2026
- Disciplines
- Product UI, Design system, Motion
- Built with
- HTML, CSS, JS
In short
AI features cost money on every call, but most SaaS plans charge a flat price. Meterline puts AI cost next to what each customer pays, and opens every screen with the answer in one sentence. I designed it end to end, from research and wireframes to a design system, desktop and mobile screens, states and motion, as working HTML and CSS. The data is invented; it isn't a real product.
The brief I set
Startups are adding AI features like reply drafts and summaries. The provider bill shows one total, so founders can't tell which feature or which customer caused it, and their heaviest users can quietly cost more than they pay.
I reviewed the tools teams use today (Helicone, Langfuse, LangSmith, Portkey, the provider consoles and enterprise FinOps tools) and the AI dashboards on Dribbble. They all lead with tokens and models, built for engineers. None puts AI cost next to what each customer pays. That gap became the product.
The idea
Money as a shape.
Price and cost are drawn as two lines. The gap between them is filled green while there's margin and hatched red once it turns into a loss. The same shape works as a small bar in every customer row, as a plan's share against the ceiling, and as a six-month chart.
The system
Six neutrals and six colours with one meaning each. All text passes WCAG AA, and a loss never relies on colour alone: it's red, hatched and has a minus sign.
Screens
Each view starts with a sentence, like "9 of 214 customers cost more in AI than they pay," and the panels below are the evidence. Founders can also test a pricing change on real usage: drag the included limit and the answer, the numbers and the list of customers who'd pay more all recalculate.
On mobile: a bottom tab bar, one column of panels, swipeable charts, and tables that keep the columns that matter.
States: loading keeps the layout still. In the first days, Home explains when the forecast arrives. If Stripe disconnects, costs stay live and revenue-based numbers are marked "last known."
Decisions
I set the same screen in three styles before designing anything else.
BMeter: utility-meter wheels
CMargin band
Margin band became the idea
Margin band turns profit and loss into one shape that scales from a table row to a chart, so it became the product's single idea. Meter's rolling counter lived on as the cover's motion.
Structure before style
Grey wireframes came first. A review against the founder's five jobs added a period switch, an invoice check, sharing and alerts, and moved the trend chart from the top to the bottom, so Home follows the order of the founder's questions.
One moment of motion
Data draws itself once, when a page loads. After that, motion only answers what the person does, and reduced motion is respected.
Built as real HTML and CSS
The prototype is the front end, so it can be reused when a backend is added instead of being rebuilt from a picture.
What I didn't have
Real users, real billing data and a team to argue with. With a real team, the first thing I'd measure is how quickly a founder can answer "is AI making or losing us money?" after opening the dashboard, by watching five founders try it before changing anything else.
Next project
aha