Boop brand assets

Logo

The wordmark with the pebble after the p. Use this one whenever there’s room. On light backgrounds the pebble is ink with white eyes; on dark it flips to white with ink eyes.

Variations

Each one has a different job. They’re all the same family: the same word, the same pebble.

Wordmark, no pebbleFor tight spaces, sizes under 20px, and anywhere the pebble already appears nearby.

lightSVGPNGdarkSVGPNG

Symbol: the pebbleSocial avatars and anywhere the name is already written next to it.

lightSVGPNGdarkSVGPNG

Lockup: pebble + wordmarkA full pebble left of the plain wordmark. For app headers and partner pages.

lightSVGPNGdarkSVGPNG

Lockup: rising pebble + wordmarkThe half-peeking version. Headers, decks and partner pages.

lightSVGPNGdarkSVGPNG

Lockup: in-app pebble + wordmarkDocs and how-it-works diagrams. It shows where Boop sits: on the edge of someone else’s app.

lightSVGPNGdarkSVGPNG

Boop · Your users’ favorite AI×

Boop · Your users’ favorite AI×

Favicon, home-screen icon and avatarThe favicon is the bare pebble and follows the browser’s theme. The home-screen icon and avatar are the white pebble on an ink square (iOS can’t show a transparent icon).

favicon.svgfavicon.icoapple-touch 180icon 512avatar 400

Lift AssistantClaude · Powered by

“Powered by” badgeIn the Boop panel inside a founder’s app: “Powered by” in the app’s own font, then the plain wordmark in the subtitle’s gray. No pebble: the mascot is already in the header.

lightSVGPNGdarkSVGPNG

Personality marksThe wink and the on-the-ledge pose. For social posts, launch moments and empty states, never in place of the logo.

Which one to use

One rule covers most cases: if there’s room, use the primary logo. If the pebble is already on screen, use the plain wordmark.

Clear space and minimum size

Keep empty space around the logo equal to the pebble’s height on every side. Nothing else goes inside that box.

Color

Boop is ink and white. The only real color belongs to the AI models, as a soft glow inside the product. Tap a swatch to copy its hex.

Core

Grays

Model glow (product only)

Not used: purple, violet and yellow, plus orange, coral, green and teal outside the model glow. Keeping those out means the color on screen always tells you which model is talking. Red is kept for errors.

Type

The logo font and the text font are separate on purpose. The logo is drawn as a shape, so it looks the same everywhere, whatever font the page around it uses.

The pebble

He lives on the edge of the app, blinks, glances at taps and does small tricks. Tap any of these to boop him.

Do and don’t

Mostly about keeping the pebble special and the word clean.

Spec

The single source of truth, brand/logo.json. The site, the panel and every file on this page read the logo from it, so a logo change is one edit.

{
  "name": "boop",
  "version": "1.0",
  "date": "2026-10-05",
  "wordmark": {
    "text": "boop",
    "font": "Albert Sans",
    "weight": 800,
    "letterSpacingEm": -0.06
  },
  "type": {
    "logo": "Albert Sans 800, logo only, outlined as a shape",
    "site": "keep the current UI font",
    "inApp": "host app font or system font",
    "mono": "Geist Mono"
  },
  "pebble": {
    "after": "p",
    "sizeXHeight": 0.56,
    "gapEm": 0.1,
    "lift": 0,
    "overshoot": 0.025,
    "shape": "pebble",
    "eyeScale": 1,
    "gaze": "straight",
    "blinkSeconds": 6
  },
  "color": {
    "ink": "#0A0A0A",
    "white": "#FFFFFF",
    "paper": "#F7F7F5",
    "onLight": {
      "word": "#0A0A0A",
      "pebble": "#0A0A0A",
      "eyes": "#FFFFFF"
    },
    "onDark": {
      "word": "#FFFFFF",
      "pebble": "#FFFFFF",
      "eyes": "#0A0A0A"
    },
    "glow": {
      "claude": "#E8793A",
      "gpt": "#10A37F"
    }
  },
  "symbols": {
    "favicon": "pebble-bare",
    "lockups": [
      "pebble",
      "rising pebble"
    ],
    "docs": "in-app pebble",
    "badge": "none"
  },
  "minSize": {
    "primaryPx": 20,
    "plainPx": 12,
    "symbolPx": 16
  },
  "poweredBy": "Powered by"
}