# Onboarding Pack Branding Guide
**Date:** Feb 15 2026
**Purpose:** Visual and messaging standards for the worker onboarding pack PDF

---

## Logo Usage

### Primary Logo
**File:** `rateright-r-logo.png` (111KB)
- **Placement:** Top of first page, center or left-aligned
- **Size:** 40-60px height on PDF
- **Clear space:** Minimum 20px margin around logo

### Alternative Logos
- **Square black:** `rateright-square-black.png` — use on light backgrounds
- **Square white:** `rateright-square-white.png` — use on dark backgrounds (if any)

### Logo Location
Files are in:
- `/home/ccuser/the-50-dollar-app/public/logos/` (Builder's workspace)
- `/home/ccuser/rateright-growth/rivet/assets/` (Rivet's workspace)

---

## Color Palette

### Primary Colors
| Color | Hex | Usage |
|-------|-----|-------|
| RateRight Green | #4CAF50 | Headers, buttons, accents |
| Dark Grey | #333333 | Body text |
| Medium Grey | #666666 | Secondary text, labels |
| Light Grey | #F5F5F5 | Backgrounds, dividers |
| White | #FFFFFF | Main background |

### Accent Colors
| Color | Hex | Usage |
|-------|-----|-------|
| Success Green | #2E7D32 | Completed sections, checkmarks |
| Warning Orange | #FF9800 | Required fields, alerts |
| Error Red | #D32F2F | Validation errors |
| Blue | #2196F3 | Links, interactive elements |

---

## Typography

### Fonts
- **Headings:** System sans-serif (Inter, Roboto, or Arial) — Bold
- **Body:** System sans-serif — Regular
- **Labels:** System sans-serif — Medium weight

### Hierarchy
| Element | Size | Weight | Color |
|---------|------|--------|-------|
| Page Title | 24px | Bold | #4CAF50 |
| Section Headers | 18px | Bold | #333333 |
| Subsections | 14px | Semibold | #666666 |
| Body Text | 12px | Regular | #333333 |
| Labels | 11px | Medium | #666666 |
| Small Print | 10px | Regular | #666666 |

---

## Page Layout

### Header (Every Page)
```
[RateRight Logo]                    Page X of Y
RateRight Pty Ltd                   Date: DD/MM/YYYY
```

### Footer (Every Page)
```
Worker Onboarding Pack | worker@rateright.com.au | www.rateright.com.au
Fill it once, use it everywhere.
```

### First Page Layout
1. **Logo** (top center)
2. **Title:** "Worker Onboarding Pack"
3. **Subtitle:** "Complete this pack once, use it for every job"
4. **Worker Name:** [Pre-filled from profile]
5. **Instructions box** (light grey background)
6. **Section 1:** Personal Details

### Section Pages
Each section gets its own page or pages:
- Section 1: Personal Details
- Section 2: Tax & Banking (ABN path only)
- Section 3: Certifications & Licences
- Section 4: Emergency Contact
- Section 5: Signature & Date

---

## Key Messaging

### Primary Tagline
**"Fill it once, use it everywhere."**

### Secondary Messages
- "Your information stays private. We never store your bank details or TFN."
- "Download this pack and send it to any contractor when you start a new job."
- "Questions? Email support@rateright.com.au"

### Call-to-Action Buttons (if digital)
- **Primary:** "Download PDF" (green button)
- **Secondary:** "Save to Phone" (grey button)
- **Help:** "Need help?" (text link)

---

## Form Field Styling

### Input Fields
- **Border:** 1px solid #CCCCCC
- **Border radius:** 4px
- **Padding:** 8px 12px
- **Background:** #FFFFFF
- **Text:** #333333, 12px

### Labels
- **Position:** Above field
- **Style:** 11px, medium weight, #666666
- **Required indicator:** Red asterisk (*)

### Checkboxes
- **Style:** Standard checkbox
- **Label:** 12px, regular, #333333

---

## Privacy & Trust Elements

### Privacy Notice Box
**Placement:** Prominent on first page and Section 2 (Tax/Banking)
**Style:** Light green background (#E8F5E9), left border 4px #4CAF50
**Text:**
> "Your privacy matters. RateRight never stores your TFN, bank details, or super information. This data is only included in your downloadable PDF for you to share with contractors as needed."

### Data Handling Icons
- 🔒 Lock icon for sensitive fields
- ✅ Checkmark for verified fields
- 📄 Document icon for certifications

---

## Mobile Optimization

Since workers will view this on phones:
- **Field size:** Minimum 44px touch targets
- **Font size:** Minimum 11px (readable on mobile)
- **Margins:** 20px minimum for readability
- **Page breaks:** Avoid breaking forms across pages

---

## Implementation Notes for Builder

### pdf-lib Requirements
- Use standard fonts (Helvetica, Times Roman) for compatibility
- Embed logo as PNG image
- Create form fields for editable PDF option
- Add metadata: Author="RateRight", Title="Worker Onboarding Pack"

### File Naming
Suggested pattern: `RateRight-Onboarding-{WorkerName}-{YYYYMMDD}.pdf`

Example: `RateRight-Onboarding-Michael-McLoughlin-20260215.pdf`

---

## Sample Layout (Text Representation)

```
┌─────────────────────────────────────────┐
│        [RateRight Logo]                 │
│                                         │
│    WORKER ONBOARDING PACK               │
│    Fill it once, use it everywhere      │
│                                         │
│    Worker: Michael McLoughlin           │
│    Date: 15/02/2026                     │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  ℹ️  Complete this pack once,   │   │
│  │     download the PDF, and send  │   │
│  │     it to any new contractor.   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  SECTION 1: PERSONAL DETAILS            │
│  ─────────────────────────────          │
│                                         │
│  Full Name: _______________________     │
│                                         │
│  Phone: ___________________________     │
│                                         │
│  Email: ___________________________     │
│                                         │
│  [🔒 Privacy Notice Box]                │
│                                         │
│  Page 1 of 5          Date: 15/02/2026  │
└─────────────────────────────────────────┘
```

---

**For Builder Implementation:** See full onboarding pack spec at `/home/ccuser/rateright-growth/rivet/memory/plans/onboarding-pack-spec-v3-builder.md`