calvana/pledge-now-pay-later/BRAND.md

# Pledge Now, Pay Later — Brand Guide

> **This is the single source of truth.** Every UI change, every new page, every generated asset must follow this document. When in doubt, refer to the visual assets in `brand/`.

---

## Brand Assets Location

All brand assets live in the `brand/` directory at the project root:

```
brand/
├── photography/          20 landing page photos (Gemini 3 Pro)
├── logo/                 6 logo variations
├── color-palette/        3 palette reference cards
├── typography/           3 type specimen sheets
├── moodboard/            3 visual direction boards
├── brand-guide/          7 brand guide pages
├── social-templates/     4 social media templates
└── icons/                6 line icons in brand colors
```

Production images served from `public/images/landing/` (copied from `brand/photography/`).

### Asset Generation Rules
- **Photography**: Generate with `gemini-3-pro-image-preview` (Nano Banana Pro). Documentary candid style. Save to `brand/photography/` AND `public/images/landing/`.
- **Icons**: Line-only, 2px stroke, single brand color, white background. Save to `brand/icons/`.
- **Social templates**: Use brand colors + Inter typography only. Save to `brand/social-templates/`.
- **Any new visual asset**: Save to the appropriate `brand/` subfolder first, then copy to `public/` if needed for the website.

---

## Core Identity

**Name:** Pledge Now, Pay Later
**Archetype:** The Steward — quiet authority, precision with warmth, trusted with money
**Insight:** People don't break promises. Systems do.
**Promise:** Every pledge tracked. Every donor reminded. Every penny accounted for.

### What We Are
The missing infrastructure between "I'll donate" and the money arriving.

### What We Are Not
- Not a payment processor
- Not a CRM
- Not a fundraising platform
- Not a charity website builder

---

## Color System

Every color has a psychological job. No decorative color usage.

| Token | Hex | Name | Psychological Job | Use For |
|-------|-----|------|-------------------|---------|
| `midnight` | `#111827` | Midnight | Authority | Primary text, dark sections, logo, default buttons |
| `promise-blue` | `#1E40AF` | Promise Blue | Action | Links, CTAs, active states, interactive elements |
| `generosity-gold` | `#F59E0B` | Generosity Gold | Warmth | Pending states, highlights, volunteer accent |
| `fulfilled-green` | `#16A34A` | Fulfilled Green | Completion | Paid badges, success states, confirmations |
| `alert-red` | `#DC2626` | Alert Red | Urgency | Overdue, errors, needs-attention (never decorative) |
| `paper` | `#F9FAFB` | Paper | Calm | Page backgrounds, alternating rows |

### Legacy Aliases (still in tailwind config)
`trust-blue` = `promise-blue`, `warm-amber` = `generosity-gold`, `success-green` = `fulfilled-green`, `danger-red` = `alert-red`

### 60-30-10 Rule
- **60%** Midnight + Paper (the base — dark text on light, or white text on dark)
- **30%** Promise Blue (the action layer — everything interactive)
- **10%** Gold + Green + Red (status indicators only)

### Reference
- `brand/color-palette/01-primary-palette.jpg` — 6 color swatches
- `brand/color-palette/02-tints-and-shades.jpg` — extended scales
- `brand/color-palette/03-color-psychology.jpg` — psychological roles

---

## Typography

**Font:** Inter (Google Fonts)
**Import:** `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap')`

| Level | Size | Weight | Tracking | Tailwind |
|-------|------|--------|----------|----------|
| Display | 72-96px | Black (900) | -0.025em | `text-7xl md:text-9xl font-black tracking-tighter` |
| H1 | 48-60px | Black (900) | -0.02em | `text-4xl md:text-5xl font-black tracking-tight` |
| H2 | 30-36px | ExtraBold (800) | -0.015em | `text-3xl font-black tracking-tight` |
| H3 | 18-24px | Bold (700) | normal | `text-lg font-bold` or `text-base font-bold` |
| Body | 14-16px | Regular (400) | normal | `text-sm` or `text-base` |
| Caption | 11-12px | Medium (500) | 0.05em | `text-xs font-medium tracking-wide` |

### Numbered Steps Pattern
Use `01`, `02`, `03` in Display/large size as visual anchors instead of icons:
```jsx
<p className="text-4xl font-black text-gray-200">01</p>
```

### Reference
- `brand/typography/01-typeface-specimen.jpg`
- `brand/typography/02-heading-scale.jpg`
- `brand/typography/03-numbers-in-brand.jpg`

---

## Logo

**Mark:** Solid square, zero border-radius, `bg-midnight`, white "P" in Inter Black.

```jsx
{/* Standard logo mark */}
<div className="h-7 w-7 bg-midnight flex items-center justify-center">
  <span className="text-white text-xs font-black">P</span>
</div>

{/* With wordmark */}
<div className="flex items-center gap-2.5">
  <div className="h-7 w-7 bg-midnight flex items-center justify-center">
    <span className="text-white text-xs font-black">P</span>
  </div>
  <span className="font-black text-sm tracking-tight">Pledge Now, Pay Later</span>
</div>
```

### Rules
- Never round the mark corners
- Never add shadows or gradients to the mark
- Never use emoji (🤲) as a logo substitute
- Minimum clear space = 1.5× height of mark on all sides
- Three versions: dark on white, white on dark, blue mark on white

### Reference
- `brand/logo/01-lockup-dark-on-white.jpg` — primary
- `brand/logo/02-lockup-white-on-dark.jpg` — reversed
- `brand/logo/03-lockup-blue-mark.jpg` — blue accent
- `brand/logo/04-mark-dark.jpg` — mark only
- `brand/logo/05-mark-blue.jpg` — blue mark only
- `brand/logo/06-favicon.jpg` — edge-to-edge favicon

---

## Design Rules

### DO
```
✓ Sharp edges everywhere (rounded-lg max on interactive elements)
✓ Typography as the hero — headlines readable without images
✓ Numbered steps (01, 02, 03) instead of icons
✓ Dark sections (bg-gray-950) for key stats and CTAs (max 2 per page)
✓ border-l-2 accents for feature lists
✓ gap-px grids for comparisons
✓ Solid flat colors only
✓ Generous whitespace
```

### DO NOT
```
✗ rounded-2xl, rounded-3xl, rounded-full (except avatars/progress bars)
✗ bg-gradient-to-* anything
✗ shadow-lg shadow-{color}/25 (colored shadows)
✗ backdrop-blur, glass effects
✗ Emoji as visual anchors in headings
✗ group-hover:scale-105 or any scale animations
✗ animate-pulse-ring, animate-bounce-gentle (decorative animations)
✗ More than 2 dark sections per page
✗ Color on heading text — color goes on borders, badges, backgrounds
✗ "AI-powered" as a feature name
```

### Three Signature UI Patterns

**1. Left-Border Accent**
```jsx
<div className="border-l-2 border-midnight pl-4">
  <p className="text-sm font-bold text-midnight">Feature name</p>
  <p className="text-xs text-gray-500">Description text</p>
</div>
```

**2. Gap-Px Grid**
```jsx
<div className="grid md:grid-cols-3 gap-px bg-gray-200">
  <div className="bg-white p-6">Cell 1</div>
  <div className="bg-white p-6">Cell 2</div>
  <div className="bg-white p-6">Cell 3</div>
</div>
```

**3. Dark Inversion**
```jsx
<section className="bg-gray-950 py-20 px-6">
  <h2 className="text-white font-black">Key stat or CTA</h2>
</section>
```

### Reference
- `brand/brand-guide/07-ui-patterns.jpg` — all three patterns visualized

---

## Button Variants

```jsx
<Button variant="default">    {/* bg-midnight, white text */}
<Button variant="blue">       {/* bg-promise-blue, white text */}
<Button variant="success">    {/* bg-fulfilled-green, white text */}
<Button variant="amber">      {/* bg-generosity-gold, white text */}
<Button variant="destructive"> {/* bg-alert-red, white text */}
<Button variant="outline">    {/* border, white bg */}
<Button variant="ghost">      {/* transparent, hover gray */}
<Button variant="link">       {/* promise-blue underline */}
```

No button has colored shadows. No button has rounded corners beyond the base `--radius` (0.5rem).

---

## Photography Direction

**Style:** Documentary candid — never staged, never stock.

**Technical:**
- Shallow depth of field (f/1.4–f/2.8)
- Available/natural light (warm tungsten indoors, overcast outdoors)
- Candid angles (never looking at camera)
- British-diverse subjects (South Asian, Black British, Arab, white British)
- Real settings (mosques, community centres, galas, homes, London streets)

**Never show:**
- Stock handshakes
- People pointing at screens and smiling
- Overhead "team meeting" shots
- Poverty imagery
- Everyone looking at camera

**Generation prompt template:**
```
[Scene description]. [Subject description — ethnicity, age, clothing].
[Setting — location, lighting]. [Camera — lens, f-stop, style].
Shot on [camera], [focal length], f/[aperture], available light.
[Mood]. [Aspect] aspect ratio.
```

### Reference
- `brand/photography/` — 20 generated photos
- `brand/moodboard/01-trust-and-precision.jpg`
- `brand/moodboard/02-community-and-giving.jpg`
- `brand/brand-guide/06-photography-direction.jpg`

---

## Voice & Tone

### Voice (constant)
- **Direct.** Short sentences. No filler.
- **Specific.** Numbers, not vague claims. "60-second pledge flow" not "quick and easy."
- **Empathetic.** We understand the awkwardness. Never shame.
- **Confident.** "We fix that." Not "We can help with that."

### Words We Use
| Use | Don't Use |
|-----|-----------|
| Pledge | Donation (for the promise stage) |
| Campaign | Event (broader than physical events) |
| Pledge link | QR code (QR is one delivery method) |
| Reminder | Chaser, follow-up |
| Conversion | Collection rate |

### Words We Never Use
- "Revolutionary" / "game-changing" / "disruptive"
- "Powered by AI"
- "PNPL" in user-facing copy (internal + bank refs only)
- "Simple" / "easy" (show, don't tell)

---

## Social Templates

- `brand/social-templates/01-og-image.jpg` — Open Graph (link previews)
- `brand/social-templates/02-instagram-square.jpg` — Instagram post
- `brand/social-templates/03-story-template.jpg` — WhatsApp/IG Story
- `brand/social-templates/04-linkedin-banner.jpg` — LinkedIn company page

---

## Icons

Line-only icons, 2px stroke, single brand color per icon:

| Icon | File | Color |
|------|------|-------|
| Pledge/Promise | `brand/icons/01-icon-pledge.jpg` | Midnight |
| WhatsApp/Send | `brand/icons/02-icon-whatsapp.jpg` | Fulfilled Green |
| Gift Aid | `brand/icons/03-icon-gift-aid.jpg` | Promise Blue |
| Zakat | `brand/icons/04-icon-zakat.jpg` | Generosity Gold |
| Dashboard | `brand/icons/05-icon-dashboard.jpg` | Midnight |
| Schedule | `brand/icons/06-icon-schedule.jpg` | Midnight |

---

## CSS Variables

```css
:root {
  --background: 0 0% 100%;           /* white */
  --foreground: 222 47% 11%;         /* midnight */
  --primary: 224 76% 40%;            /* promise-blue */
  --primary-foreground: 0 0% 100%;   /* white */
  --destructive: 0 72% 51%;          /* alert-red */
  --border: 220 13% 91%;             /* gray-200 */
  --radius: 0.5rem;                  /* max corner radius */
}
```

---

## Allowed Animations

Only these — nothing decorative:

| Class | Use |
|-------|-----|
| `animate-fade-up` | Page sections appearing on load |
| `animate-fade-in` | Elements becoming visible |
| `animate-slide-down` | Dropdowns, notifications |
| `animate-shimmer` | Loading skeleton states |
| `animate-counter-roll` | Number counters |
| `stagger-children` | Sequential card reveals |

---

*Brand Guide v1.0 — March 2026*
*When adding a new page or component, re-read this file first.*