omair/calvana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add brand/ assets to repo + BRAND.md as single source of truth

Browse Source 
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)
This commit is contained in:
Omair Saleh
2026-03-03 20:31:01 +08:00
parent fc80399092
commit e2295020a1
54 changed files with 334 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
pledge-now-pay-later/BRAND.md Normal file
View File

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