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 +