Skip to content

leebr27/marque

Repository files navigation

Marque — AI Logo Generator

Transform meeting transcripts into professional, bespoke brand identities. Building general design intelligence.

Live Demo →

Overview

Marque is an AI-powered logo generator that analyzes meeting transcripts and creates professional logo concepts. The output is designed to look like thoughtful, human-crafted design work—not generic AI clip-art. Each logo feels as if a human designer worked directly with the client, translating their vision into visual form.

Features

  • Transcript Analysis: Deep extraction of brand values, industry, audience, and tonal "vibe"
  • Intelligent Design Decisions: AI determines optimal logo type (wordmark, pictorial, or abstract)
  • Ranked Concepts: Three strategically different approaches, ordered from best (1) to least optimal (3)
  • Design Rationale: Every logo includes objective, third-person documentation explaining geometric and conceptual choices
  • True Vector SVG Export: Download logos as production-ready SVG with smooth bezier curves via ImageTracer vectorization
  • Professional UI: Lightfield-inspired utilitarian interface with "high-end industrial laboratory" aesthetic
  • Edge Case Handling: Graceful fallbacks when company names aren't explicitly mentioned

Logo Types

Type Description Best For
Wordmark Text-based logo using company name Brands with distinctive names
Pictorial Recognizable real-world object (like Apple's apple) Clarity and name reinforcement
Abstract Geometric shapes conveying symbolic meaning (like Nike's swoosh) Flexibility and trademark uniqueness

Tech Stack

  • Framework: Next.js 15 (App Router)
  • Styling: Tailwind CSS v4
  • AI: Gemini 2.0 Flash via Google AI API
  • Database: Supabase (optional, for persistence)
  • Deployment: Vercel

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Gemini API key

Installation

# Clone the repository
git clone https://github.com/yourusername/marque-logo-generator.git
cd marque-logo-generator

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local and add your API keys

Environment Variables

Create a .env.local file with:

# Required
GEMINI_API_KEY=your_gemini_api_key_here

# Optional (for persistence)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

Run Development Server

npm run dev

Open http://localhost:3000 to see the app.

Supabase Setup (Optional)

If you want to persist generations, create this table in Supabase:

CREATE TABLE generations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  transcript TEXT NOT NULL,
  logo_data JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Allow public access (no auth required)
ALTER TABLE generations ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow public access" ON generations
  FOR ALL USING (true) WITH CHECK (true);

Deployment

Deploy to Vercel

  1. Push your code to GitHub
  2. Import the project to Vercel
  3. Add environment variables in Vercel's project settings
  4. Deploy!

Deploy with Vercel

Design Principles

The logo generator follows these principles of good logo design:

  1. Simple – Easy to recognize and remember at a glance
  2. Distinctive – Clearly different from competitors; avoids clichés
  3. Relevant – Fits the brand's purpose, audience, and tone
  4. Scalable – Legible at any size, from favicon to billboard
  5. Versatile – Functions in black & white and across mediums
  6. Timeless – Avoids trends that date quickly
  7. Clear – Communicates without explanation or excess detail

Project Structure

├── app/
│   ├── api/
│   │   └── generate/
│   │       └── route.ts      # Logo generation endpoint
│   ├── layout.tsx            # Root layout with fonts
│   ├── page.tsx              # Main dashboard
│   └── globals.css           # Global styles
├── components/
│   ├── LogoCard.tsx          # Individual logo display with export
│   ├── LogoRenderer.tsx      # SVG string → viewable/scalable image
│   ├── ResultGallery.tsx     # Ranked logo results grid
│   └── TranscriptInput.tsx   # Transcript input form
├── lib/
│   ├── prompts.ts            # AI prompt engineering (design principles, constraints)
│   ├── supabase.ts           # Database client
│   └── transcriptParser.ts   # Transcript analysis utilities
└── .env.local                # Environment variables

Design Constraints

All generated logos adhere to these constraints for professional quality:

  • Monochrome — Black on white only, enforcing visual clarity
  • Geometric simplicity — Limited to <path>, <circle>, <rect>, <polygon>
  • Stroke consistency — Uniform weight across all elements
  • Self-critique — AI evaluates output against design principles before finalizing

SVG Export Technology

Logos are generated as raster images by Gemini's image generation model, then converted to true vector SVG using ImageTracer bitmap-to-vector tracing. This produces clean SVG paths with smooth bezier curves—identical to professionally designed logos—rather than pixelated rectangle approximations. The exported SVG scales infinitely without quality loss.

Documentation

See PROCESS.md for detailed development process documentation, including prompt engineering iterations and design decisions.

About

Analyzes meeting transcripts to automatically generate brand identities and professional SVG logo concepts.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors