Logo & brand assets

Vector masters (SVG)

Infinitely scalable — the source of truth for printers, signwriters, embroiderers and designers. -white for dark backgrounds, -black for light; mono versions are single-colour for embroidery, vinyl and engraving.

Transparent PNG exports

For quick use in documents, decks and socials. The 4096 px files print at roughly 35 cm wide at 300 DPI — large enough for clothing and banners.

Site credit

Every site we build carries this credit in its footer — a small tracing loop that links back home. Building with an AI agent? Tell it: "add the oo.studio site credit exactly as documented at oo.studio/brand/oo-credit.md" — the full instruction (placement, code, rules, verification) lives in oo-credit.md.

HTML

<a href="https://oo.studio" target="_blank" rel="noopener" class="oo-credit">
  <span>website by</span>
  <svg width="36" height="24" viewBox="0 0 36 24" aria-hidden="true">
    <path class="oo-loop" pathLength="100" d="M8 12 C8 7.5, 14.5 7.5, 18 12 C21.5 16.5, 28 16.5, 28 12 C28 7.5, 21.5 7.5, 18 12 C14.5 16.5, 8 16.5, 8 12 Z"/>
    <path class="oo-light" pathLength="100" d="M8 12 C8 7.5, 14.5 7.5, 18 12 C21.5 16.5, 28 16.5, 28 12 C28 7.5, 21.5 7.5, 18 12 C14.5 16.5, 8 16.5, 8 12 Z"/>
  </svg>
  <strong>oo.studio</strong>
</a>

CSS

.oo-credit { display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 system-ui, sans-serif; color: #a89f8d;
  text-decoration: none; transition: color .3s; }
.oo-credit:hover { color: #fbbf24; }
.oo-credit path { fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; }
.oo-loop { opacity: .35; }
.oo-light { stroke-dasharray: 25 75; stroke-dashoffset: 0;
  animation: oo-trace 2.4s linear infinite; }
@keyframes oo-trace { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .oo-light { animation: none; opacity: 0; }
}

Only the two colours may change — base to the host footer's muted text colour, hover to the site's accent. Everything else (paths, classes, words, pathLength="100") stays exactly as is.

Rules of thumb

• Clear space: keep at least the height of one "o" free around the logo.
• Minimum size: wordmark ≥ 90 px / 24 mm wide; mark ≥ 24 px / 8 mm.
• Only black or white — the logo never takes colour; colour belongs to the work.
• Don't stretch, outline, shadow or re-space the letterforms.

Typeface: Inter (oo = Bold 700, .studio = Medium 500, letter-spacing −0.05em). Full notes in README.txt.