Back to CodeKeeper

CodeKeeper brand guidelines

Download the logo for social media, or grab the embed code to drop the live animated logo onto The Social Station vanity site.

1. Static logo (social, avatars, print)

The mark with the ring fully colored in. SVG scales to any size without blur.

On light backgrounds
On dark backgrounds
Download logo (SVG)

2. Animated logo for the vanity site

The signature drain-and-refill ring. Use whichever snippet fits the site — both are dependency-free.

Live preview (30s loop)
Download animated logo (SVG)
Option A — hosted file (simplest)
<img
  src="https://YOUR-CODEKEEPER-DOMAIN/codekeeper-logo-animated.svg"
  alt="CodeKeeper"
  width="280"
  height="80"
/>

Upload codekeeper-logo-animated.svgto the site's assets, then replace the URL above. Or paste the fully self-contained version below — no hosting required:

Option B — inline SVG (no hosting)
<svg xmlns="http://www.w3.org/2000/svg" width="274" height="80" viewBox="0 0 548 160" role="img" aria-label="CodeKeeper">
  <defs>
    <linearGradient id="ck-grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#6633EE"/>
      <stop offset="55%" stop-color="#FF5470"/>
      <stop offset="100%" stop-color="#FFB443"/>
    </linearGradient>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&amp;display=swap');
      .ck-word { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
    </style>
  </defs>
  <text x="20" y="116" class="ck-word" font-size="96" fill="#14092E">C</text>
  <circle cx="112" cy="81.44" r="27.18" fill="none" stroke="rgba(20,9,46,0.12)" stroke-width="14.77"/>
  <circle cx="112" cy="81.44" r="27.18" fill="none" stroke="url(#ck-grad)" stroke-width="14.77"
          stroke-linecap="round" stroke-dasharray="170.78" transform="rotate(-90 112 81.44)">
    <animate attributeName="stroke-dashoffset" dur="30s" repeatCount="indefinite"
             keyTimes="0;0.92;1" values="0;170.78;0" calcMode="linear"/>
  </circle>
  <text x="143" y="116" class="ck-word" font-size="96" fill="#14092E">deKeeper</text>
</svg>