Chitragupt · mobile design system

Component reference

Canonical primitives. Mobile uses the SAME visual primitives as web — only adjusted padding/text-size for touch + small viewport.

Buttons

Primary · full-width hero rounded-xl px-4 py-3.5 text-sm font-semibold Tertiary · text link (e.g. "Skip · do this later")

Mobile rule: hero CTA (the action that completes the screen) is always full-width `rounded-xl` and lives in the sticky bottom bar OR as the last item of `main`.

Status pills

Confirmed Pending Failed Family AI Self Neutral

Identical class string to web. `rounded-full px-2 py-0.5 text-[10px]`.

Section cards

Mobile uses `p-4` (web uses `p-5`). All other classes match.

Default · neutral

For most informational panels.

Positive · highlighted

For success state or primary region.

Required · double-border

For consent / required fields.

Warning

Danger

Family

Info banners

Info: non-blocking confirmation.
Warning: proceed with awareness.
Danger: failure or irreversible.
Family: household context.

Identical to web.

Form inputs

Mobile uses `py-3` (web uses `py-2`) for finger-friendly touch targets.

Tab pills

Stat blocks

Refund

+ ₹18,000

Documents

14

Typography scale (mobile)

Page H1 · text-[22px]

Section · text-[18px]

Sub · text-base

Body · text-[13px]

Metadata · text-[12px]

Helper · text-[11px]

Eyebrow · text-[10px]

Web's hero `text-3xl` becomes `text-[22px]` on mobile. Web's `text-2xl` becomes `text-[20px]`. Everything else shrinks one notch.

Don'ts (same as web)

  • ✕Hero CTA not full-width on mobile (looks orphaned in single column).
  • ✕Touch target < 44 px tall (Apple HIG min). Buttons use `py-3` minimum.
  • ✕Side-by-side buttons cramming below 320 px width — stack instead.
  • ✕Sticky composer / CTA without `pb-` on the scrolling content above — content gets hidden behind it.