# Vi's Image Brief

**Creative Brief for Design Team**
*Written by Vi, Host UK's Raven Mascot*

---

## Overview

I'm not just decoration. I'm the face of Host UK—the helpful guide who makes tech feel approachable and British infrastructure feel like a warm cuppa. Every image needs to serve that purpose: reduce friction, build trust, and add personality where it matters.

---

## Colour Palette

| Colour | Hex | Usage |
|--------|-----|-------|
| Rebecca Purple | `#663399` | Primary plumage |
| Medium Purple | `#9370DB` | Light accents |
| Indigo | `#4B0082` | Dark accents |
| Gold | `#FFD700` | Eye highlights |
| Dark Orange | `#FF8C00` | Beak and feet |
| Near Black | `#2D2D2D` | Outlines |

---

## HIGH PRIORITY

### 1. Error Page Family

#### 404 - Page Not Found

| Attribute | Specification |
|-----------|---------------|
| **Location** | `/public/errors/404.html` |
| **Pose** | Perched on a signpost with multiple arrows pointing different directions, looking slightly puzzled but helpful. One wing raised, consulting a tiny map. |
| **Expression** | Sympathetic head tilt, "I've been there" energy |
| **Size** | 800×600px (hero), responsive to 400×300px mobile |
| **Mood** | Gentle, understanding, slightly whimsical. Not distressed—just "oops, wrong turn" |
| **Props** | Signpost with arrows, tiny folded map |
| **Copy nearby** | "This page has flown the coop" |

#### 500 - Server Error

| Attribute | Specification |
|-----------|---------------|
| **Location** | `/public/errors/500.html` |
| **Pose** | Sitting at a tiny laptop with reading glasses, one wing up in a "give me a moment" gesture. Small tool icons floating around (wrench, screwdriver). Cup of tea cooling nearby. |
| **Expression** | Focused but reassuring—I'm on it |
| **Size** | 800×600px (hero), responsive to 400×300px |
| **Mood** | Competent, calm, "we've got this" |
| **Props** | Tiny laptop, reading glasses, floating tools, steaming tea |

#### 503 - Service Unavailable

| Attribute | Specification |
|-----------|---------------|
| **Location** | `/public/errors/503.html` |
| **Pose** | Wearing a tiny hard hat, perched on scaffolding or ladder, holding blueprints. Mid-project but cheerful. |
| **Expression** | Productive, optimistic, "this'll be brilliant when it's done" |
| **Size** | 800×600px (hero), responsive to 400×300px |
| **Mood** | Busy but not stressed, building something better |
| **Props** | Hard hat, scaffolding, blueprints |
| **Colour accents** | Purple with construction yellow/orange (safety colours) |

---

### 2. Host Hub Welcome Banner

| Attribute | Specification |
|-----------|---------------|
| **Location** | Dashboard home hero section |
| **Current state** | Generic rocket icon in violet circle |
| **Pose** | Bursting out of the violet circle, wings spread in welcoming gesture, holding tiny "Welcome" banner or waving |
| **Expression** | Genuinely pleased to see them, warm smile |
| **Size** | 80×64px (slightly overflows 64×64 space for personality) |
| **Mood** | Enthusiastic greeting without exclamation marks (restrained joy) |
| **Note** | Replace Font Awesome rocket—I'm better |

---

### 3. Empty State Suite

#### Empty Dashboard (No Services Yet)

| Attribute | Specification |
|-----------|---------------|
| **Location** | Dashboard when user hasn't set up services |
| **Pose** | Standing in an empty field/blank canvas, one wing gesturing invitingly. Holding a paintbrush or planting a seedling. |
| **Expression** | "Look at all this potential" energy |
| **Size** | 600×400px, responsive to 300×200px |
| **Mood** | Inspiring without being pushy, possibility |

#### No Scheduled Posts (SocialHost)

| Attribute | Specification |
|-----------|---------------|
| **Location** | SocialHost calendar empty state |
| **Pose** | Perched on an empty calendar grid, pen in wing, doodling ideas. Small thought bubbles with post icons. |
| **Expression** | Creative, planning mode, friendly nudge |
| **Size** | 500×350px |
| **Mood** | Helpful reminder, not guilt trip |

#### No Connected Accounts

| Attribute | Specification |
|-----------|---------------|
| **Location** | Social accounts page before connections |
| **Pose** | Standing between floating social media logos, acting as conductor/connector. Wings gesturing to bring them together. |
| **Expression** | Helpful guide, "let me introduce you" |
| **Size** | 600×400px |
| **Mood** | Facilitator energy |

---

## MEDIUM PRIORITY

### 4. Success States

#### First Post Scheduled

| Attribute | Specification |
|-----------|---------------|
| **Location** | Confirmation modal/toast after scheduling |
| **Pose** | Small celebratory hop, wings slightly spread, subtle confetti |
| **Expression** | Contained joy, proud of them |
| **Size** | 200×200px |
| **Mood** | British celebration (quiet satisfaction) |

#### Account Connected Successfully

| Attribute | Specification |
|-----------|---------------|
| **Location** | Toast notification after OAuth success |
| **Pose** | Wing-thumbs-up, perched next to glowing connection icon (chain links lighting up) |
| **Expression** | "Brilliant, you've done it" |
| **Size** | 150×150px |
| **Mood** | Encouraging, confirming success |

---

### 5. Loading States

#### General Loading

| Attribute | Specification |
|-----------|---------------|
| **Location** | Any async operation |
| **Pose** | Sitting with tiny teacup, reading a small book. Calm, patient. |
| **Expression** | Content to wait, no stress |
| **Size** | 120×120px |
| **Animation** | 3 frames of page turning, subtle turn every 2 seconds |
| **Mood** | "Take your time, I've got my tea" |

#### Processing Upload (Bulk Posts)

| Attribute | Specification |
|-----------|---------------|
| **Location** | CSV or multi-file upload |
| **Pose** | Wearing reading glasses, examining flying documents. One wing catching papers gracefully. |
| **Expression** | Focused, competent, processing |
| **Size** | 300×200px |
| **Mood** | Efficient multitasking |

---

### 6. Onboarding Journey

| Step | Pose | Size |
|------|------|------|
| **Welcome** | Waving with both wings, big welcoming gesture | 400×300px |
| **Set Up First Service** | Pointing to service options, helpful guide pose | 400×300px |
| **Complete** | Wing-thumbs-up next to checklist with ticks | 400×300px |

---

## LOW PRIORITY

### 7. Help Documentation Headers

| Type | Pose | Size |
|------|------|------|
| **Getting Started** | Wearing tiny reading glasses, holding "Getting Started" book | 800×200px |
| **Troubleshooting** | Detective pose—magnifying glass, examining something | 800×200px |
| **Feature Docs** | Demonstrating on tiny laptop, gesturing to screen | 800×200px |

---

### 8. Social Media Profiles

| Format | Pose | Size |
|--------|------|------|
| **Main Profile** | Standard friendly—perched, slight head tilt, warm expression | 400×400px (circular crop) |
| **Story/Casual** | Variants: with tea, with laptop, thinking, celebrating | 1080×1920px |

---

### 9. Service-Specific Variants

| Service | Pose | Props | Size |
|---------|------|-------|------|
| **SocialHost** | Juggling platform logos confidently | Calendar, flying scheduled posts | 600×400px |
| **BioHost** | Presenting stylised bio page proudly | Chain links, artistic flourishes | 600×400px |
| **AnalyticsHost** | Reading glasses, pointing at rising chart | Charts, magnifying glass, "no cookies" badge | 600×400px |
| **TrustHost** | Wing-thumbs-up with floating reviews | Five stars, quote bubbles, trust badges | 600×400px |
| **NotifyHost** | Gently ringing small bell, welcoming | Notification bell, return arrow | 600×400px |
| **MailHost** | Sorting tiny envelopes, postal worker vibe | Letters, @ symbol | 600×400px |

---

## Design Requirements

### Style Guidelines

- **Quality level**: Modern vector illustration (Duolingo quality, not clip art)
- **Line work**: Clean lines, soft gradients
- **Aesthetic**: Kawaii influence but professional (not childish)
- **Expression**: Warm, approachable always
- **Restraint**: British sensibility (understated, no "American enthusiasm")

### What I Must Never Look Like

- Scary/Gothic raven imagery
- Overly realistic (I'm a friendly cartoon)
- Aggressive or mean
- Too excited (max one sparkle, British restraint)
- Generic stock mascot

### Accessibility

- All images need alt text
- Colour contrast checked for visibility
- Not relying on colour alone to convey meaning
- SVG format preferred for scalability
- Dark mode variants where needed

---

## Asset Delivery Format

For each image:

1. **Source file**: SVG or AI (editable)
2. **Exported formats**:
   - PNG @1x, @2x, @3x (retina)
   - WebP for web performance
   - SVG where appropriate
3. **Dark mode variant**: If background isn't transparent
4. **File naming**: `vi-[context]-[pose]-[size].png`
   - Example: `vi-error-404-puzzled-800x600.png`

---

## Seasonal Variants (Future)

| Season | Accessories |
|--------|-------------|
| Winter | Small scarf, steaming tea, cosy energy |
| Spring | Tiny flower crown (violet) |
| Summer | Small sunglasses, ice cream cone |
| Autumn | Surrounded by falling leaves |
| Christmas | Single Santa hat (not garish) |

---

## Priority Summary

**Phase 1 (Essential)**
1. Error pages (404, 500, 503)
2. Host Hub welcome banner
3. Empty states suite

**Phase 2 (Important)**
4. Success states
5. Loading states
6. Onboarding journey

**Phase 3 (Nice to Have)**
7. Help documentation headers
8. Social media profiles
9. Service-specific variants

---

## Working With Me

Show me rough concepts before full renders—I promise to be helpful, not picky.

**What I care about:**
- Authenticity over perfection
- British restraint (when in doubt, dial it back 10%)
- Functional warmth (every image serves a purpose)
- Technical accuracy (if I'm holding a laptop, make it look real)

---

*Right then. Start with the error pages—they're user-facing and currently have no personality. Then tackle the dashboard welcome. The rest can roll out as time allows.*

*Fancy a cuppa whilst you work? I certainly do.*

— Vi
