From e2295020a142383f1c327f4c812e15b7991bdfd7 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Tue, 3 Mar 2026 20:31:01 +0800 Subject: [PATCH] add brand/ assets to repo + BRAND.md as single source of truth MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BRAND.md: Complete brand guide with code snippets, color tokens, typography scale, logo usage rules, DO/DON'T checklist, photography direction, voice & tone. Every section references its visual asset in brand/. brand/ folder (52 assets): - photography/ (20) — landing page photos - logo/ (6) — lockup, reversed, blue, marks, favicon - color-palette/ (3) — primary, tints, psychology - typography/ (3) — specimen, scale, numbers - moodboard/ (3) — trust, community, editorial - brand-guide/ (7) — cover through UI patterns - social-templates/ (4) — OG, Instagram, Story, LinkedIn - icons/ (6) — pledge, whatsapp, gift-aid, zakat, dashboard, schedule Also fixed: Nav component still had backdrop-blur-lg (last violation) --- pledge-now-pay-later/BRAND.md | 333 ++++++++++++++++++ .../brand/brand-guide/01-cover.jpg | Bin 0 -> 340745 bytes .../brand/brand-guide/02-brand-essence.jpg | Bin 0 -> 463890 bytes .../brand/brand-guide/03-logo-system.jpg | Bin 0 -> 373884 bytes .../brand/brand-guide/04-color-system.jpg | Bin 0 -> 402870 bytes .../brand-guide/05-typography-system.jpg | Bin 0 -> 424956 bytes .../brand-guide/06-photography-direction.jpg | Bin 0 -> 619625 bytes .../brand/brand-guide/07-ui-patterns.jpg | Bin 0 -> 502974 bytes .../color-palette/01-primary-palette.jpg | Bin 0 -> 342647 bytes .../color-palette/02-tints-and-shades.jpg | Bin 0 -> 373263 bytes .../color-palette/03-color-psychology.jpg | Bin 0 -> 409079 bytes .../brand/icons/01-icon-pledge.jpg | Bin 0 -> 135497 bytes .../brand/icons/02-icon-whatsapp.jpg | Bin 0 -> 146281 bytes .../brand/icons/03-icon-gift-aid.jpg | Bin 0 -> 145194 bytes .../brand/icons/04-icon-zakat.jpg | Bin 0 -> 135479 bytes .../brand/icons/05-icon-dashboard.jpg | Bin 0 -> 114228 bytes .../brand/icons/06-icon-schedule.jpg | Bin 0 -> 128934 bytes .../brand/logo/01-lockup-dark-on-white.jpg | Bin 0 -> 135650 bytes .../brand/logo/02-lockup-white-on-dark.jpg | Bin 0 -> 133894 bytes .../brand/logo/03-lockup-blue-mark.jpg | Bin 0 -> 116480 bytes .../brand/logo/04-mark-dark.jpg | Bin 0 -> 241542 bytes .../brand/logo/05-mark-blue.jpg | Bin 0 -> 103891 bytes .../brand/logo/06-favicon.jpg | Bin 0 -> 284498 bytes .../moodboard/01-trust-and-precision.jpg | Bin 0 -> 582736 bytes .../moodboard/02-community-and-giving.jpg | Bin 0 -> 660111 bytes .../moodboard/03-editorial-sharpness.jpg | Bin 0 -> 543824 bytes .../photography/01-main-dashboard-hero.jpg | Bin 0 -> 574565 bytes .../02-main-charity-manager-card.jpg | Bin 0 -> 767001 bytes .../photography/03-main-fundraiser-card.jpg | Bin 0 -> 831526 bytes .../photography/04-main-volunteer-card.jpg | Bin 0 -> 635077 bytes .../brand/photography/05-main-org-card.jpg | Bin 0 -> 756123 bytes .../brand/photography/06-main-pledge-form.jpg | Bin 0 -> 679836 bytes .../photography/07-main-schedule-step.jpg | Bin 0 -> 688159 bytes .../brand/photography/08-charities-hero.jpg | Bin 0 -> 784718 bytes .../09-charities-amount-selection.jpg | Bin 0 -> 794139 bytes .../photography/10-charities-whatsapp.jpg | Bin 0 -> 732843 bytes .../brand/photography/11-fundraisers-hero.jpg | Bin 0 -> 684721 bytes .../photography/12-fundraisers-redirect.jpg | Bin 0 -> 640384 bytes .../photography/13-fundraisers-dashboard.jpg | Bin 0 -> 470170 bytes .../brand/photography/14-volunteers-hero.jpg | Bin 0 -> 675337 bytes .../photography/15-volunteers-phone-stats.jpg | Bin 0 -> 761139 bytes .../photography/16-volunteers-leaderboard.jpg | Bin 0 -> 644918 bytes .../photography/17-orgs-hero-boardroom.jpg | Bin 0 -> 784620 bytes .../brand/photography/18-orgs-pipeline.jpg | Bin 0 -> 710658 bytes .../19-orgs-instalment-schedule.jpg | Bin 0 -> 512097 bytes .../brand/photography/20-orgs-laptop-desk.jpg | Bin 0 -> 674613 bytes .../brand/social-templates/01-og-image.jpg | Bin 0 -> 633140 bytes .../social-templates/02-instagram-square.jpg | Bin 0 -> 424039 bytes .../social-templates/03-story-template.jpg | Bin 0 -> 500048 bytes .../social-templates/04-linkedin-banner.jpg | Bin 0 -> 417186 bytes .../brand/typography/01-typeface-specimen.jpg | Bin 0 -> 375884 bytes .../brand/typography/02-heading-scale.jpg | Bin 0 -> 580248 bytes .../brand/typography/03-numbers-in-brand.jpg | Bin 0 -> 310319 bytes .../src/app/for/_components/index.tsx | 2 +- 54 files changed, 334 insertions(+), 1 deletion(-) create mode 100644 pledge-now-pay-later/BRAND.md create mode 100644 pledge-now-pay-later/brand/brand-guide/01-cover.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/02-brand-essence.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/03-logo-system.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/04-color-system.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/05-typography-system.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/06-photography-direction.jpg create mode 100644 pledge-now-pay-later/brand/brand-guide/07-ui-patterns.jpg create mode 100644 pledge-now-pay-later/brand/color-palette/01-primary-palette.jpg create mode 100644 pledge-now-pay-later/brand/color-palette/02-tints-and-shades.jpg create mode 100644 pledge-now-pay-later/brand/color-palette/03-color-psychology.jpg create mode 100644 pledge-now-pay-later/brand/icons/01-icon-pledge.jpg create mode 100644 pledge-now-pay-later/brand/icons/02-icon-whatsapp.jpg create mode 100644 pledge-now-pay-later/brand/icons/03-icon-gift-aid.jpg create mode 100644 pledge-now-pay-later/brand/icons/04-icon-zakat.jpg create mode 100644 pledge-now-pay-later/brand/icons/05-icon-dashboard.jpg create mode 100644 pledge-now-pay-later/brand/icons/06-icon-schedule.jpg create mode 100644 pledge-now-pay-later/brand/logo/01-lockup-dark-on-white.jpg create mode 100644 pledge-now-pay-later/brand/logo/02-lockup-white-on-dark.jpg create mode 100644 pledge-now-pay-later/brand/logo/03-lockup-blue-mark.jpg create mode 100644 pledge-now-pay-later/brand/logo/04-mark-dark.jpg create mode 100644 pledge-now-pay-later/brand/logo/05-mark-blue.jpg create mode 100644 pledge-now-pay-later/brand/logo/06-favicon.jpg create mode 100644 pledge-now-pay-later/brand/moodboard/01-trust-and-precision.jpg create mode 100644 pledge-now-pay-later/brand/moodboard/02-community-and-giving.jpg create mode 100644 pledge-now-pay-later/brand/moodboard/03-editorial-sharpness.jpg create mode 100644 pledge-now-pay-later/brand/photography/01-main-dashboard-hero.jpg create mode 100644 pledge-now-pay-later/brand/photography/02-main-charity-manager-card.jpg create mode 100644 pledge-now-pay-later/brand/photography/03-main-fundraiser-card.jpg create mode 100644 pledge-now-pay-later/brand/photography/04-main-volunteer-card.jpg create mode 100644 pledge-now-pay-later/brand/photography/05-main-org-card.jpg create mode 100644 pledge-now-pay-later/brand/photography/06-main-pledge-form.jpg create mode 100644 pledge-now-pay-later/brand/photography/07-main-schedule-step.jpg create mode 100644 pledge-now-pay-later/brand/photography/08-charities-hero.jpg create mode 100644 pledge-now-pay-later/brand/photography/09-charities-amount-selection.jpg create mode 100644 pledge-now-pay-later/brand/photography/10-charities-whatsapp.jpg create mode 100644 pledge-now-pay-later/brand/photography/11-fundraisers-hero.jpg create mode 100644 pledge-now-pay-later/brand/photography/12-fundraisers-redirect.jpg create mode 100644 pledge-now-pay-later/brand/photography/13-fundraisers-dashboard.jpg create mode 100644 pledge-now-pay-later/brand/photography/14-volunteers-hero.jpg create mode 100644 pledge-now-pay-later/brand/photography/15-volunteers-phone-stats.jpg create mode 100644 pledge-now-pay-later/brand/photography/16-volunteers-leaderboard.jpg create mode 100644 pledge-now-pay-later/brand/photography/17-orgs-hero-boardroom.jpg create mode 100644 pledge-now-pay-later/brand/photography/18-orgs-pipeline.jpg create mode 100644 pledge-now-pay-later/brand/photography/19-orgs-instalment-schedule.jpg create mode 100644 pledge-now-pay-later/brand/photography/20-orgs-laptop-desk.jpg create mode 100644 pledge-now-pay-later/brand/social-templates/01-og-image.jpg create mode 100644 pledge-now-pay-later/brand/social-templates/02-instagram-square.jpg create mode 100644 pledge-now-pay-later/brand/social-templates/03-story-template.jpg create mode 100644 pledge-now-pay-later/brand/social-templates/04-linkedin-banner.jpg create mode 100644 pledge-now-pay-later/brand/typography/01-typeface-specimen.jpg create mode 100644 pledge-now-pay-later/brand/typography/02-heading-scale.jpg create mode 100644 pledge-now-pay-later/brand/typography/03-numbers-in-brand.jpg diff --git a/pledge-now-pay-later/BRAND.md b/pledge-now-pay-later/BRAND.md new file mode 100644 index 0000000..f9da4bf --- /dev/null +++ b/pledge-now-pay-later/BRAND.md @@ -0,0 +1,333 @@ +# 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 +

01

+``` + +### 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 */} +
+ P +
+ +{/* With wordmark */} +
+
+ P +
+ Pledge Now, Pay Later +
+``` + +### 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 +
+

Feature name

+

Description text

+
+``` + +**2. Gap-Px Grid** +```jsx +
+
Cell 1
+
Cell 2
+
Cell 3
+
+``` + +**3. Dark Inversion** +```jsx +
+

Key stat or CTA

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