Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
PaymentsFree

Usage & Limits

Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

6 states5 edge casesDesktop + Mobile

01The problem

Plans are defined by limits — seats, projects, API calls, AI credits, storage. Customers rarely know where they stand until something stops working, usually in the middle of a task. A limit that appears without warning feels like a trap, and a blocked action with a bare “Upgrade” button feels like extortion.

02When to use

Use when

  • Plans with quotas: seats, projects, storage, API requests, AI credits
  • Usage-based billing where customers need to predict their bill
  • Free tiers that lead to paid plans

Avoid when

  • Limits exist only to prevent abuse and real customers never approach them — enforce quietly with rate limiting.
  • Unlimited plans — showing a meter for something unmetered creates anxiety.

03Recommended UX

Statecraft recommendation

Show usage as “used of limit” with a reset date wherever the limit matters, warn at 80% before anything stops, and when a limit is reached, finish or save the user's current work, then explain the limit and the options — upgrade, wait for the reset, or free up usage.

“7,820 of 10,000 credits · resets 1 Dec” answers both “how much?” and “until when?”. A bare percentage answers neither.

Warning at 80% gives customers a choice while they still have room. Discovering the limit at 100% removes it.

Losing work at the limit is the most damaging moment in the pattern. Let the in-progress action finish, then stop the next one.

04Interaction flow

  1. 01

    Normal usage

    Meter visible in billing and near the limited feature.

  2. 02

    Approaching limit

    80%: quiet warning to admins with the reset date.

  3. 03

    Limit reached

    Current work finishes or is saved; next action explains the limit.

  4. 04

    Choose

    Upgrade, buy add-on, wait for reset, or free up usage.

  5. Result

    • Upgraded
    • Waiting for reset
    • Usage freed

05Desktop behaviour

On desktop, show usage in two places: a full breakdown on the billing page, and a small meter near the feature that consumes it.

Desktop rules

  • Meters show used, limit, unit and reset date as text; the bar is secondary.
  • Show meters near the action that consumes them, e.g. under the AI prompt box: “212 credits left this month”.
  • At the limit, disable the action with the reason inline, and offer the choices beside it.
  • For usage-based billing, show the projected bill for the period, not just usage.
Meters state used, limit and reset date in words. At the limit, the action explains itself and offers options.

06Mobile behaviour

On mobile, keep meters out of the way until they matter, and keep the limit explanation short with one clear next step.

Mobile rules

  • Hide meters below 80%; show a compact “212 credits left” line near the action above it.
  • At the limit, use a bottom sheet with the reason, the reset date and up to two actions.
  • Link to the billing page for full details instead of rendering every meter.
At the limit, a bottom sheet explains the reset date and offers at most two actions.

07States

  • Normal

    Meter with used, limit and reset date. No alerts.

  • Approaching

    At 80%: meter turns amber, admins notified once.

  • Limit reached

    Action blocked with reason and options; existing work untouched.

  • Over limit (soft)

    Allowed to continue, with overage charge stated: “$0.02 per extra credit”.

  • Upgraded

    New limit applied immediately; blocked action can be retried.

  • Reset

    New period starts; meter returns to zero; any block lifted.

08Edge cases

  1. EC-01

    Limit hit mid-task

    An AI generation runs out of credits halfway through.

    Recommendation

    Let the in-flight request finish (absorb the small overage) and block the next one. Never discard partial output because of a limit.

  2. EC-02

    Member hits a limit only admins can change

    A member tries to create the 11th project on a 10-project plan.

    Recommendation

    Explain the limit and offer “Ask an admin to upgrade”, which notifies them. Don't show a checkout to someone who can't pay.

  3. EC-03

    Downgrade below usage

    A team using 14 projects moves to a 10-project plan.

    Recommendation

    Keep existing projects readable but block new ones, and state which actions are limited. Never delete or hide data to enforce a limit.

  4. EC-04

    Usage counts that look wrong

    A customer thinks they've used far fewer credits than shown.

    Recommendation

    Make the meter drill down: usage by day, by user or by feature. An unexplained number creates disputes.

  5. EC-05

    Usage delayed

    Metering is processed in batches; the meter lags by an hour.

    Recommendation

    Show “Updated 40 minutes ago” on the meter so customers don't make decisions on stale numbers.

09Microcopy

  • Meter

    Avoid

    “78% used”

    Prefer

    “7,820 of 10,000 credits · resets 1 Dec”

  • Warning

    Avoid

    “You’re running low!”

    Prefer

    “You’ve used 80% of this month’s credits. 2,180 left until 1 Dec.”

  • Limit reached

    Avoid

    “Upgrade to continue”

    Prefer

    “You’ve used all 10,000 credits this month. They reset on 1 Dec, or upgrade for 50,000.”

  • Member at limit

    Prefer

    “Your plan allows 10 projects. Ask an admin to upgrade”

10Accessibility

  • Use a meter or progressbar element with an accessible name and value text, e.g. “Credits: 7,820 of 10,000 used”.
  • Never convey the warning level by colour alone; the text changes too.
  • Disabled actions at the limit stay focusable or have adjacent text so the reason is reachable by keyboard and screen reader.

11Developer notes

  1. 01

    Enforce limits on the server; the UI meter is informational and may lag.

  2. 02

    Check limits before starting expensive work, and allow in-flight operations to complete.

  3. 03

    Store usage in an append-only ledger and derive meters from it, so counts can be explained and audited.

  4. 04

    Emit warning notifications once per threshold per period, not on every request above 80%.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement usage meters and limit handling for the existing product.

Requirements:
- Usage meters showing "used of limit unit · resets date", with an accessible meter element.
- Billing page: all meters with drill-down by day/user/feature and "updated X ago".
- Contextual meter near consuming actions (e.g. "212 credits left this month").
- 80% threshold: amber state and a single admin notification per period.
- At the limit: server-side enforcement; block the next action, not in-flight work; inline explanation with options (upgrade, add-on, wait for reset date).
- Members without billing rights get "Ask an admin" which notifies admins.
- Soft limits: allow overage with the price stated.
- Upgrades apply immediately and the blocked action can be retried.
- Downgrades below usage keep data readable and block only new creation.
- Usage stored as an append-only ledger.
- Mobile: hide meters below 80%; bottom sheet at the limit.

Do not redesign the existing interface.
Keep limit checks in a shared server-side module.