# Stitch design-system prompt — BankCBS Paste **Part A** into Stitch to establish the design system, then prompt individual screens against it. Part B is a short fallback if Stitch truncates your input. Part C is what to send back to me. --- ## Part A — the system prompt (paste this) ``` You are designing the design system for BankCBS, a production mobile banking app built in React Native for the Indian market. Do not design individual screens yet. Produce the system: colour, typography, spacing, elevation, and a component library that screens will be assembled from. ── THE PRODUCT ────────────────────────────────────────────────────────────── One app serving two very different audiences from the same binary: 1. RETAIL CUSTOMER. Checks balances, pays people, manages cards, opens fixed and recurring deposits, applies for loans and insurance. Uses the app for two minutes at a time, often on a mid-range Android phone, and needs to trust it with money. Tone: calm, precise, unmistakably a bank — not a fintech toy. 2. FIELD COLLECTION AGENT. A bank employee visiting customers door to door in daylight, one-handed, at speed, entering cash collections and opening accounts. Needs density, high contrast, large tap targets, and numbers readable in direct sunlight. This is a working tool, not a lifestyle app. Design one coherent system that serves both. The agent surfaces should read as the same family — same primary colour, same components — but denser and higher contrast. Show me how the system flexes between the two. ── KEEP THIS ──────────────────────────────────────────────────────────────── PRIMARY BRAND NAVY: #124577. This is locked. It is the bank's identity and must remain the dominant brand colour, used for primary actions, active states, and brand moments. Build the rest of the palette around it. ── REDESIGN EVERYTHING ELSE ───────────────────────────────────────────────── You have full latitude, and I want you to use it, on: - the accent / secondary colour (the current #10B981 green is not working) - semantic colours for success, warning, danger, info - the full neutral ramp (backgrounds, surfaces, borders, three text tiers) - the type scale, weights and line heights - the spacing scale - corner radii - elevation and depth - how cards, rows and sections separate from one another The current app looks like an unstyled admin form: flat white cards, a weak grey ramp, no hierarchy, no considered depth. Fix that. It should look like a bank a person would trust with their salary. ── HARD TECHNICAL CONSTRAINTS (React Native — not a browser) ──────────────── This ships as React Native. Anything below is UNBUILDABLE and must not appear in your design. This is the most important section of this brief. DO NOT USE: - Frosted glass, backdrop blur, or any blur effect. No blur library is installed. Every "glassmorphism" surface must instead be a solid or low-opacity flat fill. - CSS grid. Layout is flexbox only. - Pseudo-elements (::before / ::after) for decoration, arrows, or dividers. Anything visible must be a real element. - Text gradients or gradient-filled type. Text takes one flat colour. - Radial, conic, or mesh gradients. LINEAR gradients only (two or three stops). - Inner shadows, multiple stacked shadows, or coloured glows around elements. React Native supports ONE outer shadow per element: colour, x/y offset, opacity, radius on iOS; a single flat elevation value on Android. Android ignores shadow colour and offset entirely — so any design that depends on a soft coloured shadow will look flat on most of the user base. Design depth with borders, surface-tone steps, and generous spacing instead. - Border gradients, dashed borders with custom dash patterns, or per-corner different border widths. - CSS filters, blend modes, or opacity masks. - position: sticky, and any scroll-linked parallax or scroll-driven colour change. - SVG masks or clip paths beyond a simple rounded rectangle. - Custom checkbox/radio/switch shapes that depend on pseudo-elements. DO USE, all available: - Linear gradients (react-native-linear-gradient) - Inline SVG shapes and charts (react-native-svg) - Spring and timing animation, gesture-driven motion (Reanimated) - Haptic feedback on confirmations - Native bottom sheets with snap points - Native date pickers ── TYPOGRAPHY — READ THIS CAREFULLY ───────────────────────────────────────── The ONLY font family available is Nunito, and only these four weights exist as real font files: 400 Regular 600 SemiBold 700 Bold 800 ExtraBold There is NO 300, NO 500, and NO 900. React Native on Android does not synthesise missing weights — it silently falls back and the text renders wrong. So specify every single text style using only 400, 600, 700 or 800. If your type scale wants a light or medium weight, redesign it to work within these four. Nunito is a rounded humanist sans. It is friendly, which fights slightly with banking authority — show me how you handle that with weight, size, tracking and case rather than by swapping the family. Give me a complete scale with a name, size (px), weight, line height and letter spacing for each role. Include at minimum: a display/balance figure, three headings, body, body-small, caption, an uppercase label/eyebrow, a button label, and a tabular numeric style for money in tables. ── MONEY AND NUMBERS ──────────────────────────────────────────────────────── This is an Indian bank. Get these right, they are not cosmetic: - Currency is the rupee: ₹ - Indian digit grouping, NOT thousands grouping. ₹1,25,000 and ₹12,50,000 — two digits, two digits, then three. Never ₹125,000. - Large sums are spoken in lakh and crore. Show how you'd abbreviate: ₹1.25 L, ₹2.4 Cr. - Money must align on the decimal in any list or table. Specify a numeric style with fixed-width digits. - Show a positive (credit) and negative (debit) treatment. Do not rely on colour alone — a sign or direction icon must carry it too. Other formats that appear throughout, design real slots for them: - Mobile number: +91 followed by exactly 10 digits, displayed 98765 43210 - Account number, always masked except the last four: A/c ••••4321 - IFSC code: 11 characters, letters and digits, e.g. HDFC0001234 - MPIN: exactly 4 digits, always obscured, entered in separate boxes - OTP: exactly 6 digits, entered in separate boxes - Transfer rails, shown as labels the customer chooses between: IMPS (instant, 24x7), NEFT (batched), RTGS (high value, ₹2,00,000 minimum), and intra-bank - Dates as 12 Mar 2026, never 03/12/2026 — ambiguous between conventions ── COMPONENTS TO SPECIFY ──────────────────────────────────────────────────── These already exist in the codebase and your system must define how each one looks. Keep the names. Button variants: primary, secondary, ghost, danger. Full-width and inline. With and without a leading icon. Input single-line and multi-line. Has an uppercase label above, an optional leading accessory (icon, or a "+91" prefix with a divider rule), an optional trailing accessory (validation tick, clear, reveal), and error text below. CodeInput separate boxes for MPIN (4) and OTP (6). Card the base surface everything sits on. BalanceCard the hero object: account nickname, masked number, large balance figure, a show/hide balance control, account holder. Appears in a horizontal swipe carousel with multiple accounts. TransactionItem a row: direction icon, counterparty, date, amount, status. AppHeader screen title, optional back button, optional right slot. ScreenShell the page frame: background, safe area, optional scroll, optional pinned footer. BottomSheet for pickers and confirmations. Modal for blocking confirmations. DatePicker date selection. Loader full-screen busy state. EmptyState icon, title, description, optional action button. Toast transient feedback, top of screen. success / error / info. Also design these, which the app needs and does not yet have: StatusPill account, transaction, loan and card status. At least: active, pending, blocked, frozen, failed, matured, overdue. SectionHeader a titled group divider with an optional trailing action. ListRow the generic settings/menu row: leading icon, title, optional subtitle, and a trailing chevron, value, badge or switch. Stepper progress through a multi-step flow (registration is 3 steps). Skeleton loading placeholder for cards, rows and the balance figure. SegmentedControl for switching between two or three views. AmountInput large, keypad-driven money entry — the centre of any payment. InfoBanner inline informational, warning and error notices. Chip selectable filter chips, single and multi-select. KeyValueRow the label/value pair used all over detail and receipt screens. ── EVERY COMPONENT NEEDS EVERY STATE ──────────────────────────────────────── A banking app spends most of its life in non-default states. For each component, show: default, pressed, focused, disabled, loading, error, selected, and where relevant empty and skeleton. Designs that only show the happy path are the single most common reason a handoff fails, so treat the states as the deliverable rather than an appendix. ── LAYOUT AND PLATFORM RULES ──────────────────────────────────────────────── - Design for a 360–412pt wide viewport. Mid-range Android is the common case. - The bottom tab bar is 90pt tall and floats above content. Any scrolling page must reserve about 106pt of bottom padding so its last row is not trapped behind it. - The status bar is translucent and content passes under it. Any dark full-width header must therefore work with light status-bar icons, and any light one with dark icons — tell me which each of your surfaces requires. - Primary actions live in a footer pinned above the keyboard, not at the end of a long scroll. - Minimum touch target 44x44pt. For agent screens, 48pt. - Every screen must survive the keyboard being open over a text field. - Design light theme as the primary. Note where a dark theme would need different values, but do not design it fully. ── ACCESSIBILITY ──────────────────────────────────────────────────────────── - Body text and any figure showing money must reach WCAG AA (4.5:1). State the contrast ratio for each text-on-surface pairing you define. - Agent screens are used in direct sunlight; hold them above 7:1. - Never encode meaning in colour alone — pair it with an icon, a sign, or text. - The layout must not break when the system font scales up 130%. ── DO NOT MAKE IT LOOK AI-GENERATED ───────────────────────────────────────── Avoid, specifically: purple-to-blue gradient heroes; frosted translucent cards floating on blurred blobs; a single acid-green or violet accent on near-black; one uniform corner radius and one uniform shadow stamped on every element, which flattens all hierarchy; emoji as iconography; giant centred hero text on every screen; and cards for things that are not objects. Spend visual weight where the information matters — the balance, the amount being sent, the thing needing attention — and keep everything around it quiet. Icons come from the Ionicons set. Name the specific Ionicons you intend (shield-checkmark, chevron-forward, wallet-outline, swap-horizontal, and so on) and note where you mean the filled versus outline variant. ── WHAT TO DELIVER ────────────────────────────────────────────────────────── 1. A token table. Every colour as a hex value with a semantic name and its intended use. Every spacing step, radius, and shadow as a number. 2. The type scale as a table: name, px size, weight (400/600/700/800 only), line height, letter spacing. 3. Text-on-surface contrast ratios for every pairing. 4. A component sheet per component above, showing all its states, annotated with the tokens used — padding, radius, height, border width, text style. 5. Two side-by-side sample compositions proving the system flexes: one calm customer screen and one dense agent screen. 6. A short list flagging anything in your design that relies on an effect the constraints above rule out, and what you substituted instead. ``` --- ## Part B — condensed version Use this only if Stitch truncates Part A. It keeps the constraints that cause real rework and drops the explanation. ``` Design system for an Indian mobile banking app in React Native. Two audiences: retail customers (calm, trustworthy, premium) and field collection agents (dense, high contrast, sunlight-readable, 48pt targets). One coherent system serving both. KEEP primary brand navy #124577 as the dominant colour. REDESIGN the accent, semantic colours, neutral ramp, type scale, spacing, radii and elevation — the current design is flat and has no hierarchy. FONT: Nunito only, and only weights 400, 600, 700, 800 exist. No 300, no 500, no 900 — Android will not synthesise them. Every text style must use one of those four. UNBUILDABLE, do not use: blur or frosted glass (no blur library installed), CSS grid, pseudo-elements, text gradients, radial/conic gradients, inner or multiple or coloured shadows (React Native allows one outer shadow; Android ignores its colour and offset entirely), blend modes, filters, position:sticky, clip paths. Available: linear gradients, SVG, spring animation, haptics, bottom sheets. INDIAN FORMATS: ₹ with lakh grouping (₹1,25,000 never ₹125,000), lakh/crore abbreviations, +91 and 10-digit mobile shown as 98765 43210, masked accounts (A/c ••••4321), 11-char IFSC, 4-digit MPIN and 6-digit OTP in separate boxes, IMPS/NEFT/RTGS transfer rails, dates as 12 Mar 2026. COMPONENTS: Button (primary/secondary/ghost/danger), Input (uppercase label, leading +91 prefix or icon, trailing tick, error text), CodeInput, Card, BalanceCard (masked number, large balance, hide toggle, in a carousel), TransactionItem, AppHeader, ScreenShell, BottomSheet, Modal, Loader, EmptyState, Toast, StatusPill (active/pending/blocked/frozen/failed/overdue), ListRow, SectionHeader, Stepper, Skeleton, SegmentedControl, AmountInput, InfoBanner, Chip, KeyValueRow. Show EVERY component in default, pressed, disabled, loading, error, selected, empty and skeleton states — the states are the deliverable, not an appendix. LAYOUT: 360–412pt wide. Bottom tab bar is 90pt and floats, so reserve ~106pt bottom padding. Translucent status bar. Primary action pinned above the keyboard. 44pt minimum targets, 48pt for agents. Light theme primary. Body text and money figures at WCAG AA 4.5:1, agent screens above 7:1. Never colour alone — pair with icon or sign. Icons from Ionicons, name them exactly. Avoid the generic AI look: no purple-blue gradient heroes, no frosted cards on blurred blobs, no single radius and shadow stamped on everything, no emoji icons. DELIVER: token table with hex and px values; type scale table; contrast ratios; a component sheet with all states annotated with tokens; one calm customer screen and one dense agent screen side by side; and a list of anything you had to substitute because of the constraints above. ``` --- ## Part C — what to send me back Send whichever of these you get. In rough order of usefulness: 1. **The token table and type scale** — as text if possible, not only as an image. These become `src/theme/tokens.ts` directly, and exact hex and px values matter more than any screenshot. 2. **Component sheet screenshots** — one per component, with the states visible. 3. **Stitch's exported code** — paste it or save it into the repo. I'll translate it to React Native; I do not need it to be RN already. When I get the code, expect me to flag some of it. Stitch emits web CSS, and the things it reaches for most — `backdrop-filter`, `box-shadow` with multiple layers or a spread radius, `background-clip: text`, `display: grid`, `::before` decoration — have no React Native equivalent. I'll tell you what I substituted rather than silently approximating it. Two things worth deciding before I wire the tokens in: - **Nunito.** The prompt holds you to it because it is what ships in the repo. If Stitch proposes a type treatment that genuinely needs a different family, say so and I'll add the font files — it is a small change and better made once than worked around. - **The 90pt floating tab bar** is currently hard-coded in both navigators. If Stitch designs a different navigation shape, that is a real but contained change to `MainTabNavigator`, `AgentNavigator` and `layoutConstants.ts`.