Brand

looot brand assets

Mark, wordmark, colours and sizes, plus every file for Slack, social and press. Each download is generated from the same ring geometry the product renders.

lt

LoootLogoReveal

looot (1.2s) -> toool (0.8s) -> oOo (1.2s), rings draw in once on mount

lt

cropped, size=96, tone=dark

outer rings cut by the 220x96 frame, matches the reference screenshot

The mark

size=16

size=24

size=32

size=48

size=96

The wordmark

lt

size=20

lt

size=22

lt

size=28

lt

size=40

Colour treatments

lt

green on light

default -- text-primary, off-white or white background

lt

currentColor on dark

wrapped in .dark -- rings and text both flip to the dark tokens

ink only

one-colour print, watermarks -- see looot-mark-ink.svg

Clear space

Minimum clear space on every side is x, the outer ring's own radius (4.1 units on the mark's 32-unit viewBox). Nothing -- text, a card edge, another logo -- enters that margin.

Minimum sizes

  • Mark alone: 16px. Below that the rings blur into a smear.
  • Wordmark: 18px. Below that, drop the letters and use the mark alone.

Where it lives

  • Marketing header: wordmark size=22, top-left, inside a link to /.
  • App sidebar: wordmark size=28, in a 64px-high row, px-5.
  • Mobile sheet title: wordmark size=28.
  • Auth shell: wordmark size=20, top-left.
  • Footer: mark size=22 next to the word "looot"; mark size=16 in the bottom bar.
  • Favicon: app/icon.svg, 32px raster fallback.
  • OG image: 1200x630, wordmark centred, tagline below.

Do / don't

  • Do keep the rings brand green (or currentColor on dark) -- always.
  • Do keep the middle ring's bar pattern -- it is never a flat fill.
  • Do give it the clear space above before anything else touches it.
  • Don't recolour the rings to match a one-off page theme.
  • Don't put text inside the rings, stretch the mark, or use the patterned ring alone.
  • Don't add a drop shadow, or drop it on a busy photo without the off-white plate.

Downloads

looot-mark.svg

looot-mark.svg

32x32 - 496 B

Green mark, vector. Slack/Discord emoji, print, anywhere you can drop an SVG.

looot-mark-ink.svg

looot-mark-ink.svg

32x32 - 478 B

Ink mark, vector. One-colour print, watermarks, dark-on-light contexts that should not read as brand-green.

looot-mark-white.svg

looot-mark-white.svg

32x32 - 478 B

White mark, vector. Overlays on photos or the brand green itself.

looot-mark-256.png

looot-mark-256.png

256x256 - 4.7 KB

Green mark, 256px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.

looot-mark-512.png

looot-mark-512.png

512x512 - 16.5 KB

Green mark, 512px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.

looot-mark-1024.png

looot-mark-1024.png

1024x1024 - 37.4 KB

Green mark, 1024px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.

looot-mark-on-green-1024.png

looot-mark-on-green-1024.png

1024x1024 - 42.3 KB

White rings on a solid green square, 1024px, square corners. Use where the platform itself rounds the corner (Slack, most app-icon slots).

looot-app-icon-1024.png

looot-app-icon-1024.png

1024x1024 - 31.7 KB

Green mark at ~60% width on off-white, square. Slack app icon (512-2000px accepted), GitHub org avatar, Google OAuth consent-screen logo.

looot-wordmark.svg

looot-wordmark.svg

420x140 - 547.7 KB

Ink text + green rings, vector, transparent. Docs, decks, anywhere the background is already off-white or white.

looot-wordmark-white.svg

looot-wordmark-white.svg

420x140 - 547.6 KB

All-white wordmark, vector, transparent. Dark backgrounds, photos, the brand green fill.

looot-wordmark-1024.png

looot-wordmark-1024.png

1024x358 - 8.6 KB

Ink wordmark, 1024px wide, transparent PNG, real Inter 600 letterforms.

looot-wordmark-2048.png

looot-wordmark-2048.png

2048x717 - 22.0 KB

Ink wordmark, 2048px wide, transparent PNG, real Inter 600 letterforms.

looot-wordmark-on-offwhite-2048.png

looot-wordmark-on-offwhite-2048.png

2048x717 - 46.2 KB

Wordmark on the brand off-white plate, 2048px. Cover slides, doc headers.

looot-og-2400x1260.png

looot-og-2400x1260.png

2400x1260 - 89.2 KB

2x of the site's og-image.tsx composition. Slack/Discord/iMessage link unfurls at retina density.

looot-x-header-1500x500.png

looot-x-header-1500x500.png

1500x500 - 22.0 KB

X (Twitter) profile header, 1500x500.

looot-linkedin-banner-1584x396.png

looot-linkedin-banner-1584x396.png

1584x396 - 27.4 KB

LinkedIn company-page banner, 1584x396.

looot-linkedin-logo-400.png

looot-linkedin-logo-400.png

400x400 - 15.5 KB

LinkedIn company-page square logo, 400x400.

looot-avatar-800.png

looot-avatar-800.png

800x800 - 27.5 KB

Square avatar, mark centred on off-white, 800px. Slack workspace icon, X/LinkedIn personal or bot avatar.

looot-slack-cover-1600x800.png

looot-slack-cover-1600x800.png

1600x800 - 42.1 KB

Slack workspace/channel cover image, 1600x800, wordmark left-aligned with the tagline underneath.

apple-touch-icon-180.png

apple-touch-icon-180.png

180x180 - 2.6 KB

apple-touch-icon, 180x180, off-white background (iOS never applies its own backing).

favicon-32.png

favicon-32.png

32x32 - 691 B

Favicon, 32x32, transparent (matches app/icon.svg's own 32px raster fallback for browsers that need a PNG).

favicon-16.png

favicon-16.png

16x16 - 345 B

Favicon, 16x16, transparent (matches app/icon.svg's own 32px raster fallback for browsers that need a PNG).

looot-maskable-512.png

looot-maskable-512.png

512x512 - 16.9 KB

PWA maskable icon, 512x512, mark kept inside the 80% safe circle Android/iOS may crop to.

looot-reveal.gif

looot-reveal.gif

800x300 - 144.6 KB

looot -> toool -> oOo -> looot, one full loop, 30fps. Slack/showcase use.

looot-reveal.webm

800x300 - 30.2 KB

Same loop as looot-reveal.gif, VP9/alpha, smaller file for web embeds.