The reasoning behind every colour, typeface, spacing rule, and component decision in the Multipl Golden Canvas design system.
Before we ask "does this look good?", we ask "does this feel right for Priya?" If those two answers ever conflict, Priya wins.
Priya earns well, spends freely, and has real financial goals — a Europe trip, maybe a down payment someday. The problem isn't her income or her intelligence. The problem is that every savings app she's tried has made her feel behind, judged, or bored.
She doesn't need to be lectured. She doesn't need another dashboard of red numbers telling her she's failing. She needs an app that's already working for her — even while she orders pizza on a Tuesday night.
"She doesn't need another financial app that lectures her. She needs one that's already working — even while she orders pizza."
— Multipl Design Brief, Brand FoundationThis shapes every design choice we make. The warm cream background instead of clinical white — because Priya's phone is also her entertainment, her social life, her camera. The gold sparkline showing growth in real time — because she needs to feel that her money is doing something right now, not sitting dormant. The teal credit colour — positive, alive, not aggressively green like a dashboard.
Before shipping any screen, ask: Does this make Priya feel capable and rewarded, or does it make her feel behind and managed? If the latter, redesign it.
Every colour in our palette earns its place by doing a specific job. We don't use colour for decoration — we use it to communicate status, hierarchy, and emotion.
Why warm cream (#FDFAF0), not white? Pure white (#FFFFFF) is associated with clinical utility — hospitals, spreadsheets, banking apps of the 2010s. Our warm cream background is barely perceptible but emotionally significant: it reads as premium and welcoming, more like high-end stationery than software. Priya's portfolio sits on the same canvas as her favourite editorial content — it should feel equally considered.
Use gold exclusively for the primary action. Use teal only to signal positive financial movement. Use coral only for errors and alerts.
Don't use gold as a background wash or decoration. Don't put gold text on a light surface (1.6:1 — fails contrast). Don't use red for errors — it's too alarming for a wealth app.
We use exactly two typefaces. Every deviation from this erodes the visual system. The choice of each is deliberate, with specific constraints on where each may and may not appear.
Why Playfair Display for wealth headings only? Serif fonts carry centuries of association with editorial gravitas — The Economist, FT, long-form finance journalism. A single Playfair Display balance figure anchors the portfolio card in that tradition of weight and permanence, making the number feel more real, more significant. But we contain it strictly to this context — using it for UI labels would tip into pastiche.
Why DM Sans everywhere else? DM Sans was designed specifically for digital interfaces at small sizes. It has a slightly wider, open letterform that reads cleanly at 12–15px on OLED screens without the weight compensation tricks other typefaces need. Its 300–800 weight range gives us an expressive palette: 800 for balance figures, 600 for list titles, 400 for body, 300 for whispered metadata.
Every monetary value must use font-variant-numeric: tabular-nums. This forces all digits to occupy the same horizontal width, so amounts align perfectly in lists and don't shift in width as they update in real time. A portfolio value that "jumps" on screen as it refreshes destroys trust — tabular-nums prevents this.
Use Playfair Display only for hero balance figures in a wealth/portfolio context. Apply tabular-nums to every monetary value, always. Use DM Sans 700+ for interactive elements.
Don't use Playfair Display for navigation, labels, or error messages — it signals gravity, not utility. Don't use a third typeface for "variety." Don't use proportional figures for currency (they misalign).
Our spacing and sizing rules are not aesthetic preferences. They are commitments to Priya's time, her attention, and her fingers.
Why a 20px card radius? Our primary card radius is 20px (radiusL). This is the intersection of two observations: at 375pt width, anything below 16px looks like a clipped rectangle, not a card. Anything above 24px on a full-width card begins to eat into content at the corners. 20px is the "warm, approachable" radius — rounded enough to feel considered, not so rounded it becomes bubble-like. Component radii scale down from here: 12px for compact rows, 8px for small chips.
The system defines 59px top (status bar + nav bar) and 34px bottom safe areas. Bottom navigation always adds this 34px beneath its visible height — never clip content behind the home indicator bar. Bottom sheets add 34px to their footer padding for the same reason.
The portfolio hero card is the most important element in the app. It uses midnight as its canvas because contrast and drama serve a purpose: making the balance feel significant.
When Priya opens the app, she should feel an immediate sense that something important is happening. A white card with a balance number on it communicates information. A midnight card with three glows — gold blooming from the top-centre, blue from the top-right, teal from the bottom-right — communicates this is your wealth, and it's alive.
The three-glow system is not decorative. Each glow carries semantic weight:
"The best financial interfaces don't show you what your money is. They show you what your money is doing."
Why midnight (#0C1220), not pure black (#000000)? Pure black on screens creates harsh OLED flicker in peripheral vision and reads as "off" rather than "premium." Our midnight is a deep, warm navy — it has enough blue in it to feel digital and alive, not void-like. It's also perceptibly different from black, which helps the hero card feel intentionally coloured, not just dark.
Keep all three glows in the hero card. Use the gold sparkline for portfolio balance, teal sparkline for spending account. The dark card is the stage — the number is the performer.
Don't add the hero dark card to secondary screens — its power comes from rarity. Don't change glow positions or colours without re-testing the emotional read. Don't use a flat midnight card without glows — it reads as a bug.
Our component library exists to make Priya's experience consistent and confident — not to showcase our design vocabulary. Every component decision starts from how Priya will interact with it, not how it looks in isolation.
On toast positioning: Toasts (success/error/info messages) always appear 80px above the safe bottom edge — above the navigation bar, not below it. This is not a convention we inherited; it's one we chose because messages that appear at the bottom of the screen are obscured by the thumb resting position. Priya's thumb naturally rests at the bottom third of the screen when one-handing — messages must appear above that zone.
On the dark toast surface: All toasts use midnight (#0C1220) as their background regardless of the screen's light or dark theme. This creates a consistent, recognisable system-level message surface. Priya learns quickly that midnight = system message. The semantic colour (teal/coral/gold/blue) only appears on the border and action button — the content surface stays neutral.
Financial applications carry a unique responsibility: when a number is wrong — or merely appears wrong — trust is gone. Our financial-specific design rules exist to make every rupee feel exact and verifiable.
font-variant-numeric: tabular-nums. This forces digit widths to be equal, so ₹1,000 and ₹9,999 occupy exactly the same horizontal space. In a transaction list, this means amounts align perfectly in a column without a single pixel of jitter as data loads or updates. It is a subtle detail that users will never consciously notice — but they will notice if it's absent.If a user has to squint, guess, or calculate to understand a financial figure on screen — the design has failed. Every number should be instantly legible, correctly signed (+ / –), and contextually anchored (what it is, where it came from, what it means for Priya right now).
Visual design carries the structure. Copy carries the emotion. Our voice is warm, confident, and present — never corporate, never cautious, never hollow.
"Not a financial advisor. Not a bank. Not a startup chatbot. A friend — one who's genuinely excited about your progress and tells you the truth plainly."
| Context | Tone | Example |
|---|---|---|
| Showing growth | Celebratory, specific | "Your ₹24,500 is earning ₹5.70 today" |
| Cashback earned | Delighted, immediate | "Nice — ₹40 from your Starbucks this morning" |
| Onboarding | Warm, jargon-free | "Add money. We take it from here." |
| Error states | Calm, no blame | "Something went sideways — let's try that again" |
| Empty states | Inviting, not judgmental | "Your brands list is empty. Let's find you some good ones." |
| Nudges | Friendly, never pushy | "Your ₹2,000 is just sitting here — want it working?" |
| Confirmations | Concise, warm | "Done. Your money's on the move." |
Six copy rules that apply to every screen:
Accessibility constraints often produce our best decisions. The colour choices, touch targets, and type sizes that serve users with visual or motor impairments also make the experience measurably better for everyone.
| Decision | Accessibility Driver | Universal Benefit |
|---|---|---|
| 44×44pt touch targets | Motor impairments, tremor | Faster, less frustrating for all users |
| Tabular-nums on all amounts | Cognitive load, dyscalculia | Cleaner visual alignment for all |
| 5.2:1 min contrast (tealText) | Low vision, outdoor use | Better readability in bright sunlight |
| No colour-only status signals | Colour blindness | Clearer UX with icon + colour + text |
| Skeleton loaders over spinners | Anxiety, uncertainty | Perceived speed improvement for all |
| Empty state CTAs always present | Cognitive guidance | Reduces abandonment for all users |
| Dimension | Position | Design implication |
|---|---|---|
| Elite ↔ Mass appeal | 70% mass appeal | Aspirational but never exclusive — Priya always feels this is for her |
| Serious ↔ Playful | 65% playful | Numbers are serious; the experience of engaging with them should be light |
| Conventional ↔ Rebel | 60% rebel | Spending-as-saving is unconventional — the product should feel like it knows something others don't |
| Friend ↔ Authoritative | 70% friend | A brilliant friend who knows finance — not a bank, not a robo-advisor |
| Classic ↔ Innovative | 65% innovative | Familiar patterns (tabs, cards) executed with unexpected freshness |
| Rational ↔ Emotional | 60% emotional | Lead with feeling (growth, delight); justify with logic (the numbers) |
When two equally functional design choices exist, always choose the one that feels more like a friend said it, is more playful, and is more present. The rational option is rarely wrong — but the warm option is usually better.