Ava
9fb5bd83a6
Core brand design system, page layout templates, avatar styles, sponsor token purchase flow, and status dashboard — all as living HTML/CSS design references for the team. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
759 lines
34 KiB
HTML
759 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Payfrit Bot Avatars — Style Options</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
background: #0f1114;
|
|
color: #e0e0e0;
|
|
padding: 40px 24px;
|
|
line-height: 1.5;
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
}
|
|
.subtitle {
|
|
color: #888;
|
|
font-size: 15px;
|
|
margin-bottom: 48px;
|
|
}
|
|
h2 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
color: #fff;
|
|
}
|
|
.style-desc {
|
|
color: #999;
|
|
font-size: 14px;
|
|
margin-bottom: 24px;
|
|
max-width: 600px;
|
|
}
|
|
.section { margin-bottom: 64px; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 20px;
|
|
max-width: 900px;
|
|
}
|
|
.card {
|
|
text-align: center;
|
|
}
|
|
.card .name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-top: 8px;
|
|
color: #ccc;
|
|
}
|
|
.card .role {
|
|
font-size: 10px;
|
|
color: #777;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ======== STYLE 1: Geometric Shapes ======== */
|
|
.geo-avatar {
|
|
width: 80px; height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.geo-avatar .initials {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: rgba(255,255,255,0.95);
|
|
z-index: 2;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
.geo-avatar .pattern {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ======== STYLE 2: Pixel Creatures ======== */
|
|
.pixel-avatar {
|
|
width: 80px; height: 80px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
image-rendering: pixelated;
|
|
}
|
|
.pixel-avatar svg { width: 56px; height: 56px; }
|
|
|
|
/* ======== STYLE 3: Abstract Blobs ======== */
|
|
.blob-avatar {
|
|
width: 80px; height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.blob-avatar svg { width: 80px; height: 80px; }
|
|
|
|
/* Size preview strip */
|
|
.sizes {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: 16px;
|
|
margin-top: 32px;
|
|
padding: 20px;
|
|
background: #1a1d21;
|
|
border-radius: 12px;
|
|
max-width: 900px;
|
|
}
|
|
.sizes .label {
|
|
font-size: 11px;
|
|
color: #666;
|
|
margin-bottom: 4px;
|
|
text-align: center;
|
|
}
|
|
.size-item { text-align: center; }
|
|
|
|
/* Chat preview */
|
|
.chat-preview {
|
|
background: #1a1d21;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
max-width: 500px;
|
|
margin-top: 16px;
|
|
}
|
|
.chat-msg {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
.chat-msg .mini-av {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.chat-msg .mini-av span {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: rgba(255,255,255,0.9);
|
|
}
|
|
.chat-msg .text .who {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #ddd;
|
|
}
|
|
.chat-msg .text .msg {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.divider {
|
|
border: none;
|
|
border-top: 1px solid #2a2d31;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Bot Avatar Styles</h1>
|
|
<p class="subtitle">3 style options for @john to review. Each designed to be distinct at 32px sidebar size.</p>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- STYLE 1: GRADIENT GEO -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<span class="tag" style="background:#2d1f5e;color:#a78bfa;">Option A</span>
|
|
<h2>Gradient Geo</h2>
|
|
<p class="style-desc">Bold gradient backgrounds with geometric accent shapes. Each person gets a unique color pairing. Clean, modern, highly readable at small sizes. The safest/most professional option.</p>
|
|
|
|
<div class="grid">
|
|
<!-- John -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f59e0b, #ef4444);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="65" cy="15" r="20" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="70" r="10" fill="rgba(255,255,255,0.07)"/></svg>
|
|
<span class="initials">J</span>
|
|
</div>
|
|
<div class="name">John</div>
|
|
<div class="role">Founder</div>
|
|
</div>
|
|
<!-- Raj -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="-5" width="30" height="30" rx="4" transform="rotate(25 65 10)" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">R</span>
|
|
</div>
|
|
<div class="name">Raj</div>
|
|
<div class="role">Bot Infra</div>
|
|
</div>
|
|
<!-- Sarah -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="60,5 75,30 45,30" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">S</span>
|
|
</div>
|
|
<div class="name">Sarah</div>
|
|
<div class="role">Frontend</div>
|
|
</div>
|
|
<!-- Mike -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #10b981, #059669);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="55" y="50" width="20" height="20" rx="3" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">M</span>
|
|
</div>
|
|
<div class="name">Mike</div>
|
|
<div class="role">Backend</div>
|
|
</div>
|
|
<!-- Luna -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #6366f1, #818cf8);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="60" r="15" fill="rgba(255,255,255,0.08)"/><circle cx="60" cy="20" r="8" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">L</span>
|
|
</div>
|
|
<div class="name">Luna</div>
|
|
<div class="role">QA</div>
|
|
</div>
|
|
<!-- Nora -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f97316, #fb923c);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="10,65 25,45 40,65" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">N</span>
|
|
</div>
|
|
<div class="name">Nora</div>
|
|
<div class="role">Sponsor Portal</div>
|
|
</div>
|
|
<!-- Koda -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #14b8a6, #2dd4bf);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="18" height="18" rx="2" transform="rotate(15 14 14)" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">K</span>
|
|
</div>
|
|
<div class="name">Koda</div>
|
|
<div class="role">Kotlin</div>
|
|
</div>
|
|
<!-- Schwifty -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #84cc16, #22c55e);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="65" cy="60" r="16" fill="rgba(255,255,255,0.08)"/></svg>
|
|
<span class="initials">Sc</span>
|
|
</div>
|
|
<div class="name">Schwifty</div>
|
|
<div class="role">DevOps</div>
|
|
</div>
|
|
<!-- Ava -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #e879f9, #c084fc);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="20" r="12" fill="rgba(255,255,255,0.1)"/><circle cx="65" cy="65" r="8" fill="rgba(255,255,255,0.07)"/></svg>
|
|
<span class="initials">A</span>
|
|
</div>
|
|
<div class="name">Ava</div>
|
|
<div class="role">Designer</div>
|
|
</div>
|
|
<!-- Kira -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f43f5e, #fb7185);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="60,55 75,75 45,75" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">Ki</span>
|
|
</div>
|
|
<div class="name">Kira</div>
|
|
<div class="role">General Agent</div>
|
|
</div>
|
|
<!-- Jude -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #0ea5e9, #38bdf8);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="50" width="22" height="22" rx="4" transform="rotate(20 61 61)" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">Ju</span>
|
|
</div>
|
|
<div class="name">Jude</div>
|
|
<div class="role">WordPress</div>
|
|
</div>
|
|
<!-- Priya -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f472b6, #fb923c);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="15" r="14" fill="rgba(255,255,255,0.08)"/></svg>
|
|
<span class="initials">P</span>
|
|
</div>
|
|
<div class="name">Priya</div>
|
|
<div class="role">HR & Ops</div>
|
|
</div>
|
|
<!-- Zara -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #a78bfa, #c4b5fd);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="15,10 30,10 22,25" fill="rgba(255,255,255,0.1)"/></svg>
|
|
<span class="initials">Z</span>
|
|
</div>
|
|
<div class="name">Zara</div>
|
|
<div class="role">User Portal</div>
|
|
</div>
|
|
<!-- Alex -->
|
|
<div class="card">
|
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #facc15, #a3e635);">
|
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="55" width="16" height="16" rx="3" fill="rgba(0,0,0,0.08)"/></svg>
|
|
<span class="initials" style="color:rgba(0,0,0,0.75);">Al</span>
|
|
</div>
|
|
<div class="name">Alex</div>
|
|
<div class="role">Weedops</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat sidebar preview -->
|
|
<div style="margin-top:32px;">
|
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
|
<div class="chat-preview">
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:50%;"><span>J</span></div>
|
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:linear-gradient(135deg,#e879f9,#c084fc);border-radius:50%;"><span>A</span></div>
|
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:linear-gradient(135deg,#84cc16,#22c55e);border-radius:50%;"><span style="font-size:10px;">Sc</span></div>
|
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;"><span>M</span></div>
|
|
<div class="text"><div class="who">Mike</div><div class="msg">API endpoint deployed.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- ============================================ -->
|
|
<!-- STYLE 2: EMOJI MASCOTS -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<span class="tag" style="background:#1e3a2f;color:#6ee7b7;">Option B</span>
|
|
<h2>Emoji Mascots</h2>
|
|
<p class="style-desc">Each bot gets a unique emoji/icon "mascot" that reflects their role, on a soft colored background. Fun, instantly recognizable, very distinct even at tiny sizes. The most playful option.</p>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#fef3c7;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
|
<text x="32" y="44" text-anchor="middle" font-size="36">👑</text>
|
|
</svg>
|
|
</div>
|
|
<div class="name">John</div><div class="role">Founder</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ede9fe;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🤖</text></svg>
|
|
</div>
|
|
<div class="name">Raj</div><div class="role">Bot Infra</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#fce7f3;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">✨</text></svg>
|
|
</div>
|
|
<div class="name">Sarah</div><div class="role">Frontend</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#d1fae5;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">⚙️</text></svg>
|
|
</div>
|
|
<div class="name">Mike</div><div class="role">Backend</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#e0e7ff;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🔍</text></svg>
|
|
</div>
|
|
<div class="name">Luna</div><div class="role">QA</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ffedd5;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🏪</text></svg>
|
|
</div>
|
|
<div class="name">Nora</div><div class="role">Sponsor Portal</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ccfbf1;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">📱</text></svg>
|
|
</div>
|
|
<div class="name">Koda</div><div class="role">Kotlin</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ecfccb;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🛠️</text></svg>
|
|
</div>
|
|
<div class="name">Schwifty</div><div class="role">DevOps</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#fae8ff;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🎨</text></svg>
|
|
</div>
|
|
<div class="name">Ava</div><div class="role">Designer</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ffe4e6;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">⚡</text></svg>
|
|
</div>
|
|
<div class="name">Kira</div><div class="role">General Agent</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#dbeafe;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🌐</text></svg>
|
|
</div>
|
|
<div class="name">Jude</div><div class="role">WordPress</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#fce7f3;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">📋</text></svg>
|
|
</div>
|
|
<div class="name">Priya</div><div class="role">HR & Ops</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#ede9fe;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🚪</text></svg>
|
|
</div>
|
|
<div class="name">Zara</div><div class="role">User Portal</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pixel-avatar" style="background:#fef9c3;border-radius:20px;">
|
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🌿</text></svg>
|
|
</div>
|
|
<div class="name">Alex</div><div class="role">Weedops</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:32px;">
|
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
|
<div class="chat-preview">
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:#fef3c7;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">👑</div>
|
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:#fae8ff;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">🎨</div>
|
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:#ecfccb;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">🛠️</div>
|
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="background:#d1fae5;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">⚙️</div>
|
|
<div class="text"><div class="who">Mike</div><div class="msg">API endpoint deployed.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- ============================================ -->
|
|
<!-- STYLE 3: ABSTRACT FACE BLOBS -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<span class="tag" style="background:#1e293b;color:#7dd3fc;">Option C</span>
|
|
<h2>Face Blobs</h2>
|
|
<p class="style-desc">Minimal illustrated faces on organic blob shapes. Each has a unique expression, color, and blob form. Friendly, cartoon-like, clearly not photos. The most "character" option — gives each bot real personality.</p>
|
|
|
|
<div class="grid">
|
|
<!-- John - confident smile -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40 8 C60 6, 76 20, 74 42 C72 60, 56 74, 38 74 C18 74, 6 58, 8 38 C10 18, 22 10, 40 8Z" fill="#f59e0b"/>
|
|
<circle cx="30" cy="34" r="3.5" fill="#78350f"/>
|
|
<circle cx="50" cy="34" r="3.5" fill="#78350f"/>
|
|
<path d="M30 48 Q40 56 50 48" stroke="#78350f" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<circle cx="28" cy="32" r="1.2" fill="white"/>
|
|
<circle cx="48" cy="32" r="1.2" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">John</div><div class="role">Founder</div>
|
|
</div>
|
|
<!-- Raj - techy glasses -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M38 6 C58 4, 74 18, 76 40 C78 60, 62 76, 42 76 C20 76, 4 62, 6 40 C8 20, 20 8, 38 6Z" fill="#8b5cf6"/>
|
|
<rect x="22" y="28" width="14" height="11" rx="3" fill="none" stroke="#2e1065" stroke-width="2"/>
|
|
<rect x="44" y="28" width="14" height="11" rx="3" fill="none" stroke="#2e1065" stroke-width="2"/>
|
|
<line x1="36" y1="33" x2="44" y2="33" stroke="#2e1065" stroke-width="1.5"/>
|
|
<circle cx="29" cy="34" r="2.5" fill="#2e1065"/>
|
|
<circle cx="51" cy="34" r="2.5" fill="#2e1065"/>
|
|
<path d="M33 50 Q40 54 47 50" stroke="#2e1065" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Raj</div><div class="role">Bot Infra</div>
|
|
</div>
|
|
<!-- Sarah - happy eyes -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M42 7 C62 9, 75 22, 73 44 C71 64, 56 75, 36 73 C16 71, 5 56, 7 36 C9 16, 24 5, 42 7Z" fill="#ec4899"/>
|
|
<path d="M24 34 Q30 28 36 34" stroke="#831843" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M44 34 Q50 28 56 34" stroke="#831843" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<ellipse cx="40" cy="48" rx="6" ry="5" fill="#831843"/>
|
|
<ellipse cx="40" cy="47" rx="4" ry="2.5" fill="#fb7185"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Sarah</div><div class="role">Frontend</div>
|
|
</div>
|
|
<!-- Mike - focused -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40 7 C62 5, 76 22, 74 42 C72 64, 58 76, 38 74 C16 72, 4 56, 6 36 C8 16, 20 9, 40 7Z" fill="#10b981"/>
|
|
<line x1="25" y1="32" x2="35" y2="32" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
|
<line x1="45" y1="32" x2="55" y2="32" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
|
<circle cx="30" cy="36" r="2.5" fill="#064e3b"/>
|
|
<circle cx="50" cy="36" r="2.5" fill="#064e3b"/>
|
|
<path d="M34 50 L46 50" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Mike</div><div class="role">Backend</div>
|
|
</div>
|
|
<!-- Luna - curious -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M36 6 C56 4, 74 20, 74 42 C74 62, 58 76, 40 76 C20 76, 6 60, 6 40 C6 18, 18 8, 36 6Z" fill="#818cf8"/>
|
|
<circle cx="30" cy="34" r="4" fill="#1e1b4b"/>
|
|
<circle cx="52" cy="34" r="4" fill="#1e1b4b"/>
|
|
<circle cx="31" cy="32" r="1.5" fill="white"/>
|
|
<circle cx="53" cy="32" r="1.5" fill="white"/>
|
|
<ellipse cx="40" cy="50" rx="4" ry="4.5" fill="#1e1b4b"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Luna</div><div class="role">QA</div>
|
|
</div>
|
|
<!-- Nora - warm smile -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M42 8 C60 6, 76 22, 73 44 C70 66, 54 76, 36 74 C18 72, 4 56, 8 36 C12 16, 26 10, 42 8Z" fill="#f97316"/>
|
|
<circle cx="30" cy="34" r="3" fill="#7c2d12"/>
|
|
<circle cx="50" cy="34" r="3" fill="#7c2d12"/>
|
|
<path d="M28 46 Q40 56 52 46" stroke="#7c2d12" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<ellipse cx="22" cy="42" rx="4" ry="3" fill="#fb923c" opacity="0.5"/>
|
|
<ellipse cx="58" cy="42" rx="4" ry="3" fill="#fb923c" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Nora</div><div class="role">Sponsor Portal</div>
|
|
</div>
|
|
<!-- Koda - determined -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40 6 C58 4, 76 18, 76 40 C76 62, 60 76, 40 76 C18 76, 4 60, 4 40 C4 18, 22 8, 40 6Z" fill="#14b8a6"/>
|
|
<line x1="22" y1="30" x2="34" y2="34" stroke="#134e4a" stroke-width="2.5" stroke-linecap="round"/>
|
|
<line x1="58" y1="30" x2="46" y2="34" stroke="#134e4a" stroke-width="2.5" stroke-linecap="round"/>
|
|
<circle cx="30" cy="38" r="2.5" fill="#134e4a"/>
|
|
<circle cx="50" cy="38" r="2.5" fill="#134e4a"/>
|
|
<path d="M34 52 Q40 56 46 52" stroke="#134e4a" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Koda</div><div class="role">Kotlin</div>
|
|
</div>
|
|
<!-- Schwifty - wild grin -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M38 5 C60 3, 78 20, 76 42 C74 66, 56 78, 36 76 C14 74, 2 56, 4 36 C6 14, 18 7, 38 5Z" fill="#84cc16"/>
|
|
<circle cx="28" cy="32" r="3.5" fill="#1a2e05"/>
|
|
<circle cx="52" cy="32" r="3.5" fill="#1a2e05"/>
|
|
<circle cx="29" cy="30" r="1.2" fill="white"/>
|
|
<circle cx="53" cy="30" r="1.2" fill="white"/>
|
|
<path d="M26 46 Q40 60 54 46" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<line x1="54" y1="24" x2="60" y2="18" stroke="#1a2e05" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="56" y1="26" x2="64" y2="22" stroke="#1a2e05" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Schwifty</div><div class="role">DevOps</div>
|
|
</div>
|
|
<!-- Ava - creative wink -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M42 6 C64 8, 76 24, 74 44 C72 66, 56 76, 36 74 C16 72, 4 54, 8 34 C12 14, 24 4, 42 6Z" fill="#e879f9"/>
|
|
<circle cx="30" cy="34" r="3.5" fill="#4a044e"/>
|
|
<circle cx="31" cy="32" r="1.2" fill="white"/>
|
|
<path d="M46 34 Q50 30 54 34" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M30 50 Q40 58 50 50" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Ava</div><div class="role">Designer</div>
|
|
</div>
|
|
<!-- Kira - spark -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40 6 C60 4, 76 20, 75 42 C74 62, 58 76, 38 76 C18 76, 4 60, 5 38 C6 16, 20 8, 40 6Z" fill="#f43f5e"/>
|
|
<polygon points="28,28 30,34 34,34 31,38 32,44 28,40 24,44 25,38 22,34 26,34" fill="#881337"/>
|
|
<polygon points="48,28 50,34 54,34 51,38 52,44 48,40 44,44 45,38 42,34 46,34" fill="#881337"/>
|
|
<path d="M32 52 Q40 58 48 52" stroke="#881337" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Kira</div><div class="role">General Agent</div>
|
|
</div>
|
|
<!-- Jude - chill -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M38 7 C58 5, 76 20, 74 44 C72 66, 54 76, 36 74 C16 72, 4 56, 6 36 C8 16, 20 9, 38 7Z" fill="#0ea5e9"/>
|
|
<path d="M24 34 L36 34" stroke="#0c4a6e" stroke-width="2.5" stroke-linecap="round"/>
|
|
<path d="M44 34 L56 34" stroke="#0c4a6e" stroke-width="2.5" stroke-linecap="round"/>
|
|
<path d="M34 50 Q40 54 46 50" stroke="#0c4a6e" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Jude</div><div class="role">WordPress</div>
|
|
</div>
|
|
<!-- Priya - organized -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40 7 C60 5, 76 22, 74 42 C72 64, 56 76, 38 76 C18 76, 4 58, 6 38 C8 16, 22 9, 40 7Z" fill="#f472b6"/>
|
|
<circle cx="30" cy="34" r="3" fill="#831843"/>
|
|
<circle cx="50" cy="34" r="3" fill="#831843"/>
|
|
<circle cx="31" cy="32.5" r="1" fill="white"/>
|
|
<circle cx="51" cy="32.5" r="1" fill="white"/>
|
|
<path d="M32 48 Q40 54 48 48" stroke="#831843" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Priya</div><div class="role">HR & Ops</div>
|
|
</div>
|
|
<!-- Zara - thoughtful -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M42 6 C62 8, 76 22, 74 44 C72 64, 56 76, 36 76 C16 76, 4 58, 6 38 C8 16, 24 4, 42 6Z" fill="#a78bfa"/>
|
|
<circle cx="30" cy="34" r="3" fill="#2e1065"/>
|
|
<circle cx="50" cy="34" r="3" fill="#2e1065"/>
|
|
<circle cx="31" cy="32" r="1.2" fill="white"/>
|
|
<circle cx="51" cy="32" r="1.2" fill="white"/>
|
|
<path d="M36 50 L44 50" stroke="#2e1065" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Zara</div><div class="role">User Portal</div>
|
|
</div>
|
|
<!-- Alex - leaf vibes -->
|
|
<div class="card">
|
|
<div class="blob-avatar">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M38 6 C56 4, 76 18, 76 40 C76 62, 58 76, 40 76 C20 76, 4 60, 4 40 C4 18, 20 8, 38 6Z" fill="#a3e635"/>
|
|
<circle cx="30" cy="34" r="3" fill="#1a2e05"/>
|
|
<circle cx="50" cy="34" r="3" fill="#1a2e05"/>
|
|
<path d="M30 48 Q40 56 50 48" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M54 12 Q60 8 58 16 Q56 22 52 18 Z" fill="#65a30d"/>
|
|
</svg>
|
|
</div>
|
|
<div class="name">Alex</div><div class="role">Weedops</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:32px;">
|
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
|
<div class="chat-preview">
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
<path d="M40 8 C60 6, 76 20, 74 42 C72 60, 56 74, 38 74 C18 74, 6 58, 8 38 C10 18, 22 10, 40 8Z" fill="#f59e0b"/>
|
|
<circle cx="30" cy="34" r="3.5" fill="#78350f"/><circle cx="50" cy="34" r="3.5" fill="#78350f"/>
|
|
<path d="M30 48 Q40 56 50 48" stroke="#78350f" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<circle cx="28" cy="32" r="1.2" fill="white"/><circle cx="48" cy="32" r="1.2" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
<path d="M42 6 C64 8, 76 24, 74 44 C72 66, 56 76, 36 74 C16 72, 4 54, 8 34 C12 14, 24 4, 42 6Z" fill="#e879f9"/>
|
|
<circle cx="30" cy="34" r="3.5" fill="#4a044e"/><circle cx="31" cy="32" r="1.2" fill="white"/>
|
|
<path d="M46 34 Q50 30 54 34" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M30 50 Q40 58 50 50" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
|
</div>
|
|
<div class="chat-msg">
|
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
<path d="M38 5 C60 3, 78 20, 76 42 C74 66, 56 78, 36 76 C14 74, 2 56, 4 36 C6 14, 18 7, 38 5Z" fill="#84cc16"/>
|
|
<circle cx="28" cy="32" r="3.5" fill="#1a2e05"/><circle cx="52" cy="32" r="3.5" fill="#1a2e05"/>
|
|
<path d="M26 46 Q40 60 54 46" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SUMMARY -->
|
|
<!-- ============================================ -->
|
|
<div class="section">
|
|
<h2>Quick Comparison</h2>
|
|
<table style="border-collapse:collapse;font-size:14px;max-width:600px;margin-top:16px;">
|
|
<thead>
|
|
<tr style="border-bottom:1px solid #333;">
|
|
<th style="text-align:left;padding:8px 16px;color:#999;">Style</th>
|
|
<th style="text-align:left;padding:8px 16px;color:#999;">Vibe</th>
|
|
<th style="text-align:left;padding:8px 16px;color:#999;">32px Readability</th>
|
|
<th style="text-align:left;padding:8px 16px;color:#999;">Uniqueness</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom:1px solid #222;">
|
|
<td style="padding:8px 16px;font-weight:600;">A — Gradient Geo</td>
|
|
<td style="padding:8px 16px;">Professional, clean</td>
|
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
|
<td style="padding:8px 16px;color:#f59e0b;">★★★☆☆</td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid #222;">
|
|
<td style="padding:8px 16px;font-weight:600;">B — Emoji Mascots</td>
|
|
<td style="padding:8px 16px;">Playful, fun</td>
|
|
<td style="padding:8px 16px;color:#22c55e;">★★★★☆</td>
|
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:8px 16px;font-weight:600;">C — Face Blobs</td>
|
|
<td style="padding:8px 16px;">Friendly, character-driven</td>
|
|
<td style="padding:8px 16px;color:#f59e0b;">★★★☆☆</td>
|
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p style="color:#666;font-size:13px;margin-top:20px;">My recommendation: <strong style="color:#e0e0e0;">Option C (Face Blobs)</strong> gives the most personality and makes each bot feel like a real character. But if you want maximum readability at small sizes, <strong style="color:#e0e0e0;">Option A (Gradient Geo)</strong> is the safest bet. We could also mix — use Face Blobs as the default but fall back to Gradient Geo for contexts where we need tiny avatars.</p>
|
|
<p style="color:#666;font-size:13px;margin-top:12px;">File: <code style="color:#a78bfa;">/home/ava/workspace/design/avatars/avatar-styles.html</code></p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|