screenroveBilling page design: meters before plans in 52 in-app screens
Billing page design from 52 in-app billing screens: 31 show a usage meter, 18 show plan cards. How Superthread, Recraft, Bolt and Hygraph write the limit.
Most in-app billing pages we captured lead with a meter, not a price. Of 52 billing and usage screens in our settings library, 31 show how much you have used or have left, and only 18 show plan cards. On the 5 screens that show both, the usage comes first every time. If you are working on billing page design, the main job is the meter: how you write the limit, colour it, say when it resets and link it to the upgrade.
The 52 screens come from 44 products on the settings pages wall. You can open all of them with the Billing & plan filter. This piece is about the billing page a signed-in user opens to see where they stand; for upgrade modals, feature gates and trial offers, see our paywall data study.
Billing page design starts with the meter
We sorted each screen by what it shows on first load: a usage number (a meter, a count against a limit or a credit balance), a set of two or more plan cards, both, or neither.
| What the billing screen shows | Screens | Share of 52 |
|---|---|---|
| Usage only (meter, quota or balance) | 26 | 50% |
| Usage, then plan cards | 5 | 10% |
| Plan cards only | 13 | 25% |
| Neither (plan summary, invoices, upsell page) | 8 | 15% |
The five mixed screens are Bolt, Lovable, Superthread, Make and Lucidchart. The first four put the meter above the plan grid. Lucidchart keeps a storage bar ("0% of 250 MB used") in the settings sidebar beside its plan table. All five follow the same order: show the usage first, then the plans that raise the limit.
Four ways to write a quota
The 31 usage screens come from 27 products, and they write the limit in four ways.
- Used / limit. The most common form. Make reads "30 / 1,000 (3% used)". Folk gives seven quota cards their own "Used 0/1,000 · Remaining 1,000" pair and a thin bar. Hygraph uses a plain table with Resource, Used, Limit and Percentage columns ("API calls 48 / 500,000 · 0.01%").
- What is left. Krea shows a pack bar reading "92 / 100 CU left". Lovable reads "5 left", and Dub "1,000 remaining of 1,000".
- Limit against actual. Grafana Cloud puts "Free Account Limits: 10K series" under each product name and the actual "0 series" in its own column.
- A bare balance. Gamma gives "Included credits" its own card with a large 378 and the page's only Upgrade button. Ideogram shows "0.0 credits" with a red dot: "Auto recharge is off."
Limits don't have to stay on the billing page. Opus Clip puts them in the asset library's headings: "Brand vocabulary (0/30)", "Fonts (0/2)" and "0.00 GB / 100 GB" next to the page title. Dub repeats its event and link counts at the foot of the settings sidebar with "Usage will reset Nov 20, 2026".
Colour by severity, and plan for zero
Most meters use a single brand colour whatever the level: violet at Recraft, pink at Descript, blue at Lovable. Superthread is the only product we caught in a warning state. Spaces at 2/2 is a red bar labelled "(Limit reached)", Boards at 2/4 is orange and Cards at 10/200 is a small sliver. Under the table is one sentence of consequence: "If a limit is reached, you will need to remove items or upgrade the plan before new items can be created." Its AI credits card adds a yellow "Low credits" pill.
Research accounts are mostly empty, so most meters we saw sat at zero, and the zero state is worth designing on purpose. WeWeb lays out 11 project meters in a four-column grid, from "Bandwidth: 0 GB / 1 GB" to "Emails Sent: 0 / 50", and every one is empty. Some zero states are confusing. Glide shows Users "0 / 0" and Updates "0 / 0", and Kittl shows "0/0 Tokens". CodeSandbox draws a full green bar for "3 credits used" against 0 included, so a near-zero spend looks like a maxed-out quota.
Say when it resets
15 of the 27 products with meters put a date, countdown or billing window next to them. The best ones say this right beside the number. Recraft splits "Daily credits · Resets in 22 hours" from "Monthly credits · Resets on Nov 22". Jitter reads "Usage resets in 11 days (1 nov.)". Hygraph puts "Hobby", "100 GB limit" and "Resets on 12 Nov" in three pills next to the heading. Lovable separates three rules on one card: "5 credits expire on 22 October 2027", daily build credits that reset "at midnight UTC", and a chat allowance at "100% left".
Bolt packs the most into one screen. A "Current token balance" of 1.8M sits over a blue "772K/1M monthly tokens" bar ("Unused tokens expire December 1, 2026"), a green "1M extra tokens" bar and "Daily limit: 72k/300k tokens". The plan cards come after all of that. Sentry marks free allowance in the row itself: replays read "0 / 105K (5K gifted)" next to $0.00 additional spend, and a Recurring Credits table shows the +5K/mo ending Feb 21, 2027. Resend gives every limit row a small progress ring, so "Segments limit 1 / 3" is the one partly filled ring on the page.
When the plan picker lives in settings
18 billing screens show plan cards, and they reuse the pricing page with one big addition: they know your current plan. Fibery strikes through Pro's $20 and adds a "Free till Nov 5, 2026" footer to the trial plan. Each button is labelled relative to where you are ("Downgrade", "Switch now", "Add billing", "Upgrade"), and the sidebar repeats "14 days left in trial". Ideogram strikes the monthly price over the annual one ("$20 $15", "$60 $42"). Folk strikes through the features a tier lacks, so Standard shows "Dashboards" and "Objects" crossed out instead of leaving them off.
Colour can carry the tier from badge to button. Whimsical pairs a blue FREE badge, an indigo "Upgrade to Pro", a purple "Upgrade to Business" and a teal "Upgrade to Personal". Taskade tints its four cards pink, mint, peach and lilac, and each Buy button takes its card's colour. On the billing-page paywalls we also captured, Mermaid Chart ends its "1 / 15 credits used" meter with "Next plan: Plus, try it now", and Typebot puts "Chats 0 / 200" directly above its Starter and Pro cards.
Upsells in the settings nav
Some products mark paid features in the settings menu itself. Retool puts small "Enterprise" or "Business" pills on seven sidebar items, from Spaces and Source control to Branding and Themes. Runway puts a grey up-arrow badge on 4 of its 7 workspace tabs (Analytics, SSO, Audit Logs, Model Configuration). Lovable adds a lightning badge to seven nav items, Eraser puts "UPGRADE" chips on Custom Icons and API Tokens, and Maze locks Security with an "ENT" tag. Postman shows the paid option where you would choose it: the Partner workspace type stays visible but greyed, with an inline "Upgrade plan" link.
What to steal
- Put the meter first. Every screen we saw with both a meter and plan cards had the meter on top. Usage explains why the plans are there.
- Pick one direction and label it. "16 / 30 credits left" and "30 / 1,000 (3% used)" are both clear because the unit and direction are spelled out. A bare "0 / 0" is not.
- Write the reset next to the number. Daily and monthly allowances need separate lines, the way Recraft and Lovable do it.
- Colour by severity, not brand. Superthread's red and orange bars, plus one sentence on what happens at the limit, beat a row of identical violet bars.
- Make the in-app picker aware of the account. Show the current plan, trial end date and button labels relative to it, as Fibery does.
- Mark paid settings where people look for them. A small pill in the nav (Retool) or a greyed option with "Upgrade plan" (Postman) beats a locked page with no warning.
How we counted
We captured these screens in desktop browsers with research accounts between September and October 2026, mostly on free plans or trials. A vision model recorded each screen's attributes, including the section facet behind the 52 billing screens, and you can check them on each screen's page. The usage-versus-plans split and the reset count come from our own re-read of each screenshot, and only count what was visible on that screen, not what sits on another tab. Because most accounts were new, most meters read zero. We record what the pages show, not how they perform, so nothing here is A/B test data or a claim about conversion.
Designing a billing or usage page? Connect the Screenrove MCP server and ask your agent for "billing settings pages with usage meters above plan cards" or "quota tables with reset dates".