Success! Your payment of $250.00 has been processed.
+
Heads up. Your HSA balance is running low.
+
Error. We could not process your transaction. Please try again.
+
Info: New plan options are available for your account.
+
+
+
+
+
Data Table
+
+
+
+
+
Date
+
Description
+
Category
+
Amount
+
Status
+
+
+
+
+
Mar 18, 2026
+
CVS Pharmacy
+
Prescription
+
$45.00
+
Approved
+
+
+
Mar 15, 2026
+
Dr. Smith Office Visit
+
Medical
+
$180.00
+
Pending
+
+
+
Mar 12, 2026
+
LensCrafters
+
Vision
+
$320.00
+
Approved
+
+
+
Mar 10, 2026
+
Gym Membership
+
Wellness
+
$49.99
+
Declined
+
+
+
+
+
+
+
+
+
Avatars
+
+
A
+
JD
+
PF
+
$
+
+
+
+
+
+ Payfrit Design System v1.0 — Maintained by Ava — 2026
+
+
+
+
+
+
\ No newline at end of file
diff --git a/design/avatars/avatar-styles.html b/design/avatars/avatar-styles.html
new file mode 100644
index 0000000..e85f20a
--- /dev/null
+++ b/design/avatars/avatar-styles.html
@@ -0,0 +1,759 @@
+
+
+
+
+
+Payfrit Bot Avatars — Style Options
+
+
+
+
+
Bot Avatar Styles
+
3 style options for @john to review. Each designed to be distinct at 32px sidebar size.
+
+
+
+
+
+ Option A
+
Gradient Geo
+
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.
+
+
+
+
+
+
+ J
+
+
John
+
Founder
+
+
+
+
+
+ R
+
+
Raj
+
Bot Infra
+
+
+
+
+
+ S
+
+
Sarah
+
Frontend
+
+
+
+
+
+ M
+
+
Mike
+
Backend
+
+
+
+
+
+ L
+
+
Luna
+
QA
+
+
+
+
+
+ N
+
+
Nora
+
Sponsor Portal
+
+
+
+
+
+ K
+
+
Koda
+
Kotlin
+
+
+
+
+
+ Sc
+
+
Schwifty
+
DevOps
+
+
+
+
+
+ A
+
+
Ava
+
Designer
+
+
+
+
+
+ Ki
+
+
Kira
+
General Agent
+
+
+
+
+
+ Ju
+
+
Jude
+
WordPress
+
+
+
+
+
+ P
+
+
Priya
+
HR & Ops
+
+
+
+
+
+ Z
+
+
Zara
+
User Portal
+
+
+
+
+
+ Al
+
+
Alex
+
Weedops
+
+
+
+
+
+
Chat sidebar preview (32px):
+
+
+
J
+
John
new project: bot avatars and team roster guardrails
+
+
+
A
+
Ava
On it! Let me mock up a few style directions.
+
+
+
Sc
+
Schwifty
servers all green 🟢
+
+
+
M
+
Mike
API endpoint deployed.
+
+
+
+
+
+
+
+
+
+
+
+ Option B
+
Emoji Mascots
+
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.
+
+
+
+
+
+
+
John
Founder
+
+
+
+
+
+
Raj
Bot Infra
+
+
+
+
+
+
Sarah
Frontend
+
+
+
+
+
+
Mike
Backend
+
+
+
+
+
+
Luna
QA
+
+
+
+
+
+
Nora
Sponsor Portal
+
+
+
+
+
+
Koda
Kotlin
+
+
+
+
+
+
Schwifty
DevOps
+
+
+
+
+
+
Ava
Designer
+
+
+
+
+
+
Kira
General Agent
+
+
+
+
+
+
Jude
WordPress
+
+
+
+
+
+
Priya
HR & Ops
+
+
+
+
+
+
Zara
User Portal
+
+
+
+
+
+
Alex
Weedops
+
+
+
+
+
Chat sidebar preview (32px):
+
+
+
👑
+
John
new project: bot avatars and team roster guardrails
+
+
+
🎨
+
Ava
On it! Let me mock up a few style directions.
+
+
+
🛠️
+
Schwifty
servers all green 🟢
+
+
+
⚙️
+
Mike
API endpoint deployed.
+
+
+
+
+
+
+
+
+
+
+
+ Option C
+
Face Blobs
+
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.
+
+
+
+
+
+
+
+
John
Founder
+
+
+
+
+
+
+
Raj
Bot Infra
+
+
+
+
+
+
+
Sarah
Frontend
+
+
+
+
+
+
+
Mike
Backend
+
+
+
+
+
+
+
Luna
QA
+
+
+
+
+
+
+
Nora
Sponsor Portal
+
+
+
+
+
+
+
Koda
Kotlin
+
+
+
+
+
+
+
Schwifty
DevOps
+
+
+
+
+
+
+
Ava
Designer
+
+
+
+
+
+
+
Kira
General Agent
+
+
+
+
+
+
+
Jude
WordPress
+
+
+
+
+
+
+
Priya
HR & Ops
+
+
+
+
+
+
+
Zara
User Portal
+
+
+
+
+
+
+
Alex
Weedops
+
+
+
+
+
Chat sidebar preview (32px):
+
+
+
+
+
+
John
new project: bot avatars and team roster guardrails
+
+
+
+
+
+
Ava
On it! Let me mock up a few style directions.
+
+
+
+
+
+
Schwifty
servers all green 🟢
+
+
+
+
+
+
+
+
+
+
+
+
Quick Comparison
+
+
+
+
Style
+
Vibe
+
32px Readability
+
Uniqueness
+
+
+
+
+
A — Gradient Geo
+
Professional, clean
+
★★★★★
+
★★★☆☆
+
+
+
B — Emoji Mascots
+
Playful, fun
+
★★★★☆
+
★★★★★
+
+
+
C — Face Blobs
+
Friendly, character-driven
+
★★★☆☆
+
★★★★★
+
+
+
+
My recommendation: Option C (Face Blobs) gives the most personality and makes each bot feel like a real character. But if you want maximum readability at small sizes, Option A (Gradient Geo) 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.