This AI credits and plan limits UI for Figma shows a credit balance, a low credit warning, a limit reached dialog and three plan cards. This is the dark version, made for products that live in dark mode.

What is included

• A credits popover with a large balance, a progress bar and usage by feature
• A warning banner above the composer that says how many credits are left
• A limit reached dialog with a countdown and two buttons
• Free, Pro and Team plan cards with a Best value tag
• A top up button and a reset date

Where to use it

Use it for AI products with credits, daily limits or paid plans, and for any app that needs a clear upgrade moment.

Design notes

Each message says what happened, when it resets and what to do next. The upgrade path is one button. The free plan card shows Current plan, so nobody wonders where they are. The dark theme uses a #0B0D14 background, #141824 cards, #F3F4F8 text and the same indigo #5B5BF0 accent.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. The file uses Plus Jakarta Sans, both free on Google Fonts, and every color is a fill you can change in the fill panel. Text pairs stay above 4.5 to 1 contrast.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same. All names and numbers in the file are sample content.