Media center

Logo

A friendly symbol and original lettering. Use the supplied artwork as it is: never redraw it or set the name in a font.

Primary logo

The horizontal logo is the preferred signature for broad spaces. Keep the symbol, the letter shapes and their spacing as supplied.

Logo family

Choose the version that fits the space. Use the symbol alone where the name is already clear.

Horizontal

Stacked

Symbol

Wordmark

Backgrounds

Black artwork on lime, white, blue, orange or green. White artwork on black. Never place the logo on a low contrast color or a busy picture.

Pufy Lime

Black

White

Sky Blue

Signal Orange

Fresh Green

Clear space

Call x the height of the p's counter in the wordmark. Keep at least x free on every side of the artwork. For the symbol alone, use one outer eye diameter.

xx

Minimum clear space

Minimum size

Shown here at their real size. The horizontal logo is at least 160 px wide; the symbol at least 32 px. If the face gets hard to read, make it bigger.

160 px

200 px

260 px

32 px

48 px

64 px

Misuse

Protect the silhouette and keep it legible. These are the mistakes to avoid.

Do not stretch

Do not rotate

Do not change the colors

Do not add shadows or effects

Avoid poor contrast

Do not crop

Color

One signature color and five supporting ones. Use these exact values for digital work; CMYK values are approximate, so proof print on the real paper.

Palette

Lime creates recognition across the app, campaigns and brand moments. Black and white form the foundation; blue, orange and green add variety to agent categories. Use one accent per composition.

Pufy Lime#DFFF00RGB 223 / 255 / 0CMYK 13 / 0 / 100 / 0

Black#000000RGB 0 / 0 / 0CMYK 0 / 0 / 0 / 100

White#FFFFFFRGB 255 / 255 / 255CMYK 0 / 0 / 0 / 0

Sky Blue#31A8FFRGB 49 / 168 / 255CMYK 81 / 34 / 0 / 0

Signal Orange#F15715RGB 241 / 87 / 21CMYK 0 / 64 / 91 / 5

Fresh Green#3EDB84RGB 62 / 219 / 132CMYK 72 / 0 / 40 / 14

Balance

Lime is the signature, not the background of every screen. A suggested balance for a campaign or a set of screens, not a formula for every layout. Black can replace white in dark compositions.

50% neutral30% lime20% accent

Contrast

Use black text on all four bright colors, and white text on black. Pair state colors with a label or an icon, so the meaning never depends on color alone.

Aa / PufyBlack text 18.44:1White text 1.14:1, avoid for body

Aa / PufyBlack text 8.18:1White text 2.57:1, avoid for body

Aa / PufyBlack text 6.11:1White text 3.43:1, avoid for body

Aa / PufyBlack text 11.67:1White text 1.80:1, avoid for body

Typography

Expressive headlines, effortless reading. Both families are under the SIL Open Font License; keep the license files with the fonts.

Download fonts ZIP, 0.5 MB

AaBbCc

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@

Anton Regular, 400

The primary typeface. Bold, condensed and expressive: headlines, short statements and campaign messages.

AaBbCc

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@

Inter Regular 400, SemiBold 600

The secondary typeface: body copy, buttons, labels and interface text. Use the platform's own text styles where it asks for them.

Scale

A starting scale for digital layouts, in size / line height. Use sentence case, and let text grow with the reader's accessibility settings.

Display 64 / 70

Your next idea.

H1 48 / 54

A little help goes far.

H2 32 / 40

What are we making?

H3 24 / 32

Choose an agent

Body 16 / 24

Tell Pufy what you want to get done.

Label 14 / 20

Continue

Graphics

The wink pattern and rounded line icons, as SVG and transparent PNG.

Download graphics ZIP, 65 KB

Pattern

The approved symbol in regular rows with generous spacing. Keep it to supporting areas: packaging, covers and campaign backgrounds. Never set body copy over it.