313 lines
18 KiB
Markdown
313 lines
18 KiB
Markdown
# 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`.
|