Skip to content

Concept render — composed live from this prompt's palette & layout. Reproducible with the library, not a stock screenshot.

Concept scene: Liquid Glass — open in library →
SaaSVerifiedby Motif Studiopublished 2026-09-14

Token usage and billing page

vibe: clear, exact, no surprises

starter4 blocks, 2 stacksany viewport280 lines generated (estimate)600 tokens to run (estimate)
prompt.txt — copy-paste ready
A token usage and billing page: header with plan name and current cycle, a budget meter (used vs limit, shifting to amber near 60% and red past 85%), a per-day usage table with token counts, and a top-up card stating price per extra token with no fine print invented. The meter is a real element with aria-valuenow. Focus rings visible; colours are CSS variable tokens; reduced-motion does not change the meter's colour behaviour.
Palette tokens:#0d1117#e6edf3#34d399#fbbf24#fb7185

Remix this brief:

  • Minimal: meter and total only.
  • Enterprise: per-project breakdown table.
  • Tiny: widget card for a sidebar.
Stacks shipped:ReactNext.jsBlocks:HeaderBudget meterUsage tableTop-up card

Components this brief typically renders:

Community:▶ Re-run this prompt⤴ Submit a remix of it★ Your saved listRe-runs are a labelled simulation; the run log on this page is the real record.
Before you run it, know this
  • Lowest score was GLM-4.6 (CN) at 87/100 — Numbers tabular; no hidden fees implied.
  • All models built cleanly on the first pass.