AI Badge System

Modern, customizable badges for AI attribution

Quick Implementation

Option 1: Simple PNG Image

<img src="https://attest.ink/badges/ai-glass-medium.png" 
     alt="Made with AI" width="120" height="32">

Perfect for emails, documents, or when CSS isn't available

Option 2: Interactive SVG Badge

<a href="https://attest.ink" class="ai-badge ai-badge-medium ai-badge-glass">
    <svg class="ai-logo">...</svg>
    <span>Made with AI</span>
</a>

Full customization with hover effects and animations

Get PNG Badges Interactive Demo

Size Variants

Made with AI Micro (20px)
Made with AI Mini (24px)
Made with AI Small (28px)
Made with AI Medium (32px)
Made with AI Large (40px)
Made with AI Extra Large (48px)

Style Variants

Made with AI Glass
Made with AI Solid
Made with AI Outline
Made with AI Ghost
Made with AI Gradient
Made with AI Neumorphic
Made with AI Glow
Made with AI Monochrome
Made with AI Neon
Made with AI Minimal

Platform-Specific Badges

Claude AI Claude
ChatGPT ChatGPT
Gemini Gemini

Implementation Example

<!-- Basic Glass Badge -->
<a href="https://attest.ink" class="ai-badge ai-badge-medium ai-badge-glass">
    <svg class="ai-logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
        <path d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <circle cx="12" cy="12" r="2" fill="currentColor"/>
        <path d="M12 6V8M12 16V18M18 12H16M8 12H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
    <span>Made with AI</span>
</a>

<!-- Include CSS -->
<link rel="stylesheet" href="https://attest.ink/css/modern-design-system.css">
<link rel="stylesheet" href="https://attest.ink/css/badge-variants.css">