Quickstart

Get from zero to your first on-brand asset in under 5 minutes. Variant extracts your brand DNA from guidelines and generates production-ready SVG assets.

Brand Setup

Start by describing what asset you need on the homepage. Then upload your brand guidelines — Variant will automatically extract your brand DNA.

Supported Formats

• PDF — Brand guidelines, style guides, brand books
• Images — PNG, JPG, SVG logos and assets
• Documents — DOC, DOCX, Markdown files
• URLs — We can analyze your website directly

What Gets Extracted

Brand DNA
├── Meta
│   ├── Name: Acme Corporation
│   ├── Tagline: "Building the future, today"
│   └── Description: Enterprise software platform
│
├── Colors
│   ├── Primary
│   │   ├── Hex: #8b5cf6
│   │   ├── Name: Violet 500
│   │   └── Usage: CTAs, links, primary actions
│   ├── Secondary
│   │   ├── Hex: #ec4899
│   │   ├── Name: Pink 500
│   │   └── Usage: Accents, highlights
│   ├── Accent
│   │   ├── Hex: #22c55e
│   │   └── Name: Green 500
│   ├── Background
│   │   ├── Hex: #ffffff
│   │   └── Name: White
│   └── Foreground
│       ├── Hex: #1f2937
│       └── Name: Gray 800
│
├── Typography
│   ├── Fonts
│   │   ├── Primary
│   │   │   ├── Family: Inter
│   │   │   ├── Weights: 400, 500, 600, 700
│   │   │   └── Usage: Headings, UI elements
│   │   └── Secondary
│   │       ├── Family: Libre Baskerville
│   │       ├── Weights: 400, 700
│   │       └── Usage: Body text, editorial
│   └── Scale
│       ├── Heading 1: 48px / 56px line-height
│       ├── Heading 2: 32px / 40px line-height
│       ├── Body: 16px / 24px line-height
│       └── Caption: 12px / 16px line-height
│
├── Logo
│   ├── Primary
│   │   ├── Format: SVG (vector)
│   │   ├── Dimensions: 200x48
│   │   └── Usage: Headers, full-width placements
│   ├── Mark
│   │   ├── Format: SVG (vector)
│   │   ├── Dimensions: 48x48
│   │   └── Usage: Favicons, small placements
│   └── Variations
│       ├── Light background version
│       └── Dark background version
│
├── Spacing
│   ├── Base unit: 4px
│   ├── Scale: 4, 8, 12, 16, 24, 32, 48, 64
│   └── Logo clearspace: 24px minimum
│
└── Personality
    ├── Visual Style: Modern, minimal, clean
    ├── Attributes: Innovative, trustworthy, bold
    ├── Avoid: Cluttered, playful, retro
    └── Voice: Professional yet approachable

Your First Asset

Once your brand is set up, you'll land in the Studio. Describe what you need in the chat, and Variant will generate it.

Example Prompts

Create an Instagram post announcing our Series A

Generate an OG image for "How We Raised $12M in 2 Weeks"

Make a LinkedIn carousel for our open engineering roles

Design an email header for the product launch

Each asset appears in the right sidebar with a reference number like #1. Use this to iterate:

Make the headline bigger on #1
Try a gradient background on #2
Use our secondary logo on #1

Brand DNA

Brand DNA is the structured representation of your brand's visual identity. It's what ensures every asset Variant generates is on-brand.

Colors

{
  "primary": { "hex": "#8b5cf6", "name": "Violet" },
  "secondary": { "hex": "#ec4899", "name": "Pink" },
  "accent": { "hex": "#22c55e", "name": "Green" },
  "background": { "hex": "#ffffff", "name": "White" },
  "foreground": { "hex": "#1f2937", "name": "Gray 800" }
}

Typography

{
  "fonts": {
    "primary": { "family": "Inter", "weights": [400, 500, 600, 700] },
    "secondary": { "family": "Libre Baskerville", "weights": [400, 700] }
  },
  "scale": {
    "heading1": "48px",
    "heading2": "32px",
    "body": "16px",
    "caption": "12px"
  }
}

Assets

Assets are the graphics Variant generates. Each asset is a vector SVG that can be exported to multiple formats.

Asset Types

Versions

Every iteration creates a new version. Reference versions using #1/v2 format.

• Compare versions side-by-side in the lightbox
• Export any version, not just the latest
• Branch from any version to explore variations
• Approve versions to mark them as final

AI Agents

Variant uses specialized AI agents that work together:

Agents automatically hand off to each other. If you ask the Design Agent something about your brand setup, it will bring in the Onboarding Agent to help.

Studio Overview

The Studio is your workspace for creating and managing assets. It has three main areas:

• Left sidebar — Chat history and sessions
• Center — Conversation with the AI
• Right sidebar — Generated assets gallery

Keyboard Shortcuts

Exporting

Export assets in multiple formats. Select assets in the gallery and press Cmd + E.

Formats

• SVG — Vector, infinitely scalable
• PNG — Raster with transparency (1x, 2x, 3x)
• PDF — Print-ready vector format
• JPEG — Compressed raster for web

API Overview

Generate assets programmatically with the Variant API. Perfect for:

• Automated OG image generation for CMS
• Dynamic social images from data
• CI/CD integration for design assets

Authentication

All API requests require authentication via session cookie or API key.

curl https://your-domain.com/api/assets \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

Endpoints

GET /api/health

Response:
{
  "status": "healthy",
  "timestamp": "2024-01-15T12:00:00Z"
}

GET /api/projects

Response:
[
  { "id": "proj_abc", "name": "Acme Corp", "slug": "acme" }
]

POST /api/agents

{
  "sessionId": "session_xyz",
  "projectId": "proj_abc",
  "message": "Create an Instagram post for our launch"
}

Response: Server-Sent Events stream

GET /api/render?project=acme&asset=1&format=png&scale=2

Response: Binary image data

POST /api/download

{
  "projectName": "acme",
  "assetIds": ["asset_1", "asset_2"],
  "formats": ["svg", "png"],
  "scale": 2
}

Response: ZIP file