# Money Multiplier — Brand Guide

Reference for visual identity, voice, and regulatory positioning of the borrower web app.

---

## Brand hierarchy

| Role | Entity | Notes |
|------|--------|--------|
| **Product** | Money Multiplier | Customer-facing name everywhere in UI |
| **Platform / org** | Seven Fincorp | Referenced in PIN security copy; parent org |
| **LSP** | Noxven Ventures (OPC) Pvt Ltd | Loan Service Provider on KFS; coordinates RM / onboarding |
| **Lender (RE)** | Dynamic per offer | e.g. ENN ENN Capital Private Limited, Noxven Ventures Lending Private Limited |
| **DLA / web** | sevenfincorp.com | KFS samples, regulatory hosting |
| **App legal** | `assets/MMTOC.pdf`, `assets/MMPP.pdf` | Terms of Service (MMTOC), Privacy Policy (MMPP) |

Lender names are **never hardcoded in HTML**. They resolve at runtime via `getSelectedOffer().nbfcName` and templates in `js/compliance-constants.js`.

---

## Positioning & tagline

**Category:** Digital working-capital for Indian MSMEs.

**Primary line (welcome screen):**

> Turn Capital into capacity

**Feature pills:**

- Up to ₹1 Crore
- Decision in 48 hrs
- 100% Digital
- No EMI

**Go-live message:**

> Your Money Multiplier facility is active. Start drawing against your allotted product — any time.

**Tone:** Confident, plain-language, compliance-aware. Avoid hype; prefer concrete limits, timelines, and next steps. Use ₹ and Indian number formatting (`en-IN` locale).

---

## Logo & iconography

| Asset | Path | Usage |
|-------|------|--------|
| Primary logo | `assets/mm-logo.png` | Welcome (120×120), auth topbars (26px height), PIN screens (90×90) |
| Fallback monogram | `M` in CSS | Home credit card badge when logo not shown inline |
| Favicon / PWA | `theme-color: #080B53` | Browser chrome matches navy shell |

**Logo treatment:** Centered on landing; reduced opacity (≈85%) in dark topbars. Do not stretch — use `object-fit: contain`.

**Icons:** Inline SVG system in `js/icons.js` (bottom nav, repay, profile). Prefer simple line icons on glass/dark surfaces.

---

## Color palette

### Primary — Navy

| Token | Hex | Use |
|-------|-----|-----|
| `--navy` | `#080B53` | Brand primary, theme-color, buttons, links on light surfaces |
| `--navy-deep` | `#050740` | Shell gradient base, credit card depth |
| `--navy-mid` | `#0d1275` | Card peek layer |
| `--navy-light` | `#1a2288` | Highlights, gradient stops |

**Metallic gradient:** `--navy-metallic` — shell background, primary buttons, top-level chrome.

### Accent — Gold

| Token | Hex | Use |
|-------|-----|-----|
| `--gold` | `#F5C842` | Progress fills, badges, accent text |
| `--gold-light` | `#FFE082` | Accent button text, hero glow |
| `--gold-dark` | `#C9A020` | Metallic gradient stop |

Gold is **sparing**: utilization bars, celebration moments, focus rings — not for body text.

### Light surfaces (forms, KFS, help)

| Token | Hex | Use |
|-------|-----|-----|
| `--bg` | `#E8EAF2` | Page backdrop (split/light layouts) |
| `--surface` | `#FFFFFF` | Cards, inputs (focused) |
| `--surface2` | `#F0F1F8` | Input default, secondary panels |

### Text

| Token | Hex | Context |
|-------|-----|---------|
| `--ink` | `#0B0C1A` | Primary on light |
| `--ink2` | `#4B4D6A` | Secondary on light |
| `--ink3` | `#9597B4` | Labels, hints |
| `--on-dark-primary` | `#FFFFFF` | Headlines on navy |
| `--on-dark-body` | `rgba(255,255,255,.80)` | Body on dark |
| `--on-dark-muted` | `rgba(255,255,255,.65)` | Hints, pills |
| `--on-dark-subtle` | `rgba(255,255,255,.52)` | Legal footers |

### Semantic

| Token | Hex | Meaning |
|-------|-----|---------|
| `--green` / `--green-soft` | `#16A34A` / `#DCFCE7` | Success, active mandate |
| `--amber` / `--amber-soft` | `#D97706` / `#FEF3C7` | Warning, pending |
| `--red` / `--red-soft` | `#DC2626` / `#FEE2E2` | Error, overdue |

---

## Typography

Loaded from Google Fonts (`index.html`):

| Role | Family | Weights | CSS variable |
|------|--------|---------|--------------|
| **Display** | Oswald | 400–700 | `--display` |
| **Body** | DM Sans | 300–600 | `--body` |
| **Fallback** | Inter | 400–500 | Loaded; secondary use |
| **Data** | System monospace | — | Account numbers, IFSC, OTP, draw IDs |

### Display (Oswald)

- Always **uppercase** via `.display` class
- Letter-spacing: `.5px`–`1.2px` by size
- Sizes: `.display-xl` (40px) → `.display-sm` (17px)
- Used for: screen titles, PIN entity name, topbar screen names, hero limits, credit card product name

### Body (DM Sans)

- Default UI copy, buttons, inputs, consent text
- Scale: `.body-lg` (17px) down to `.body-xs` (12px)
- Labels: `.label` — 11px, uppercase, `.75px` tracking

### Numbers & money

- Currency: `₹` prefix, `toLocaleString('en-IN')` for lakhs/crores style grouping
- Large limits: Oswald, tight tracking (e.g. home `sku-hero-amount`, golive limit)

---

## Layout & shape

| Token | Value | Notes |
|-------|-------|-------|
| Mobile max width | `480px` (`--max`) | Phone-first shell |
| Desktop max | `1120px` (`--max-pc`) | PC mode toggle |
| Border radius | `10px` / `14px` / `22px` | sm / default / lg |
| Touch target | `44px` min | Buttons, nav |
| Bottom nav | `80px` | Fixed dashboard navigation |

**Visual language:** Skeuomorphic depth — raised/inset shadows, glass panels (`--glass-dark`), subtle dot/grid textures on navy. Feels like a **premium fintech card app**, not flat Material.

**Modes:**

- **Dark pages** (`.page.dark`): onboarding, auth, dashboard — navy shell, white type hierarchy
- **Light pages** (split/form): KFS, security collateral, help grievance cards — white surfaces on muted bg

---

## Components (brand-critical)

### Buttons

| Class | Look | When |
|-------|------|------|
| `.btn-dark` | White metallic gradient, navy text | Welcome primary CTA (“Apply Now”) |
| `.btn-primary` | Navy metallic, white text | Form submits, draw submit |
| `.btn-ghost` | Glass border, navy text | Secondary (“Sign In”) |
| `.btn-accent` | Gold-tinted glass | Rare highlights |

Height: **56px** full-width default; **38px** for `.btn-sm`.

### Pills & glass

- `.sku-pill` — welcome feature tags (glass, rounded 24px)
- `.sku-card` / `.sku-panel` — frosted panels on dark
- `.nbfc-offer-card` — equal-weight lender selection cards (compliance)

### Credit card (home)

- Layered peek card + main card
- Gradient: navy → deep with gold radial glow
- Product label format: `{productLine} — {nbfcName}`

### Compliance UI

- `.consent-row` — explicit checkbox blocks (no bundled consent)
- `.compliance-purpose-footer` — 11px muted C3 purpose disclosure
- `.draw-bank-confirm` — disbursement account confirmation block

---

## Product naming

Each borrower has **one** allotted facility:

| Code | Full name | KFS subtitle |
|------|-----------|--------------|
| A | Revolving Credit Line | Money Multiplier — Revolving Credit Facility |
| B | Bill Discounting | Money Multiplier — Bill Discounting |
| C | Raw Material Purchase Financing | Money Multiplier — Raw Material Finance |

Short names used in nav and chips: “Revolving Credit”, “Bill Discounting”, “Raw Material”.

---

## Voice & copy patterns

### Headlines

Short, stacked, uppercase Oswald:

- “Start your application”
- “Tell us about your business”
- “Select your lender”

### CTAs

Action-forward with arrow:

- `Apply Now →`
- `Submit & Continue →`
- `Start Loan Application with {nbfcName}`
- `Submit Draw Request →`

### Hints & legal

- Field hints: sentence case, `--ink3` / `--on-dark-muted`
- Legal foot: 12px, subtle — “By continuing you accept our Terms & Privacy Policy”
- Purpose footers: one line, data-use disclosure (RBI C3)

### Errors & toasts

Direct, no blame: “Complete draw-stage consents before submitting”, “Confirm disbursement account before submitting”.

### Regulatory copy

- KFS: “Binding document — read carefully”
- Offer: “Non-binding — final terms in your KFS from the lender you select”
- Consents: separate C1–C6; bureau / storage / third-party called out explicitly

---

## Photography & illustration

No photography in current UI. Visual interest comes from:

- Navy + gold gradients
- Glassmorphism
- Monospace data fields
- Simple emoji/icon tiles on upload rows (`DOC`, `CC`, `COL`)

If extending: prefer **abstract finance imagery** or **document/invoice metaphors** — avoid stock “handshake” clichés.

---

## Accessibility

- `color-scheme: dark` on root
- On-dark text hierarchy tuned for WCAG on navy (`--on-dark-*` tokens)
- Focus: gold outline on segmented controls
- Touch targets ≥ 44px; minimum text 11px
- Screen reader: `sr-only` h1 on dashboard home

---

## External links (brand touchpoints)

| URL | Purpose |
|-----|---------|
| assets/MMPP.pdf (MMPP) | Privacy policy (C5 consent link) |
| assets/MMTOC.pdf (MMTOC) | Terms of Service (welcome screen) |
| https://www.sevenfincorp.com/kfs/… | Sample KFS PDFs per lender |
| https://cms.rbi.org.in | RBI Ombudsman (help screen) |

---

## Do / Don’t

**Do**

- Use CSS variables from `css/styles.css` — don’t invent one-off hex values
- Keep lender names dynamic via `compliance-constants.js`
- Use Oswald for titles, DM Sans for everything else
- Format money in INR with ₹ and Indian grouping
- Maintain glass + navy aesthetic on dashboard flows

**Don’t**

- Hardcode “NBFC Partner” in UI (legacy placeholder only in docs)
- Bundle consents into a single checkbox
- Use light gray-on-white for primary actions (primary actions stay navy or white-on-navy)
- Show multiple products per borrower in copy (one facility per customer)
- Use `file://` — brand experience assumes proper HTTP shell and theme-color

---

## File reference

| File | Brand content |
|------|----------------|
| `css/styles.css` | Tokens, components, dark/light themes |
| `index.html` | Welcome copy, meta theme, font links |
| `js/compliance-constants.js` | Regulated strings, lender catalog, purpose disclosures |
| `js/store.js` | Product names and KFS subtitles |
| `assets/mm-logo.png` | Primary logo |

---

*Last aligned with app commit: DLA compliance inline implementation (offer cards, dynamic nbfc, draw gates).*