index.html

<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LogoLabs</title>
<meta name="description" content="LogoLabs designs custom logos and brand identities from data, and publishes the research behind it.">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>body { font-family: Inter, system-ui, sans-serif; } h1 { font-family: 'Playfair Display', Georgia, serif; }</style>
</head>
<body class="bg-[#141414] text-gray-100">
<main class="max-w-5xl mx-auto px-5 pt-3 pb-8">

<style>

  .ll-lead { font-size: 1.05rem; line-height: 1.65; }

  .ll-copper { color: #c9754a; }

  .ll-btn { display: inline-block; padding: .45rem .95rem; border-radius: .6rem; font-weight: 600; font-size: .9rem; text-decoration: none !important; }

  .ll-btn-solid { background: #c9754a; color: #fff !important; }

  .ll-btn-solid:hover { background: #b5643c; }

  .ll-btn-line { border: 1px solid #c9754a; color: #c9754a !important; }

  .ll-card { display: block; border-radius: .9rem; overflow: hidden; text-decoration: none !important; transition: transform .15s ease; }

  .ll-card:hover { transform: translateY(-2px); }

  .ll-card img { width: 100%; height: 11rem; object-fit: cover; display: block; margin: 0; }

  .ll-kicker { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #c9754a; font-weight: 600; }

  .ll-links a { color: #c9754a; }

</style>

<p class="ll-lead mb-3">
  <b>LogoLabs designs custom logos and brand identities from data.</b>
  We study how brands are drawn, what their briefs ask for and which choices hold up, and turn a short
  conversational brief into original concepts, refined with you: a logo and full brand guidelines in days, not weeks.
</p>

<p class="mb-5 text-gray-500 dark:text-gray-400">
  The research behind that work is open. These are the models, tools and data we build it on,
  and they run on your own machine or in your browser.
</p>

<div class="flex flex-wrap gap-3 mb-8">
  <a class="ll-btn ll-btn-solid" href="https://logolabs.org" target="_blank">Get a logo designed, from €20</a>
  <a class="ll-btn ll-btn-line" href="https://logolabs.org/contact" target="_blank">Contact us</a>
</div>

<div class="grid md:grid-cols-3 gap-5 mb-8">

  <a class="ll-card border border-gray-200 dark:border-gray-800" href="https://huggingface.co/spaces/Logolabs/inkvec">
    <img src="https://huggingface.co/spaces/Logolabs/README/resolve/main/images/inkvec.jpg" alt="Inkvec before and after, with the traced anchors" />
    <div class="p-4">
      <div class="ll-kicker mb-1">Vectoriser · Apache-2.0</div>
      <div class="font-semibold text-lg mb-1">Inkvec</div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        Turns a PNG, JPEG or WebP logo into a clean SVG: edges to a fraction of a pixel, the fewest curves that match,
        gradients and transparency kept. Try Studio Lite in the browser.
      </div>
    </div>
  </a>

  <a class="ll-card border border-gray-200 dark:border-gray-800" href="https://huggingface.co/Logolabs/agate-preview-001">
    <img src="https://huggingface.co/spaces/Logolabs/README/resolve/main/images/agate.jpg" alt="Agate model release" />
    <div class="p-4">
      <div class="ll-kicker mb-1">Text to image · MIT</div>
      <div class="font-semibold text-lg mb-1">Agate Preview 001</div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        A 260M-parameter model trained from scratch in 145 GPU-hours. GenEval 0.550, level with SDXL,
        and it runs in your browser on WebGPU.
      </div>
    </div>
  </a>

  <a class="ll-card border border-gray-200 dark:border-gray-800" href="https://huggingface.co/datasets/Logolabs/LogoBrief-10K">
    <img src="https://huggingface.co/spaces/Logolabs/README/resolve/main/images/logobrief.jpg" alt="Logos from LogoBrief-10K" />
    <div class="p-4">
      <div class="ll-kicker mb-1">Dataset · gated</div>
      <div class="font-semibold text-lg mb-1">LogoBrief-10K</div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        10,000 brand logos with their original SVGs, style tags, motif descriptions and full design briefs,
        sampled by web popularity and checked for AI-training opt-outs.
      </div>
    </div>
  </a>

</div>

<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
  Also: <a class="ll-copper" href="https://huggingface.co/spaces/Logolabs/agate-webgpu">Agate WebGPU</a> ·
  <a class="ll-copper" href="https://github.com/logolabs/agate-comfyui">Agate for ComfyUI</a> ·
  <a class="ll-copper" href="https://huggingface.co/Logolabs/inkvec-denoiser-001">inkvec-denoiser-001</a> (JPEG and AI-damage cleanup) ·
  <a class="ll-copper" href="https://huggingface.co/Logolabs/inkvec-sr-001">inkvec-sr-001</a> (4× upscaling for logos) ·
  <a class="ll-copper" href="https://github.com/logolabs/inkvec/releases">Inkvec desktop app</a>
</p>

<p class="ll-links text-sm text-gray-500 dark:text-gray-400">
  <a href="https://logolabs.org">logolabs.org</a> · <a href="https://logolabs.org/contact">Contact</a> ·
  <a href="https://github.com/logolabs">GitHub</a> · <a href="https://logolabs.github.io/inkvec">Inkvec docs</a>
</p>

</main>
</body>
</html>