CBS-Mobile-App/STITCH_PROMPT_LOGIN.md

# Stitch prompt — Login screen

Paste the block below into Stitch. It is self-contained: use it on its own, or
after the system prompt in [STITCH_PROMPT.md](STITCH_PROMPT.md) — if you have
already run that one, Stitch will reuse those tokens and you can delete the
CONSTRAINTS section here.

**No progress indicator.** Stated three times in the prompt, because Stitch adds
step dots to auth screens unprompted.

---

```
Design the sign-in screen for BankCBS, an Indian mobile banking app built in
React Native. One screen, but it has six distinct states — I need all of them.

── CRITICAL: WHAT NOT TO ADD ────────────────────────────────────────────────
NO progress indicator. No step dots, no "Step 1 of 3", no numbered circles, no
segmented progress bar, no breadcrumb. Signing in is a single screen, not a
flow, and any progress ornament on it is wrong. Do not add one anywhere.

Also do not add: a "Forgot MPIN" link (there is deliberately no reset flow —
see the copy below), a social sign-in row, a "Remember me" checkbox for the
password, a carousel of marketing slides, or a language switcher.

── HOW SIGNING IN ACTUALLY WORKS ────────────────────────────────────────────
There is no password. A customer registers a device once, sets a 4-digit MPIN,
and from then on signs in with that MPIN — or with the phone's fingerprint or
face unlock, if they turned it on. The profile is bound to the handset, so a
returning customer does not retype their mobile number.

Two audiences share this screen, chosen by a tab at the top:
 - CUSTOMER — a retail bank customer. Calm, trustworthy, premium.
 - AGENT — a bank field-collection employee who visits customers door to door.
   Same visual family, but this person is standing in daylight working fast.

── BRAND ────────────────────────────────────────────────────────────────────
Primary brand navy #124577 is locked — it is the bank's identity. Use it for
the primary button, active states and brand moments. You choose everything
else: accent colour, semantic colours, the neutral ramp, spacing, radii,
elevation. The current screen is flat white cards on light grey with no
hierarchy; make it look like a bank someone trusts with their salary.

App name: BankCBS. Mark: a shield with a tick inside (Ionicons
"shield-checkmark"). There is no logo file — design the mark from the icon.

── THE SIX STATES, ALL REQUIRED ─────────────────────────────────────────────

STATE 1 — RETURNING CUSTOMER (the common case, design this first)
The device already knows who this is, so there is no mobile-number field.
 - An identity card showing: a circular avatar with the customer's first
   initial, their full name ("Priya Sharma"), their masked mobile
   ("••••••3210"), and a small green verified shield at the trailing edge.
 - Below it, a 4-box MPIN entry. Digits are always obscured. Boxes fill left to
   right, and the box being typed into is visibly focused.
 - Primary full-width button: "Sign In".
 - A divider reading "OR SIGN IN WITH", then a single circular 64pt fingerprint
   button (Ionicons "finger-print-outline") with the caption "Use Biometrics".
   Divider and button appear or disappear together.
 - Footer, small: "Not you? Register" — Register is the tappable part.
 - Static note, not a link: "Forgot your MPIN? Visit your branch to have it
   reset." There is deliberately no in-app reset. Design this so it reads as
   helpful information rather than a dead end.

STATE 2 — NEW DEVICE / AGENT
No stored profile, so the full form shows.
 - Field: "REGISTERED MOBILE NUMBER" — an uppercase label above the input, a
   "+91" prefix inside the field separated by a thin vertical rule, then 10
   digits displayed as "98765 43210". A tick appears at the trailing edge once
   10 digits are in.
 - Then the same 4-box MPIN entry, "Sign In" button, and footer.
 - Footer copy here is "New to BankCBS? Register".

STATE 3 — ROLE TABS
Two tabs above the card: "Customer" and "Agent". The active tab is filled with
the brand navy and connects visually to the card below it, as though the card
and tab are one continuous surface — the inactive tab is not. Show both
positions. Also show the screen with the tab strip absent entirely, because
when only one role is available it is not rendered at all.

STATE 4 — LOADING
 - The whole screen while the app is still reading the stored profile: a
   centred spinner, no form. This is the first thing shown on a cold start, so
   it must not look broken.
 - The "Sign In" button mid-request: a spinner in place of the label, button
   disabled, fields locked.

STATE 5 — ERRORS
 - Wrong MPIN: the MPIN boxes clear and show an error treatment, plus a toast
   at the top of the screen titled "Sign-in failed" with the body "Check your
   mobile number and MPIN, then try again."
 - Invalid mobile number, inline under the field: "Enter the 10-digit number
   registered with your bank".
 - An information toast: "Biometric sign-in cancelled — you can sign in with
   your MPIN instead."
 Design the toast: it appears at the top, over content, and has success, error
 and information variants.

STATE 6 — MPIN LOCKED (a separate full screen)
Too many wrong attempts. There is no way out inside the app, and the design
must be honest about that without feeling punitive.
 - Heading: "MPIN locked"
 - Sub: "Too many incorrect attempts"
 - Body explaining the MPIN can only be reset at a branch.
 - Two buttons: "Contact support" (secondary) and "Back to sign in" (ghost).

── ONE MORE ELEMENT ─────────────────────────────────────────────────────────
On the customer tab, when the phone supports biometrics but the customer has
not enabled them yet, a row appears above the button: the label "Enable
biometric sign-in next time" and a switch. Show it on and off.

── HARD TECHNICAL CONSTRAINTS (React Native, not a browser) ─────────────────
Anything here is unbuildable and must not appear in the design:
 - No blur, frosted glass or backdrop filter. No blur library is installed.
   Translucent surfaces must be flat low-opacity fills.
 - No CSS grid — flexbox only. No pseudo-elements (::before / ::after); every
   visible thing must be a real element.
 - No text gradients. No radial, conic or mesh gradients — linear only, two or
   three stops.
 - One outer shadow per element, maximum. No inner shadows, no stacked shadows,
   no coloured glows. Android ignores shadow colour and offset entirely, so do
   not build depth from soft coloured shadows — use borders, surface-tone steps
   and spacing.
 - No blend modes, filters, clip paths or opacity masks. No position: sticky.

FONT: Nunito, and only weights 400, 600, 700 and 800 exist as real files. There
is no 300, no 500, no 900 — Android does not synthesise missing weights, it
falls back and renders wrong. Every text style must use one of those four.

LAYOUT: 360–412pt viewport, mid-range Android is the common case. Translucent
status bar with content passing under it — tell me whether your header needs
light or dark status-bar icons. The MPIN and mobile fields must remain visible
with the keyboard open, and the primary button should sit above the keyboard
rather than at the end of a scroll. Minimum touch target 44x44pt. Light theme
only.

ACCESSIBILITY: body text at WCAG AA 4.5:1 or better — give me the ratio for
each text-on-surface pairing. Never encode meaning in colour alone. The layout
must survive the system font scaling up 130%.

Icons come from Ionicons. Name the exact icons you use (shield-checkmark,
finger-print-outline, call-outline, chevron-back, and so on) and say whether
you mean the filled or outline variant.

── DO NOT MAKE IT LOOK AI-GENERATED ─────────────────────────────────────────
Avoid: purple-to-blue gradient heroes; frosted cards floating over blurred
colour blobs; one corner radius and one shadow stamped on every element, which
flattens all hierarchy; emoji as icons; a full-height centred hero that pushes
the form off screen; and dead vertical space with the button stranded at the
bottom. Spend the visual weight on the identity card and the MPIN entry, and
keep everything else quiet.

── DELIVER ──────────────────────────────────────────────────────────────────
1. All six states as separate frames.
2. A token table: every colour as a hex with a semantic name, every spacing
   step, radius and shadow as a number.
3. The type scale used: name, px size, weight (400/600/700/800 only), line
   height, letter spacing.
4. Contrast ratios for each text-on-surface pairing.
5. Annotations on the frames giving the padding, height, radius and border
   width of the identity card, the MPIN boxes, the input, the tabs and the
   button.
6. Anything you had to substitute because of the constraints above, and what
   you used instead.
```

---

## What to send back

The token table and type scale **as text** if you can — those become
`src/theme/tokens.ts` directly and exact values matter more than any image.
Then the six frames, and Stitch's exported code if you have it.

When the code arrives I will flag what cannot cross over. Stitch reaches for
`backdrop-filter`, multi-layer `box-shadow`, `background-clip: text`,
`display: grid` and `::before` decoration, none of which have a React Native
equivalent — I will tell you what I substituted rather than quietly approximating.

## Two details in the current build worth knowing

- The active role tab is drawn as an **SVG path with a notched, angled right
  edge**, hard-coded to `#143e6c` in
  [LoginRoleTabs.tsx](src/modules/auth/components/LoginRoleTabs.tsx) — slightly
  off the brand navy. The prompt describes the intent (tab fused to the card)
  rather than that shape, so Stitch is free to propose something better. If it
  does, that file needs the new geometry and the literal replaced with a token.
- `AppHeader`'s subtitle is commented out app-wide, so `ScreenShell`'s
  `subtitle` prop renders nothing. LoginScreen sidesteps this by passing no
  title at all and drawing its own hero. Whatever Stitch returns, the heading
  has to live in the screen body — or that component needs fixing first.

## One thing to confirm

You said you do not want the progress indicator. The Login screen never had
one — the three-segment bar is on the **Register** screen I built earlier
([RegistrationSteps.tsx](src/modules/auth/components/RegistrationSteps.tsx)).
Say the word and I will pull it off Register too; it is a two-line change.