Skip to content
Ritesh FirodiyaGet in touch

Work / AskCal / Wiki / Surfaces

plan-card

Surfacecanonicalverified 2026-09-27

SURFACE.MOBILE.PATTERNS.PLAN-CARD

Summary

The account card at the top of Settings, in both of its states.

Raw wireframe

  • .context/designs/mobile/patterns/plan-card.html

Why it is drawn this way

A patterns page, but it carries a real route. The app renders this inside (tabs)/settings.tsx; it is drawn apart because the free state differs from the subscribed state by a whole card, and a second full Settings screen would have duplicated four groups of rows to show one of them. Carrying the route is also what makes its "See AskCal Plus" edge a navigation Settings genuinely performs.

The free state is the one this page exists for. settings already draws the subscribed card in full. The Subscribed variant here is therefore a second copy of markup that lives elsewhere, and the drift risk is exact rather than theoretical — see the note in the file.

Everything billing-transparency requires is on the card without a tap: price, renewal date, what the allowance is, and Restore purchases. The free state states the trial is a one-off allowance rather than a monthly one, because FREE_TRIAL_SCANS is lifetime and a meter that looks monthly is a promise the server will not keep. See metering.

Related

Sources

  • .context/designs/mobile/patterns/plan-card.html

Every project of mine is written down like this.

Read the résumé