Skip to main content

Badge Customization Guide

Design 32 badges that drive engagement and recognize value.

Badges are the heart of your VerseID system - they're visual representations of achievement that users earn, collect, and display on their cards. This guide shows you how to design 32 custom badges (8 per pathway) that resonate with your community and incentivize the behaviors that matter most to your project.

Badge System Architecture​

The 4×8 Structure​

Every AlphaHub includes 32 custom badges distributed across 4 pathways:

Tier Distribution (recommended):

  • 🥉 Bronze: 2 badges (easy entry, 8-16 BITS)
  • 🥈 Silver: 2 badges (medium challenge, 24-32 BITS)
  • 🥇 Gold: 2 badges (hard achievement, 48-64 BITS)
  • 💎 Diamond: 2 badges (elite status, 96-128 BITS)

Design Principles​

1. Clear Visual Hierarchy​

Tier Progression Should Be Obvious:

🥉 Bronze    →  🥈 Silver    →  🥇 Gold    →  💎 Diamond
Simple shape    More detail     Polished       Legendary
Flat colors     Gradients       Glow effects   Animated

Example Visual Progression (Trading Badge):

  • Bronze: Simple coin icon, flat blue
  • Silver: Coin with sparkle, gradient blue
  • Gold: Coin with aura, gold gradient + glow
  • Diamond: 3D coin with particles, rainbow holographic

2. Intuitive Iconography​

What Works:

  • ✅ Universal symbols (💰 money, ⚡ speed, 🏆 achievement)
  • ✅ Simple shapes (circles, triangles, stars)
  • ✅ Clear metaphors (🔥 hot streak, 💎 diamond hands)
  • ✅ Action-oriented (🚀 launch, 🎯 target)

What Doesn't:

  • ❌ Abstract shapes with no clear meaning
  • ❌ Complex illustrations that don't scale
  • ❌ Text-heavy badges (hard to read at small sizes)
  • ❌ Cultural references that don't translate

3. Pathway Color Coding​

Use pathway colors to help users instantly recognize category:

PathwayPrimary ColorAccent ColorUse Case
ALIGN#00A1F1 (Blue)#0080C8Backgrounds, borders, glows
ALPHA#FE5F00 (Orange)#E54D00Financial icons, effects
KARMA#7E3AF2 (Purple)#6B2FD9Social badges, community
SYNERGY#3EB85F (Green)#35A051Network, growth, ecosystem

4. Consistent Style Language​

Choose ONE aesthetic and stick to it:

Flat Design​

  • Simple shapes
  • Solid colors
  • No shadows
  • Fast to create

Best For: Minimalist projects, mobile-first

Gradient/3D​

  • Depth and dimension
  • Gradients and shadows
  • Polished look
  • More production time

Best For: Premium positioning, gaming

Holographic​

  • Iridescent effects
  • Animated shimmer
  • Futuristic vibe
  • Technical complexity

Best For: Web3 aesthetic, high-end projects

Pixel Art​

  • Retro gaming aesthetic
  • 8-bit/16-bit style
  • Nostalgic appeal
  • Easy to animate

Best For: Gaming projects, NFT communities

Pathway-Specific Badge Design​

ALIGN Pathway (Onboarding/Identity)​

Purpose: Welcome users and guide through basic setup

Badge Philosophy: Simple, welcoming, educational

Example Badge Set for ALIGN​

Badge NameTierUnlock ConditionBITSDesign Concept
Welcome Aboard🥉 BronzeConnect wallet8Handshake icon, blue
Profile Complete🥉 BronzeFill profile (100%)8Checkmark in circle
First Steps🥈 SilverComplete 3 basic actions16Footprints path
Community Member🥈 SilverJoin Discord + Telegram16Group icon with glow
Verified Human🥇 GoldPass Vibe Oracle check32Shield with checkmark
Active User🥇 Gold7-day streak32Calendar with fire
AlphaHub Champion💎 DiamondComplete all ALIGN quests64Trophy with stars
Pioneer💎 DiamondTop 100 earliest users64Flag on mountain

Design Example (Welcome Aboard):

┌─────────────────────────────────┐
│         [Handshake Icon]        │
│        (Blue gradient)          │
│                                 │
│     🥉 Welcome Aboard           │
│     Connect your wallet         │
│                                 │
│     💎 8 BITS                   │
│     🎯 ALIGN Pathway            │
└─────────────────────────────────┘

ALIGN Badge Tips:

  • Keep difficulty LOW (high completion rate = momentum)
  • Use encouraging language ("Welcome", "Great Start", "You're In!")
  • Visual style should be friendly and approachable
  • Celebrate milestones (first action, 7 days, all quests)

ALPHA Pathway (DeFi/Capital)​

Purpose: Recognize financial contribution and DeFi expertise

Badge Philosophy: Premium, valuable, aspirational

Example Badge Set for ALPHA​

Badge NameTierUnlock ConditionBITSDesign Concept
First Trade🥉 BronzeComplete 1 swap16Simple coin icon
Liquidity Provider🥉 BronzeAdd liquidity ($100+)16Two coins merging
Volume Chaser🥈 Silver$10K+ total volume32Graph trending up
Token Holder🥈 SilverHold tokens 30+ days32Lock with timer
Whale Status🥇 Gold$100K+ TVL64Whale with crown
Diamond Hands🥇 Gold90-day hold, 0 sells64Hands holding diamond
DeFi Master💎 DiamondAll ALPHA quests + $500K TVL128Throne with aura
Vault Lord💎 DiamondTop 10 TVL holders128Vault with wings

Design Example (Whale Status):

┌─────────────────────────────────┐
│      [Whale with Crown]         │
│     (Gold + blue gradient)      │
│      (Glow effect)              │
│                                 │
│     🥇 Whale Status             │
│     $100K+ in protocol          │
│                                 │
│     💎 64 BITS                  │
│     📈 ALPHA Pathway            │
│     👑 Elite Tier               │
└─────────────────────────────────┘

ALPHA Badge Tips:

  • Use financial metaphors (coins, vaults, charts, crowns)
  • Orange/gold color palette for "money" association
  • Higher BITS rewards (16-128) reflect capital risk
  • Celebrate both entry (100)andwhales(100) and whales (100K+)
  • Include time-based holds to reward loyalty
  • Diamond badges should feel ELITE (top 10, $500K+)

KARMA Pathway (Social/Culture)​

Purpose: Recognize community building and cultural contribution

Badge Philosophy: Creative, social, inclusive

Example Badge Set for KARMA​

Badge NameTierUnlock ConditionBITSDesign Concept
New Voice🥉 BronzeFirst Discord message8Megaphone icon
Helpful Hand🥉 BronzeAnswer 5 questions12Helping hands
Content Creator🥈 SilverShare 10 posts24Camera/video icon
Event Participant🥈 SilverAttend 3 events24Calendar with star
Meme Master🥇 GoldTop 10 meme contest48LOL face with crown
Community Helper🥇 Gold100+ helpful messages48Shield with heart
Culture King💎 DiamondAll KARMA + Ambassador96Crown with sparkles
Community Icon💎 DiamondMost recognized member96Star with aura

Design Example (Meme Master):

┌─────────────────────────────────┐
│       [LOL Face + Crown]        │
│      (Purple gradient)          │
│      (Sparkle effects)          │
│                                 │
│     🥇 Meme Master              │
│     Won weekly meme contest     │
│                                 │
│     💎 48 BITS                  │
│     🎨 KARMA Pathway            │
│     😂 Legendary Status         │
└─────────────────────────────────┘

KARMA Badge Tips:

  • Use expressive icons (faces, hearts, stars)
  • Purple color palette for "creative" association
  • Include both participation (post 10X) and quality (top 10)
  • Celebrate different contribution types (memes, help, events)
  • Make Diamond badges feel like "celebrity status"
  • Recognition over perfection (encourage experimentation)

SYNERGY Pathway (Network/Referral)​

Purpose: Recognize network growth and ecosystem building

Badge Philosophy: Growth, connection, collaboration

Example Badge Set for SYNERGY​

Badge NameTierUnlock ConditionBITSDesign Concept
First Referral🥉 BronzeRefer 1 active user32Link icon
Network Starter🥉 Bronze5 referrals32Network nodes (5)
Growth Hacker🥈 Silver25 referrals48Graph exponential
Cross-Project🥈 SilverActive in 3+ AlphaHubs48Three connected badges
Network Builder🥇 Gold100+ referrals64Complex network web
Ecosystem Partner🥇 GoldPartner with project64Handshake with glow
Network King💎 Diamond500+ referrals128Crown + global network
Synergy Master💎 DiamondTop 5 referrers128Infinity symbol + nodes

Design Example (Network King):

┌─────────────────────────────────┐
│    [Crown + Global Network]     │
│     (Green gradient)            │
│   (Animated connections)        │
│                                 │
│     💎 Network King             │
│     500+ active referrals       │
│                                 │
│     💎 128 BITS                 │
│     🌐 SYNERGY Pathway          │
│     👑 Elite Networker          │
└─────────────────────────────────┘

SYNERGY Badge Tips:

  • Use network metaphors (nodes, links, webs, global)
  • Green color palette for "growth" association
  • Highest BITS rewards (32-128) - hardest to achieve
  • Progressive tiers: 1 → 5 → 25 → 100 → 500 referrals
  • Include cross-project recognition (ecosystem badges)
  • Diamond badges should feel like "network royalty"
  • Animate connections for premium feel

Badge Unlock Conditions​

Condition Types​

1. Action Count (Simple)​

{
  "type": "action_count",
  "action": "swap",
  "count": 1,
  "bits": 16
}

Use For: First-time actions, simple milestones

Examples:

  • First trade (count: 1)
  • Active trader (count: 10)
  • Power user (count: 100)

2. Value Threshold​

{
  "type": "value_threshold",
  "metric": "tvl",
  "operator": ">=",
  "value": 100000,
  "bits": 64
}

Use For: Financial milestones, whale badges

Examples:

  • Whale Status ($100K+ TVL)
  • Volume Chaser ($10K+ volume)
  • Liquidity King ($1M+ provided)

3. Time-Based​

{
  "type": "time_based",
  "action": "hold_token",
  "duration_days": 90,
  "bits": 64
}

Use For: Loyalty rewards, diamond hands badges

Examples:

  • Diamond Hands (90-day hold)
  • Active User (7-day streak)
  • Long-term Holder (1-year anniversary)

4. Combo/Complex​

{
  "type": "combo",
  "requirements": [
    {"action": "trade", "count": 10},
    {"metric": "tvl", "value": 10000},
    {"duration_days": 30}
  ],
  "bits": 96
}

Use For: Elite badges, Diamond tier

Examples:

  • DeFi Master (10 trades + $10K TVL + 30 days)
  • Community Icon (100 messages + 10 events + Ambassador)
  • Synergy Master (500 referrals + cross-project + partnership)

5. Competitive/Ranked​

{
  "type": "ranked",
  "metric": "tvl",
  "rank": "top_10",
  "period": "all_time",
  "bits": 128
}

Use For: Exclusive badges, leaderboard recognition

Examples:

  • Vault Lord (Top 10 TVL)
  • Network King (Top 5 referrers)
  • Pioneer (First 100 users)

BITS Weight Strategy​

Total Budget: 100,000 BITS example

Pathway% of BudgetTotal BITSBadgesAvg BITS/Badge
ALIGN25%25,00083,125
ALPHA40%40,00085,000
KARMA20%20,00082,500
SYNERGY15%15,00081,875

Note: Avg BITS/badge is distributed across difficulty tiers, not equally.

Tier-Based BITS Allocation​

Within Each Pathway (using ALPHA as example with 40,000 BITS):

TierBadges% of PathwayBITS per BadgeTotal BITS
🥉 Bronze215%300600
🥈 Silver225%5001,000
🥇 Gold235%7001,400
💎 Diamond225%5001,000

Wait, that doesn't add up. Let me recalculate:

Actually, for badge design, you set BITS per unlock, not per badge pool. Here's the better approach:

BITS per Badge Unlock (what users receive):

TierDifficultyBITS RangeRecommended
🥉 BronzeEasy (80%+ completion)8-168-12
🥈 SilverMedium (50-60% completion)16-3224-32
🥇 GoldHard (20-30% completion)32-6448-64
💎 DiamondElite (5-10% completion)64-12896-128

Calibration Formula:

Expected Users × Completion Rate × BITS per Badge = Total BITS Distributed

Example (Bronze Badge):
1,000 users × 80% completion × 12 BITS = 9,600 BITS

Balancing Tips​

Too Easy (90%+ completion):

  • Reduce BITS reward (12 → 8)
  • Keep as is if intentionally accessible
  • Use for onboarding momentum

Too Hard (<10% completion):

  • Increase BITS reward (64 → 96)
  • Reduce difficulty requirement
  • Add tutorial/guide

Perfect Balance (target rates):

  • Bronze: 70-80% completion
  • Silver: 50-60% completion
  • Gold: 20-30% completion
  • Diamond: 5-10% completion (elite)

Visual Design Specifications​

Technical Requirements​

File Formats:

  • Preferred: SVG (scalable, small file size)
  • Accepted: PNG (minimum 512×512px, transparent background)
  • Not Recommended: JPG (no transparency)

Dimensions:

  • Badge icon: 512×512px (displays at 64×64 to 256×256)
  • Safe area: Keep important elements within center 400×400px
  • Border padding: 32px minimum from edge

File Size:

  • Target: <50KB per badge
  • Maximum: 200KB (larger files slow loading)
  • Use optimization tools (SVGO, TinyPNG)

Design Templates​

Circular Badge Template (most common):

┌─────────────────────────────────┐
│  ╭───────────────────────╮      │
│  │   [Outer Glow Ring]   │      │
│  │  ╭─────────────────╮  │      │
│  │  │  [Main Icon]    │  │      │
│  │  │   (256×256)     │  │      │
│  │  ╰─────────────────╯  │      │
│  │   [Tier Indicator]    │      │
│  ╰───────────────────────╯      │
│                                 │
│  [Badge Name]                   │
│  [Tier Symbol: 🥉🥈🥇💎]       │
└─────────────────────────────────┘

Shield Badge Template:

       ╱╲
      ╱  ╲
     │    │
     │ICON│  ← Main symbol
     │    │
      ╲  ╱
       ╲╱

    [Name]
   [🥇 Tier]

Star Badge Template:

     ★
    ╱│╲
   ╱ │ ╲
  ★─ Icon ─★  ← 5-point star
   ╲ │ ╱
    ╲│╱
     ★

   [Name]
  [💎 Tier]

Color Palettes by Pathway​

ALIGN (Blue):

Primary: #00A1F1
Dark: #0080C8
Light: #33B4F5
Glow: rgba(0, 161, 241, 0.3)

ALPHA (Orange):

Primary: #FE5F00
Dark: #E54D00
Light: #FF7F33
Glow: rgba(254, 95, 0, 0.3)

KARMA (Purple):

Primary: #7E3AF2
Dark: #6B2FD9
Light: #9558F5
Glow: rgba(126, 58, 242, 0.3)

SYNERGY (Green):

Primary: #3EB85F
Dark: #35A051
Light: #5FC47C
Glow: rgba(62, 184, 95, 0.3)

Tier Overlays:

Bronze: #CD7F32 (or pathway primary)
Silver: #C0C0C0
Gold: #FFD700
Diamond: #B9F2FF (cyan-white shimmer)

Badge Library & Templates​

Pre-Made Badge Sets​

Option 1: Use Our Templates

  • 32 professional badges included free
  • Customizable colors and text
  • Available in AlphaHub Builder
  • Mix and match across pathways

Option 2: Commission Custom Design

  • $2,000 for full 32-badge set
  • Professional designer from our network
  • 2-3 weeks turnaround
  • Unlimited revisions

Option 3: DIY with Figma Templates

  • Free Figma template library
  • 100+ badge components
  • Drag-and-drop customization
  • Export as SVG

Figma Template Structure​

Figma File: "VerseID Badge Templates"
├── Components
│   ├── Shapes (circle, shield, star, hexagon)
│   ├── Icons (50+ symbols)
│   ├── Tiers (bronze, silver, gold, diamond)
│   └── Effects (glows, gradients, particles)
├── Pathways
│   ├── ALIGN (8 example badges)
│   ├── ALPHA (8 example badges)
│   ├── KARMA (8 example badges)
│   └── SYNERGY (8 example badges)
└── Export Settings
    └── SVG optimization presets

Download: Figma Badge Templates (Coming Soon)

Badge Naming Best Practices​

Effective Badge Names​

What Works:

  • ✅ Aspirational: "Whale Status", "Network King", "DeFi Master"
  • ✅ Clear Achievement: "First Trade", "100 Referrals", "Active User"
  • ✅ Memorable: "Diamond Hands", "Meme Master", "Culture King"
  • ✅ Emotional: "Welcome Aboard", "Community Icon", "Pioneer"

What Doesn't:

  • ❌ Generic: "Badge #7", "Level 3", "Achievement Unlocked"
  • ❌ Vague: "Good Work", "Nice Job", "Congratulations"
  • ❌ Too Long: "The Ultimate DeFi Trading Volume Champion of the Year"
  • ❌ Confusing: "Synergistic Alignment Alpha Optimization"

Naming Patterns by Tier​

Bronze (Welcoming, Beginner-Friendly):

  • "Welcome Aboard", "New Voice", "First Steps"
  • "Getting Started", "Hello There", "Day One"

Silver (Progressive, Achievement):

  • "Volume Chaser", "Content Creator", "Growth Hacker"
  • "Rising Star", "Active Trader", "Community Member"

Gold (Aspirational, Elite):

  • "Whale Status", "Meme Master", "Network Builder"
  • "Diamond Hands", "Community Helper", "DeFi Expert"

Diamond (Legendary, Exclusive):

  • "Vault Lord", "Culture King", "Network King"
  • "Synergy Master", "Community Icon", "DeFi Master"

Testing & Iteration​

Badge Preview Checklist​

Before publishing badges, verify:

  • Renders clearly at 64×64px (smallest display size)
  • Recognizable at 256×256px (card display)
  • Colors match pathway theme
  • Tier is visually obvious (bronze < silver < gold < diamond)
  • File size <50KB (preferably)
  • Transparent background (PNG/SVG)
  • Name <20 characters
  • Description <100 characters

A/B Testing Badges​

What to Test:

  • Badge names (aspirational vs descriptive)
  • BITS rewards (16 vs 24 vs 32)
  • Unlock conditions (5 trades vs 10 trades)
  • Visual styles (flat vs gradient vs holographic)

How to Measure:

  • Quest completion rate
  • Time to unlock
  • User feedback (surveys)
  • Social sharing (badge flexing)

Common Badge Issues​

Problem: Badge unlocked but users don't notice Solutions:

  • Add push notification
  • Show animated unlock screen
  • Post in Discord/Telegram automatically
  • Add to user profile prominently

Problem: Badge too easy to unlock (90%+ completion) Solutions:

  • Keep as is (engagement booster)
  • OR reduce BITS reward
  • OR make it a "Bronze" tier badge

Problem: Badge impossible to unlock (<1% completion) Solutions:

  • Reduce difficulty requirement
  • Increase BITS reward (justify effort)
  • Add tutorial/guide
  • Check if bug in unlock logic

Problem: Badge art doesn't match expectations Solutions:

  • A/B test alternative designs
  • Survey community for preferences
  • Iterate based on feedback
  • Consider commissioning professional design

Badge Psychology & Motivation​

Why Badges Work​

1. Status Signaling

  • Users display badges to show achievement
  • Rare badges = higher social status
  • Creates competitive drive

2. Progress Visualization

  • See how far you've come (badges earned)
  • See what's possible (badges available)
  • Clear path to next milestone

3. Collection Mechanic

  • "Gotta catch 'em all" psychology
  • Empty slots create tension
  • Completion feels satisfying

4. Social Proof

  • "If others have it, I want it too"
  • FOMO drives participation
  • Badge showcasing drives engagement

Psychological Tips​

Make Early Wins Easy:

  • First 2-3 badges should unlock quickly
  • Creates momentum and investment
  • Users who earn 3 badges stick around 3X longer

Create Aspirational Goals:

  • Diamond badges should feel ELITE
  • Only 5-10% achieve them
  • Creates long-term retention

Use Scarcity:

  • "Top 100 users only" badges
  • "First week only" time-limited badges
  • "50 left" availability caps

Celebrate Publicly:

  • Auto-post badge unlocks to Discord
  • Leaderboards for rare badges
  • Community recognition for Diamond achievers

Launch Strategy for Badges​

Phase 1: Core Badges (Week 1)​

Launch with 16 badges (Bronze + Silver only):

  • Easier to complete
  • Faster user progression
  • Build momentum

Why Delay Gold/Diamond?

  • Users need time to progress
  • Prevents "impossible goals" frustration
  • Creates anticipation

Phase 2: Advanced Badges (Week 2-4)​

Unlock Gold badges after 1-2 weeks:

  • Users have progressed enough
  • Creates "next level" excitement
  • Rewards early adopters

Unlock Diamond badges after 3-4 weeks:

  • Elite users ready for challenge
  • Community has matured
  • Creates endgame goals

Phase 3: Seasonal Badges (Ongoing)​

Add limited-time badges:

  • Holiday/event specials
  • Monthly challenges
  • Partnership collaborations
  • Community requests

Benefits:

  • Re-engages dormant users
  • Creates urgency (FOMO)
  • Fresh content without system overhaul

Next Steps​

Ready to Design Your 32 Badges?

Use our tools and templates to create badges that drive engagement:

Need help? Commission a professional 32-badge set for $2,000 (2-3 weeks)

Questions? Join our Builder Community Discord for badge design feedback and inspiration.