# 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.