Brand guide
The Pay It Forward logo files, colors, typefaces and voice, with what partners, press and printers may do with them. Free to download.
The Pay It Forward logo
Two hands, one giving and one receiving, in the blue and green of the program. Every file is the same drawing; use the one that fits the space.
The mark
Two hands in a circle, blue and green. Use it alone where the name is already nearby, or where there's only room for a square.
logo-mark.svg
Mark and name
The mark with "Pay It Forward" under it. The everyday version for posters, flyers, articles and partner materials.
logo-wordmark.svg
Mark, name and tagline
Adds "End food insecurity together". For places with room to say what we do, like a banner or the first page of a report.
logo-full.svgSquare and share images
Clear space and size
Leave clear space around the logo of at least a quarter of the mark's height on every side: no text, edges or other logos inside it. Below 24px tall, use the mark alone.
The mark at the sizes a favicon and an app icon get. The name stops being readable below about 120px wide, so small spaces get the mark alone.
What not to do
- Change the colors
- The blue and green hands are most of what makes it ours. Use the files as they are.
- Stretch or squash it
- Width and height always move together.
- Retype the name
- Set beside the mark in another font, it won't match. Use the mark-and-name file.
- Put it on a busy photo
- Put it on a plain panel, or clear space behind it first.
- Imply a partnership that doesn't exist
- Only active restaurant and community partners say they're part of Pay It Forward.
- Collect donations in our name
- Gifts to the meal pool go through pifboard.com/donate only, so every one is receipted.
Colors
Each color has a job. The numbers are contrast against white and against our body text, measured from the value the site paints with: nothing on this page is typed.
Blue
The main color: links, primary buttons, headers.
Blue 900
#033A5E
11.85:1 on white · 1.38:1 on ink
Headings on light backgrounds, the deepest fills
Blue 700
#0569A9
5.83:1 on white · 2.80:1 on ink
Primary buttons and links
Blue 500
#0682D1
4.10:1 on white · 3.99:1 on ink
The logo's blue. Large numerals and decoration, never body text
Blue 100
#D9ECFA
1.21:1 on white · 13.51:1 on ink
Tinted panels
Green
The second voice: giving, and calls to action.
Green 900
#1C5804
8.58:1 on white · 1.90:1 on ink
Text on green tints
Green 700
#277606
5.70:1 on white · 2.87:1 on ink
Secondary buttons
Green 600
#2B8206
4.88:1 on white · 3.35:1 on ink
The start of the donate gradient
Green 500
#309107
4.05:1 on white · 4.03:1 on ink
The logo's green. Decoration, never body text
Green 100
#E3F3DB
1.15:1 on white · 14.12:1 on ink
Tinted panels and chips
Neutrals
Text and the surfaces it sits on.
Ink
#14212B
16.37:1 on white · 1.00:1 on ink
Body text
Ink soft
#4A5A68
7.11:1 on white · 2.30:1 on ink
Secondary text
Cloud
#F7FAFC
1.04:1 on white · 15.62:1 on ink
The page background
Mist
#EEF5FB
1.10:1 on white · 14.88:1 on ink
Soft section backgrounds
White
#FFFFFF
1.00:1 on white · 16.37:1 on ink
Cards and fields
The pairs the site relies on
Body text needs 4.5:1; large text and icons need 3:1. A test checks every pair below, so a palette change that breaks one can't ship.
Body text
Ink on Cloud15.62:1 · Any text (AAA)
Secondary text
Ink soft on White7.11:1 · Any text (AAA)
Links
Blue 700 on White5.83:1 · Body text (AA)
Primary button
White on Blue 7005.83:1 · Body text (AA)
Secondary button
White on Green 7005.70:1 · Body text (AA)
Headings
Blue 900 on Mist10.78:1 · Any text (AAA)
Chip on green tint
Green 900 on Green 1007.40:1 · Any text (AAA)
Large numerals in the logo blue
Blue 500 on White4.10:1 · Large text and icons only
Type
Both typefaces are free and open source (SIL Open Font License), from Google Fonts. Install them for anything made outside the site rather than substituting.
Quicksand
Free meals for neighbors
Quicksand, bold or semibold. Rounded and friendly, for titles and big numbers.
IBM Plex Sans
Reserve a meal, pick it up at a restaurant partner near you, and show your meal code at the counter.
IBM Plex Sans, regular to bold. Clear at small sizes, for everything people read and tap.
The pieces the pages are built from
Buttons, fields and chips as they ship. Anything built to sit beside the site should use these shapes.
Voice
Plain words, short sentences, and the specific thing. Nobody proves need, so nothing we write asks them to.
We are
We are not
The words we use
| Say | Not |
|---|---|
| Neighbor | recipient, beneficiary, client |
| Reserve a meal | claim a meal |
| Restaurant partner | provider, vendor |
| Community partner | distributor |
| Meal code | voucher, ticket number |
| Donor-funded meals | charity meals, handouts |
What you may do
- Use the logo files as they are
- In articles, event posters, social posts and listings about Pay It Forward.
- Show you're a partner
- Active restaurant and community partners can use the logo, and the window sign from the outreach toolkit.
- Use the colors and typefaces
- To make something that sits beside our name look like it belongs.
- Ask
- For anything not covered here, or a version this page doesn't have.
Questions, or need a version that isn't here? Email hello@pifboard.com. Writing about us? The press page has the facts and a person to talk to.