Skip to content
Course · Shipping AI interfaces

Tokens are a budget, not a mystery

Token counts are money to your users — the interface that shows the budget, names the parts, and turns red at the right threshold turns a metering detail into a trust feature.

Intermediate1 min read (computed · recorded 3)updated 2026-09-14aitokensmeteringcourse

by Motif Editors

revised 2026-09-14First publication in the bank-4 AI-interface curriculum.

Part 6 of 15 in Shipping AI interfacesModel pickers users can trustCitations build trust

Key takeaways
  • A token meter is a budget bar: used vs limit, with thresholds the user knows about in advance.
  • Name the parts of the window — system, history, new prompt — so 'usage' is not a black box.
  • If the numbers are estimates, say so; a fake exact figure is worse than a labelled estimate.

The meter is a budget bar

Users understand budgets better than they understand language models. A token meter that renders used-versus-limit as a bar, shifts colour at thresholds the user was told about (amber past 60%, red past 85%), and carries a live count is a budget bar — the same pattern as a phone data plan, which everyone reads instantly.

Name the parts of the window

'Usage' is a black box until the interface splits it: system instructions, conversation history, the new prompt. Three labelled bands turn the meter into a map of what you are paying for. And honesty applies twice: if the numbers are estimates or demo figures, the label says so — a precise-looking number that is not precise is a lie with better kerning.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Token Meter
Context budget1,240 / 8,000 tokens
system 400history 600new 240

Plenty of headroom. Numbers are editorial.