PBgif, the brand tour

PBgif, one bite at a time.

What it is, how it works, and how it looks. Tap, type and play.

Dig in ↓
What it is
Part 1 · Meet PBgif
Chapter 1 of 18

Send the perfect GIF with your photos as a PBgif.

You're not stuck with the same old GIFs anymore. Now you can make them with your friends and your own photos, in seconds. Pick the moment, type a caption, send it. A few taps and it's done. So easy even your grandma can do it.

Why it exists
Chapter 2 of 18

Reaction GIFs with your friends in them.

You're always sending GIFs as a reaction. But wouldn't it be way better if those same GIFs had your friends in them, or said exactly what you wanted to say? That's PBgif: the classic GIF, made and customized exactly how you want it.

How it got made
Chapter 3 of 18

How it got made.

It started as an idea, turned into an obsession, and couldn't be dropped until it was done. And here we are.

Try it
Chapter 4 of 18

Try it. Type yer own words.

WHO ATE IT?
I DON'T KNOW

Tap Top text or Bottom text to type, just like the app. The keyboard only shows while you type. Pick a color under the PBgif. Typing stops when the line is full.

Free PBgifs wear the little slice in the corner. Paid takes it off, and gives you lots more ways to customize.

Open it
Part 2 · How it works
Chapter 5 of 18

Open it. Lunch is served.

Open PBgif and a quick picnic intro plays: the cloth rolls out, the bread slides in, and the PB and jelly get spread. Then pick a plate: Make a PBgif or My PBgifs.

My PBgifs
Recent
Most used
I DON'T KNOW
SO GAY!
THE GAYEST!!!
WAY GAY!
NOPE
BRB, MAKING A SANDWICH
Make a PBgif
GIFs made easy peasy, PBgeezy.
Make a PBgif
Paid ad here · 320 × 100
Ad
My PBgifs

Coming from Messages? It skips the intro and goes straight to your PBgifs.

Make a PBgif
Chapter 6 of 18

Make a PBgif. A few taps.

Tap Make a PBgif. Shoot a Live Photo or a short video, or pick one you have. Pick the part you want, type the top and bottom text, tap Make it, then send. It's right in Messages too, with your PBgifs first.

Quick: shoot
Quick: shootMake a PBgif opens the camera. Square. Tap for a Live Photo, hold for up to 3 seconds of video.
My PBgifs
Chapter 7 of 18

My PBgifs. Every one you made.

Every PBgif you make is kept in My PBgifs. Play it again, edit it later, or save it to Photos.

Saved
SavedGood news slides down in Burnt Toast and goes away.
The name
Part 3 · The brand
Chapter 9 of 18

Why PBgif? PB and J. And jif.

Everybody knows how to make a PB&J. It's the go-to lunch: fast, easy, and hard to mess up. That's exactly how making a PBgif should feel.

And the gif part? People still argue about how to say GIF. Steve Wilhite, the guy who invented the GIF in 1987, said it's “jif,” like the peanut butter. He even joked, “Choosy developers choose GIF.” So PBgif says it his way: PB‑jif. PB and J, all in one.

That's the whole look too: cream bread, grape jelly, a picnic cloth, and sandwich puns in the little words.

The icon
Chapter 11 of 18

Lunch on a picnic cloth.

The glossy slice on lavender gingham, checks a quarter of the bread wide, with a strong shadow so it lifts off the cloth.

Same art in the Messages + menu.

The colors
Chapter 12 of 18

Grape Jelly on fresh Bread.

Reading text is Burnt Toast. In the app, Grape Jelly is only for things you can tap. The tour and guide also use it for headlines and labels. Every color pair is checked so the words are easy to read.

1 · Brand colors

Strict. Every button, word, screen and the cloth.

Tap a color to copy its code. RGB is for screens, CMYK is for print, and Pantone is the closest ink.

2 · Logo colors

Only in the logo, the PB titles and button shading. Never for text.

3 · Helper colors

Rare, for special jobs.

4 · Free colors

Anything goes inside the content: your photos, your PBgifs, seasonal and holiday recipes, recipe ads. A Halloween pack can be orange and black inside its card, but the buttons, words and screens around it stay brand colors. Words still have to be easy to read.

The lettering
Chapter 13 of 18

Round, friendly, and very meme.

Fredoka for titles and the main button. SF Pro Rounded for the rest of the app, at Apple's sizes (Apple only lets it be used on Apple devices, so outside the app Nunito stands in). Anton only for the meme captions on PBgifs, nowhere else.

Easy peasy, PBgeezy
The titles
Chapter 14 of 18

Written in peanut butter.

Any time a toast sits on the gingham and needs a title, the title is written in peanut butter: on the website, in the app, in marketing, and on every chapter of this tour.

The letters look like the PB in the logo: fat and puffy, with a little glow in the middle. The title rests on top of the toast, half on and half off, and drips down onto it: 3 to 5 round drips, all different lengths.

When jelly runs down from above, like between the chapters here, it lands on a letter, makes a little pile, and sometimes drips once. The letters always stay easy to read.

Short titles only, so a title always fits on one line.

The buttons
Chapter 15 of 18

Puffy, drippy, and squishy.

Every button is a puffy marshmallow with 0 to 4 short running jelly drips, different every time it shows up. Grape Jelly is the jelly, Peanut butter is the PB. Delete gets a bite.

Small round buttons

BackShareDelete

Same colors as the big ones, Apple's icons in white, no drips. Stacked buttons sit 8 pt apart, and a long drip can land on the button below.

Panels you swipe down

Make a PBgif

Every panel you can swipe down wears a glob of peanut butter on its top edge, with a shiny down arrow in it. It sits up 9 pt above the edge and drips over it. Swipe down or tap outside to close.

Tap a button. It squishes. The drips only change when the page loads again. If someone has Reduce Motion turned on in iPhone settings, it just darkens.

The voice
Chapter 16 of 18

Sandwich puns in the little words.

GIFs made easy peasy, PBgeezy.

The tagline, and the App Store subtitle: 30 of 30 characters.

Plain words, PBgif words

Tap a card to flip it.

The rules
Part 4 · The rules
Chapter 17 of 18

The house rules.

Nine of them. Tap one to open it.

1Burnt Toast for reading, Grape Jelly for tapping

In the app, titles and text are Burnt Toast and Grape Jelly marks only things you can tap. The tour and guide may also use Grape Jelly for headlines and labels.

2The slice wears its toasted rim

Always, on every use of the slice.

3Give it room

A quarter of the slice width on every side. The app icon is exempt.

4Never too small

Never smaller than: slice 48 pt, letters 32, flat 24, typed word 20 (a fingertip is about 44 pt). The badge on free PBgifs is the one exception.

5Letters must stand out

At least 3 to 1 against what's behind them. Plain brown letters on Lavender don't make it (2.2 to 1). With the dark PB edge they do (3.3 to 1), like the PB titles. Otherwise use the slice.

6Cloth, not behind words

The gingham cloth is a welcome background. Just never right behind reading text or a PBgif: those sit on a toast, card or plate.

7Brand colors on the brand

Buttons, words and screens use the brand colors. Anything goes inside the content (photos, PBgifs, seasonal recipes, ads), as long as the words are easy to read.

8Errors pop up, good news slides down

Every error is a pop-up with one fix button. Saved is a Burnt Toast bar.

9No dark mode

The app looks the same when the phone is set to dark.

Leftovers
Bonus · Didn't make the cut
Chapter 18 of 18

Leftovers. The ones that got tossed.

The real logo took more than thirty rounds. These are some of the ideas that came before it. Tap one to see why it got tossed.

Tap it again to wipe off the peanut butter.

Then the mushed one showed up and filled the whole slice. That's the logo you already met.