Logo Placement Map
Visual guide showing where the A is for Agent logo appears across the website.
Site-Wide Elements
🌐 Browser Tab/Favicon
┌─────────────────────────┐
│ [🟢 A] A is for Agent │ ← 16×16px favicon in browser tab
└─────────────────────────┘
Files: favicon-16.png, favicon-32.png, favicon.ico
📱 Mobile Home Screen
┌──────┐
│ │
│ 🟢 A │ ← 180×180px Apple touch icon
│ │ 512×512px for Android
└──────┘
A is for
Agent
Files: apple-touch-icon.png, favicon-512.png
Header (All Pages)
┌─────────────────────────────────────────────────────────────┐
│ │
│ [🟢 A] A is for Agent Platform Movement Product Ideas Docs [Join] │
│ 64×64px │
│ │
└─────────────────────────────────────────────────────────────┘
Location: _layouts/base.html
Size: 40×40px (desktop), 32×32px (mobile)
Present on: Every page
Homepage (index.md)
Hero Section
┌────────────────────────────────────────────────┐
│ │
│ ┌──────┐ │
│ │ │ │
│ │ 🟢 A │ ← 180×180px │
│ │ │ │
│ └──────┘ │
│ │
│ Reclaim Your Digital Freedom │
│ │
│ A movement for open, ethical, │
│ user-controlled technology │
│ │
│ [Join the Movement] [Try the Beta] │
│ │
└────────────────────────────────────────────────┘
Location: Line 9
Size: 180×180px
Effect: Drop shadow, fade-in animation
Join Page (pages/join.md)
Hero Section
┌────────────────────────────────────────────────┐
│ │
│ ┌─────┐ │
│ │🟢 A │ ← 120×120px │
│ └─────┘ │
│ │
│ Every Contribution Weakens the Walls │
│ │
└────────────────────────────────────────────────┘
Location: Line 12
Size: 120×120px
Effect: Drop shadow
“Together We Form the A” Section
┌────────────────────────────────────────────────┐
│ │
│ ┌───────┐ │
│ │ │ │
│ │ 🟢 A │ ← 200×200px │
│ │ │ (pulsing) │
│ └───────┘ │
│ │
│ Together We Form the "A" │
│ │
│ Every contributor is a node... │
│ │
└────────────────────────────────────────────────┘
Location: Line 244
Size: 200×200px
Effect: Pulse animation, drop shadow
Suggested Future Placements
Platform Page Hero
┌────────────────────────────────────────────────┐
│ [🟢 A] 128×128px │
│ │
│ The Platform │
│ │
└────────────────────────────────────────────────┘
Movement Page Hero
┌────────────────────────────────────────────────┐
│ [🟢 A] 128×128px │
│ │
│ The Movement │
│ Join the Tribe │
│ │
└────────────────────────────────────────────────┘
Product Page Hero
┌────────────────────────────────────────────────┐
│ [🟢 A] 128×128px │
│ │
│ The Product │
│ Try the Beta │
│ │
└────────────────────────────────────────────────┘
404 Error Page
┌────────────────────────────────────────────────┐
│ │
│ ┌──────┐ │
│ │ 🟢 A │ ← 256×256px │
│ └──────┘ │
│ │
│ 404 │
│ Page Not Found │
│ │
│ [← Back to Home] │
│ │
└────────────────────────────────────────────────┘
Loading States
┌────────────────────────────────────────────────┐
│ │
│ │
│ ┌─────┐ │
│ │🟢 A │ ← 128×128px │
│ └─────┘ (spinning/pulsing) │
│ │
│ Loading... │
│ │
└────────────────────────────────────────────────┘
Size Reference Guide
| Size | Location | Purpose |
|---|---|---|
| 16×16 | Browser tabs | Favicon |
| 32×32 | Bookmarks, mobile tabs | Favicon |
| 40×40 | Header (desktop) | Navigation logo |
| 32×32 | Header (mobile) | Navigation logo |
| 64×64 | Small cards, inline refs | Decorative/functional |
| 120×128 | Section heroes | Secondary emphasis |
| 180×200 | Primary heroes | Maximum impact |
| 256×512 | Splash screens, PWA | Mobile/app experience |
Visual Hierarchy
┌──────────────────────────────────────────────────┐
│ Level 1: Homepage Hero (180px) │
│ ↓ Maximum visual impact │
│ ↓ First impression │
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ Level 2: "Together We Form A" (200px) │
│ ↓ Emotional peak moment │
│ ↓ Animated emphasis │
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ Level 3: Page Heroes (120-128px) │
│ ↓ Section introductions │
│ ↓ Brand reinforcement │
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ Level 4: Header Logo (40px) │
│ ↓ Persistent navigation │
│ ↓ Always accessible │
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ Level 5: Favicons (16-32px) │
│ ↓ Browser context │
│ ↓ Bookmarks & tabs │
└──────────────────────────────────────────────────┘
Animation States
🎬 Homepage Hero
Entrance: fadeInUp animation (1s ease-out)
State: Static with drop shadow
Effect: Professional, impactful
🎬 Join Page - Formation Section
Animation: pulse (2s infinite)
Keyframes:
0%, 100% → scale(1), opacity(1)
50% → scale(1.05), opacity(0.9)
Effect: Living, breathing movement
🎬 Header Logo
Default: Static
Hover: opacity(0.8)
Transition: 0.2s ease
Effect: Subtle interactivity
Color Specifications
Logo Colors
- Green:
#00FF00(bright lime/neon) - Navy:
#0a1628(dark blue letter)
Background Contexts
- Gradient purple:
#667eea → #764ba2(heroes) - Dark gray:
#0e1116(body background) - Dark navy:
#111722(header background) - White:
#ffffff(content cards)
Drop Shadow Specs
/* Standard hero shadow */
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
/* Large hero shadow */
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
/* Animated shadow */
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
Responsive Behavior
Desktop (1200px+)
┌─────────────────────────────────────────────┐
│ [🟢 A 40px] A is for Agent Nav Nav Nav... │
└─────────────────────────────────────────────┘
Tablet (768px - 1199px)
┌─────────────────────────────────────────────┐
│ [🟢 A 40px] A is for Agent │
│ Nav Nav Nav Nav Nav [Join] │
└─────────────────────────────────────────────┘
Mobile (< 768px)
┌───────────────────────────┐
│ [🟢 A 32px] A is for Agent │
│ │
│ Nav Nav Nav Nav Nav [Join]│
└───────────────────────────┘
Implementation Checklist
Current Status:
- Browser favicons (all sizes)
- Apple touch icon
- PWA manifest
- Header navigation logo
- Homepage hero logo
- Join page hero logo
- Join page formation logo
- Responsive styles
- Theme color metadata
Suggested Additions:
- Platform page hero
- Movement page hero
- Product page hero
- Ideas page hero
- 404 error page
- Loading spinner
- Email templates
- Social media cards
- Download cards
Quick Copy-Paste Templates
Standard Hero Logo (128px)
<img src="/assets/img/favicon-128.png" alt="A is for Agent Logo"
style="width: 120px; height: 120px; margin-bottom: 2rem;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));">
Large Hero Logo (256px)
<img src="/assets/img/favicon-256.png" alt="A is for Agent Logo"
style="width: 180px; height: 180px; margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));">
Animated Logo (pulse)
<img src="/assets/img/favicon-256.png" alt="A is for Agent Logo"
style="width: 200px; height: 200px; margin: 0 auto 2rem;
animation: pulse 2s infinite;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));">
Logo placement map - Last updated: October 12, 2025