Colors

pp-indigo 600#38296DCMYK: 90,90,10,25
pp-amber 500#FAA310CMYK: 0,40,100,0

Color palette amber

We have a palette of ambers we use for different

pp-amber 500#FAA310CMYK: 0,79,83,10
pp-amber 400 (CTA)#FAB33CCMYK: 100,0,100,50
pp-amber 300#FBC468CMYK: 0,0,0,100
pp-amber 200#FCD493CMYK: 0,16,42,1
pp-amber 100 (menu)#FEE7C2CMYK: 0,9,24,0
pp-amber 50 (banner)#FFF4E4CMYK: 0,4,11,0
pp-amber 25#FFF9F0CMYK: 0,2,6,0

Color palette indigo

pp-indigo 600#38296DCMYK: 90,90,10,25
pp-indigo 500 (charts)#534786CMYK: 0,40,100,0
pp-indigo 25#F6F5FBCMYK: 2,2,0,2

Color palette gray

When we need grays, we use the following grays based on Tailwind:

pp-gray 700#374151CMYK: 90,90,10,25
pp-gray 600#4B5563CMYK: 0,40,100,0
pp-gray 500#6B7280CMYK: 16,11,0,50
pp-gray 400#9CA3AFCMYK: 11,7,0,31
pp-gray 300#D1D5DBCMYK: 5,3,0,14
pp-gray 200#E1E3E7CMYK: 3,2,0,9

Color palette charts

For charts, we need colors that are easy to distinguish from each other.

pp-amber 500#FAA310CMYK: 0,40,100,0
pp-indigo 500#534786CMYK: 38,47,0,47
pp-turquoise#14B8A6CMYK: 89,0,10,28
pp-pink#F43F5ECMYK: 0,74,61,4
pp-amber 200#FCD493CMYK: 0,16,42,1

The colors should be used in the following sequence:

Examples of these colors in action in graphs:

Fonts

On this site, we use Readex Pro for headings and a system sans-serif font for the body copy. We use Inter for copy in designs. In the logo, we use the AZO Sans font.

Within the Progress Planner plugin, we use the system fonts used by WordPress and Roboto in our designs.

Style

Progress Planner in writing

We always write Progress Planner with a space.

Sentence and title case

We always use sentence case unless we write a badge or product name. For example:

  • Progress Planner plugin 
  • Awesome Author badge
  • Jack January badge

Looking for our logo?

You're in the right spot!

Check out our Brand Assets page.