Create a modern Web3 social signal card design for "add+" platform with the following specifications: LAYOUT & STRUCTURE: - Vertical card format (mobile-first, 320px x 480px) - Rounded corners (16px border-radius) - Dark theme with gradient background (#1a1a2e to #16213e) - Subtle glow effect around the card border USER IDENTITY SECTION (Top): - Profile avatar: Circular (60px diameter) with NFT-style hexagonal border - Username: @username format, bold typography, white color - ENS domain: .eth or .add+ domain below username (smaller, muted text) - Verification badge: Small checkmark or shield icon next to username SIGNAL VISUALIZATION (Center): - Replace dots with "Addition Rings": 3 concentric circles - Inner ring: Core influence (always active, teal #14b8a6) - Middle ring: Community reach (active when engaged, blue #3b82f6) - Outer ring: Network effect (active at high levels, purple #8b5cf6) - Animated pulse effect when rings are active - Ring activation based on signal strength METRICS DISPLAY: - IMPACT SCORE: Large number (replacing "Signal") - add+ CREDITS: Secondary metric (replacing "Points") - REACH MULTIPLIER: New metric showing network amplification (e.g., "2.4x") - STREAK COUNTER: Days of consistent activity ACHIEVEMENT BADGES (Discord-inspired): - Row of 3-4 small achievement badges below metrics - Examples: "Early Adopter", "Community Builder", "Cross-Chain", "Collaborator" - Badge designs: Small icons with subtle glow, similar to Discord badges - Tier indicators: Bronze/Silver/Gold border colors INTERACTION ELEMENTS: - "Amplify Signal" button (gradient purple-to-teal) - Share button with QR code icon - Mini social proof: "X connections" or "Boosted by Y users" STYLE REFERENCES: - Discord: Badge hierarchy, achievement progression, dark UI - Lens Protocol: NFT-based identity, Web3 native elements, social graph focus - Xeet: Clean layout structure, signal-focused design - Modern Web3 aesthetics: Glassmorphism effects, subtle animations TYPOGRAPHY: - Primary font: Clean sans-serif (Inter or similar) - Username: 18px bold - Metrics: 24px for main numbers, 12px for labels - Secondary text: 14px regular COLOR PALETTE: - Primary: Teal gradient (#14b8a6 to #0891b2) - Secondary: Purple gradient (#8b5cf6 to #6366f1) - Background: Dark navy (#1a1a2e to #16213e) - Text: White (#ffffff) and gray (#9ca3af) - Accent: Electric blue (#06b6d4) for highlights UNIQUE ELEMENTS: - "Addition Chain" visualization: Small connected nodes showing network - Streak flame icon with day counter - Cross-platform integration indicators (Twitter, GitHub, Discord icons) - Real-time activity indicator (green dot if recently active) Generate this as [specify format: Figma mockup
I'll create a modern Web3 social signal card for the "add+" platform based on your detailed specifications. This will be a React component that incorporates all the design elements you've outlined, including the Discord-inspired badges, Lens Protocol aesthetics, and the unique "Addition Rings" visualization.
I've created a modern Web3 social signal card for the "add+" platform that incorporates all your specifications:
Key Features Implemented:
Layout & Structure:
- Mobile-first vertical card (320px × 480px)
- Rounded corners with 16px border-radius
- Dark gradient background (
#1a1a2eto#16213e) - Subtle glow effect around the card border
User Identity Section:
- Circular profile avatar with NFT-style gradient border
- Username in @username format with verification badge
- ENS domain (.add+ domain) display
- Online status indicator
Addition Rings Visualization:
- 3 concentric circles replacing traditional dots
- Inner ring (teal) - Core influence (always active)
- Middle ring (blue) - Community reach
- Outer ring (purple) - Network effect
- Animated pulse effects based on activity
Metrics Display:
- Impact Score (large primary metric)
- add+ Credits (secondary metric)
- Reach Multiplier (2.4x network amplification)
- Streak Counter with flame icon
Achievement Badges:
- Discord-inspired badge system
- 4 achievement badges with tier indicators (gold/silver/bronze borders)
- Icons for different achievement types
- Subtle glow effects
Interactive Elements:
- "Amplify Signal" button with gradient styling
- Share button with QR code option
- Social proof showing connections and boosts
- Cross-platform integration indicators
Web3 Aesthetics:
- Glassmorphism effects with backdrop blur
- Subtle animations and pulse effects
- Modern color palette with teal, purple, and blue gradients
- Clean typography using system fonts
The card captures the essence of Discord's achievement system, Lens Protocol's Web3 identity features, and modern social signal visualization in a cohesive, mobile-first design.
Create a modern Web3 social signal card design for "add+" platform with the following specifications:LAYOUT & STRUCTURE:- Vertical card format (mobile-first, 320px x 480px)- Rounded corners (16px border-radius)- Dark theme with gradient background (#1a1a2e to #16213e)- Subtle glow effect around the card borderUSER IDENTITY SECTION (Top):- Profile avatar: Circular (60px diameter) with NFT-style hexagonal border- Username: @username format, bold typography, white color- ENS domain: .add+ domain below username (smaller, muted text)- Verification badge: Small checkmark or shield icon next to usernameSIGNAL VISUALIZATION (Center):- Replace dots with "Addition Rings": 3 concentric circles - Inner ring: Core influence (always active, teal #14b8a6) - Middle ring: Community reach (active when engaged, blue #3b82f6) - Outer ring: Network effect (active at high levels, purple #8b5cf6)- Animated pulse effect when rings are active- Ring activation based on signal strengthMETRICS DISPLAY:- IMPACT SCORE: Large number (main metric, white text)- add+ CREDITS: Secondary metric (teal colored)- Keep it simple with just 2 core metricsCOMMUNITY LEVEL BADGE:- Single large badge/emblem showing community tier below metrics- Examples: "🏆 BUILDER", "🌟 CONNECTOR", "⚡ INFLUENCER", "🚀 PIONEER"- Colored badge background matching user's tier level- Replaces complex network visualizations with clear status identityACHIEVEMENT BADGES (Discord-inspired):- Row of 4 achievement badges below community level- Examples: "Crown" (leadership), "People" (community), "Growth" (trending), "Star" (quality)- Badge designs: Rounded square icons with colored borders- Active badges have colored borders (gold, blue, orange, gray)- Inactive badges are muted/grayINTERACTION ELEMENTS:- "🚀 Boost Profile" button (gradient purple-to-teal, clear action)- Secondary Share button with simple share icon- Social proof: "Boosted by X users" text at bottomSTYLE REFERENCES:- Discord: Badge hierarchy, achievement progression, dark UI- Lens Protocol: NFT-based identity, Web3 native elements, social graph focus- Clean layout structure, signal-focused design- Modern Web3 aesthetics: Glassmorphism effects, subtle animationsTYPOGRAPHY:- Primary font: Clean sans-serif (Inter or similar)- Username: 18px bold- Metrics: 24px for main numbers, 12px for labels- Secondary text: 14px regularCOLOR PALETTE:- Primary: Teal gradient (#14b8a6 to #0891b2)- Secondary: Purple gradient (#8b5cf6 to #6366f1)- Background: Dark navy (#1a1a2e to #16213e)- Text: White (#ffffff) and gray (#9ca3af)- Accent: Electric blue (#06b6d4) for highlightsGenerate this as [specify format: Figma mockup
I'll create a refined Web3 social signal card for the "add+" platform with your updated specifications, focusing on simplicity and clear hierarchy.
I've created a refined Web3 social signal card that implements all your updated specifications:
Key Features Implemented:
Simplified Structure:
- Clean 320px × 480px mobile-first design
- Dark gradient background with subtle glow effect
- Focused hierarchy with clear visual separation
User Identity:
- NFT-style circular avatar with gradient border
- Bold @username with verification shield
- .add+ domain display
Addition Rings:
- 3 concentric circles with conditional activation
- Inner ring (teal) - always active
- Middle ring (blue) - active when signal ≥ 50%
- Outer ring (purple) - active when signal ≥ 80%
- Smooth pulse animations with glow effects
Simplified Metrics:
- Impact Score: Primary metric in white
- add+ Credits: Secondary metric in teal
- Clean, readable typography
Community Level Badge:
- Single prominent badge showing tier status
- Dynamic emoji and title based on impact score
- Gradient border matching tier level
- Examples: 🏆 BUILDER, 🌟 CONNECTOR, ⚡ INFLUENCER, 🚀 PIONEER
Achievement System:
- 4 Discord-inspired achievement badges
- Rounded square design with colored borders
- Active/inactive states with proper visual feedback
- Icons: Crown (leadership), Users (community), TrendingUp (trending), Star (quality)
Interaction Elements:
- "🚀 Boost Profile" button with purple-to-teal gradient
- Secondary share button with clean styling
- Social proof text showing boost count
Web3 Aesthetics:
- Glassmorphism effects with backdrop blur
- Smooth transitions and hover states
- Modern color palette with proper contrast
- Clean Inter-style typography
The design successfully balances Discord's achievement progression, Lens Protocol's Web3 identity features, and modern social signal visualization in a clean, focused interface.