18 KiB
18 KiB
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:
- The token table and type scale — as text if possible, not only as an
image. These become
src/theme/tokens.tsdirectly, and exact hex and px values matter more than any screenshot. - Component sheet screenshots — one per component, with the states visible.
- 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,AgentNavigatorandlayoutConstants.ts.