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:

<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.

{/* 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

<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

<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

<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

<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

: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.