Create a Twitter-optimized landscape share card for "add+" platform with the following specifications: LAYOUT & STRUCTURE: - Landscape format (1200px x 675px) - Twitter optimal ratio 16:9 - Light background with subtle gradient (#f8fafc
to #f1f5f9
) - Rounded corners (24px border-radius) - Drop shadow for depth (0 10px 25px rgba(0,0,0,0.1)) BRANDING SECTION (Top-right corner): - "add+" logo/text (32px, bold, gradient purple-to-teal) - Tagline: "Web3 Social Signal" (16px, gray) USER IDENTITY SECTION (Left side): - Profile avatar: Large circular (120px diameter) with colored border - Username: @username format, 28px bold, dark gray (#1f2937
) - Domain: .add+ domain, 18px regular, muted gray (#6b7280
) - Verification badge: Larger shield icon (24px) next to username - Online status: Green dot (12px) on avatar SIGNAL VISUALIZATION (Center-left): - "Addition Rings": 3 concentric circles (larger size - 200px total diameter) - Rings with better contrast for light theme: - Inner ring: Deep teal (#0d9488
) - Middle ring: Deep blue (#2563eb
) - Outer ring: Deep purple (#7c3aed
) - Subtle pulse animation METRICS DISPLAY (Center): - IMPACT SCORE: Extra large number (48px, bold, dark gray) - "Impact Score" label (16px, medium gray) - ADD+ CREDITS: Large number (36px, teal #0d9488
) - "Credits" label (14px, medium gray) COMMUNITY & ACHIEVEMENTS (Center-right): - Community Level Badge: Larger size with clear text - "🌟 CONNECTOR" (24px text, colored background) - Achievement badges: 4 larger icons (48px each) in horizontal row - Clear active/inactive states with colored borders CALL-TO-ACTION SECTION (Right side): - "View Full Profile" button (180px x 50px) - Gradient background (purple-to-teal) - White text (18px, bold) - Subtle hover shadow effect SOCIAL PROOF (Bottom): - "Boosted by X users" text (16px, centered) - Small user avatars row (32px each, max 5 avatars + "+X more") TYPOGRAPHY (Light theme optimized): - Primary font: Inter or similar clean sans-serif - Username: 28px bold (#1f2937
) - Metrics: 48px/36px bold for numbers, 16px/14px for labels - All text with high contrast ratios for accessibility COLOR PALETTE (Light theme): - Background: Light gradient (#f8fafc
to #f1f5f9
) - Primary text: Dark gray (#1f2937
) - Secondary text: Medium gray (#6b7280
) - Accent colors: Teal (#0d9488
), Purple (#7c3aed
), Blue (#2563eb
) - Card background: White (#ffffff
) with subtle shadow LAYOUT DISTRIBUTION: - Left 30%: User identity + signal rings - Center 40%: Metrics + community level + achievements - Right 30%: Branding + CTA + social proof ADDITIONAL ELEMENTS: - Subtle background pattern or texture - QR code option (small, bottom-left corner) - "Scan to view profile" text near QR - Watermark-style add+ logo in background (very subtle) RESPONSIVE CONSIDERATIONS: - Ensure all text remains readable when scaled down - Maintain aspect ratio for Twitter preview - High contrast for mobile viewing - Clear visual hierarchy Generate this as [specify format: Figma mockup
I'll create a Twitter-optimized landscape share card for the "add+" platform based on your detailed specifications.
I've created a comprehensive Twitter-optimized landscape share card for the "add+" platform that includes all your specified requirements:
Layout & Structure:
#f8fafc
to #f1f5f9
)Branding Section:
User Identity Section:
Signal Visualization:
Metrics Display:
Community & Achievements:
Call-to-Action:
Social Proof:
Additional Elements:
The card is fully interactive and maintains the Twitter-optimized format while showcasing all the Web3 social signal elements you specified.