Design System

Quota Warning UX

Progressive disclosure patterns for recipe generation limits — warn early, gate softly, never surprise the user mid-flow.

Three-tier escalation

Users move through three states as they approach their monthly recipe cap. Each tier adds one visual signal without removing functionality.

1

Subtle badge

At 70% usage a small pill appears below the generate button: “7 of 10 free recipes used this month.” No interruption.

2

Inline banner

At 90% a dismissible banner slides in above the input. “Almost out — upgrade to keep generating.” Links to pricing.

3

Soft gate

At 100% the generate button is replaced with an upgrade CTA. Past recipes remain viewable. No data loss.

Visual language

Free recipes remaining3 / 10

You’ve used 9 of 10 free recipes. Upgrade for unlimited

Free limit reached

Upgrade to Pro

Colors stay within the brand palette — violet for neutral info, pink for urgency, red only at the hard gate.

Implementation notes

  • Quota state lives in a React context hydrated from the session. No per-request fetch.
  • Banner dismissals persist in localStorage with a 24-hour TTL so returning users aren’t re-nagged.
  • The soft gate still renders the input (disabled) so the UI doesn’t jump. Cursor: not-allowed on hover.
← Back to docs