BRANDING
GUIDELINES

Welcome!

ProgressNow NM’s brand identity helps cultivate a shared vision for our brand so we can achieve consistency in everything we put into the world. These four words, describe how we come across in our tone, design and spirit.

Truth

Integrity

Intelligence

Passion

The first three are touchstones that guide our journalistic approach in combating disinformation and promoting progressive issues and policies. We think about and write for everyone – challenging ourselves to convey important concepts with clarity, a touch of humor where appropriate, and brevity that translates across cultures and generations. We are conscious of inclusion in every sentence we write – from gender neutral pronouns to vocabulary choices that respect race and ethnicity.

The fourth word distinguishes our work from the rest: Passion.

Our team members care deeply about what they do and the ethos of ProgressNow NM. We’re a small group of talented individuals who are personally invested in and motivated by the ProgressNow NM mission.

This is ProgressNow NM’s hub for branding & style guidelines. It helps ensure we effectively communicate our brand for years to come. From typography and color palettes, to buttons, forms, and imagery specifications – it’s our visual voice. 

Here's to looking good!

Logos & Usage

Responsive Logo Design

ProgressNow NM incorporates a responsive logo approach in our branding. Our logo changes in size, elements and color to accommodate and adapt to where they are placed. 

Logotype

Because brand recognition is of utmost importance to us, our logotype serves as a primary visual element.

The ProgressNow NM logotype plays off the traditional news organization, but with a contemporary flare in the fine lines and circular letter shapes suggesting fluidity and movement. Each letter was handcrafted and designed to create a sense of continuity in an organic wave. Each typeform was carefully kerned to add to the sense of flow.

Usage

The ProgressNow NM logotype is predominately displayed on the header of all of our web pages.

  • Always use the logo files provided in the logo pack
  • Do not recreate or alter the logotype or its colors
Logomark
Building strong brand recognition is important to ProgressNow NM. For this reason, the logo should only be used where horizontal space required by our logotype is not available.
Primary Logomark
Usage
  • Only use if horizontal space is limited
  • Avoid using at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
Alternate Logomarks
Usage
  • Only use if horizontal space is limited
  • Use the primary logo unless color background placement indicates otherwise
  • Avoid using at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
Logo Lockup

Building strong brand recognition is important to ProgressNow NM. For this reason, the logo should only be used where horizontal space required by our logotype is not available. Only use the Logo Lockup if New Mexico is needed in the branding.

Usage
  • Only use if horizontal space is limited and the words ‘New Mexico’ are needed in the branding
  • Use the gold lockdown logo unless color indicates otherwise
  • Avoid using at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
Special Use Logomarks
Predominately used on social media banners, ProgressNow NM’s special use logos echo the content category color palette and serve as a system to help the viewer easily identify their unique areas of interest. (see Color for details)
  • Resist | Justice
  • Education
  • Elections
  • Energy + Environment
  • Gender + LGBTQ+
  • Immigration
  • Reproductive Justice
  • Worker Rights
Resist | Justice
Education
Elections
ENERGY + ENVIRONMENT
GENDER + LGBTQ+​
immigration
Reproductive justice
Workers Rights
Usage
  • Only use for social media
  • Avoid using at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
Logos on Colored Background or Images

Our logotype should only be used on very light or very dark backgrounds. Use the white version on dark backgrounds and the dark version on light backgrounds. Don’t overlay the logotype on a photograph or gradient unless it is positioned on a very light or very dark area of the image.

Dark • GREAT
Neutral • AVOID
Light • GREAT
Dark Image or with overlay • ACCEPTABLE
Image + white logo • DON'T DO IT!
image + dark logo • DON'T DO IT!
Usage
  • Only use on dark or light backgrounds
  • Only use on dark images or images with an overlay
  • Avoid using at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
One Color Glyph

The logotype or color logo are our primary logos. In cases where a single color glyph is needed, please use only either Black or White for the glyph and the wordmark.

Usage
  • Only use when it’s not possible to use our primary logotype or logomark
  • Always use the logo files provided in the logo pack
  • Do not recreate or alter any of the logos or their colors
Favicon Set

Website favicons, android, apple touch, favicon, mstile, safari pinned tab.

Usage

  • Special use: website favicons.

Color

To match the new bold feel of the website, we have a distinctive color scheme that is a tongue-in-cheek play on the news industry publishing tradition: black, white, and red. Our palette is built around a bold lead color trio: Not Quite Black, White Knuckle, and No Stopping Us Red – signifying our unique approach in combating disinformation through Truth, Integrity, and Intelligence. Our accent color – Heart of Gold – represents the passion each ProgressNow NM staff member adds to the mix .

The supporting palette of bright colors were inspired by the content categories in which we strive to combat disinformation:

  • Resist | Justice
  • Education
  • Elections
  • Energy + Environment
  • Gender + LBGTQ+
  • Immigration
  • Reproductive Justice
  • Worker Rights

Together, our colors are a celebration of the people we serve, and a permanent reminder of all things we need to protect.

Not Quite Black

Not Quite Black

HEX
#222625

RBG
R: 34 G: 38 B: 37

CMYK
C: 73 M: 64 Y: 65 K: 70

White Knuckle

White Knuckle

HEX
#FFFFFF

RBG
R: 255 G: 255 B: 255

CMYK
C: 0 M: 0 Y: 0 K: 0

No Stopping Us Now Red

No Stopping Us Now Red

HEX
#FF0000

RBG
R: 255 G: 0 B: 0

CMYK
C: 0 M: 99 Y: 100 K: 0

Heart of Gold

Heart of Gold

HEX
#D3B574

RBG
R: 211 G: 181 B: 116

CMYK
C: 18 M: 26 Y: 64 K: 0

Resist | Justice

Resist | Justice

HEX
#12E0B9

RBG
R 18 G 224 B 185

CMYK
C 62 M 0 Y 42 K 0

Education

Education

HEX
#FF0000

RBG
R: 255 G: 0 B: 0

CMYK
C: 0 M: 99 Y: 100 K: 0

Elections

Elections

HEX
#0041FF

RBG
R 0 G 65 B 255

CMYK
C 85 M 71 Y 0 K 0

Energy + Environment

Energy + Environment

HEX
#3DFF00

RBG
R: 61 G: 255 B: 0

CMYK
C: 59 M: 0 Y: 100 K: 0

Gender + LBGTQ+

Gender + LBGTQ+

HEX
#8338EC

RBG
R: 131 G: 56 B: 236

CMYK
C: 66 M: 77 Y: 0 K: 0

Immigration

Immigration

HEX
#FABC3C

RBG
R: 250 G: 188 B: 60

CMYK
C: 2 M: 28 Y: 88 K: 0

Reproductive Justice

Reproductive Justice

HEX
#F101D3

RBG
R: 241 G: 1 B: 211

CMYK
C: 22 M: 86 Y: 0 K: 0

Worker Rights

Worker Rights

HEX
#01B0F1

RBG
R: 1 G: 176 B: 241

CMYK
C: 69 M: 13 Y: 0 K: 0

Typography

Montserrat is ProgressNow NM’s signature font. Its rounded forms echo fluidity and movement. Used for both headlines and body copy, Montserrat displays universally across the web. It provides ease in readability both online and in print.

Barlow Condensed provides contrast to the fluidity of Montserrat expressing stability and strength. Through the use of bold letter-spacing Barlow Condensed enhances the design providing visual texture.

H1 Montserrat • 4em/0.9em | font-weight: 100 | letter-spacing: -2

ProgressNow NM Combating Disinformation

H2 Montserrat • 3.5em/1em | font-weight: 100 | letter-spacing: -1

ProgressNow NM Combating Disinformation

H3 Montserrat • 2.2em/1em | font-weight: 200 | letter-spacing: -1

ProgressNow NM Combating Disinformation

H4 Montserrat • 1.6em/1em | font-weight: 200 | letter-spacing: -.5

ProgressNow NM Combating Disinformation

H5 Barlow Condensed • 1.5em/1em | font-weight: 200 | letter-spacing: 7.5 | UPPERCASE
ProgressNow NM Combating Disinformation
H6 Barlow Condensed • 1em/1em | font-weight: 600 | letter-spacing: 7 | UPPERCASE
ProgressNow NM Combating Disinformation
P Montseurat • 16px/2.2em | font-weight: 200 | margin-bottom: 1.2rem |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Sapien pellentesque habitant morbi tristique senectus. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Sit amet risus nullam eget felis eget nunc. Lacus sed turpis tincidunt id. Massa enim nec dui nunc mattis enim ut. Hendrerit gravida rutrum quisque non tellus orci ac. Interdum varius sit amet mattis vulputate. Ac auctor augue mauris augue neque gravida in fermentum et. Quis commodo odio aenean sed adipiscing. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed elementum tempus egestas sed sed risus pretium quam.

Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Convallis aenean et tortor at risus viverra. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Amet cursus sit amet dictum sit amet justo donec enim. Ornare aenean euismod elementum nisi. Ac ut consequat semper viverra nam. Massa enim nec dui nunc mattis enim ut tellus. Vel pharetra vel turpis nunc eget lorem dolor sed. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Porttitor rhoncus dolor purus non enim. Vitae suscipit tellus mauris a diam maecenas sed. Aliquam sem fringilla ut morbi tincidunt. Lacus vel facilisis volutpat est velit egestas dui id ornare. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus.

The Anatomy
of a Post

The Anatomy of a Post

The ProgressNow NM website was designed to automatically generate consistent, professionally designed posts – without requiring authors to have any design skills. The magic lies in following a few simple guidelines.

  • 1. Feature Image

    Much of the ProgressNow NM site design centers around high quality images that draw the viewer in. Quality stock photography should be used for the featured image. Featured images should have a width of 1920 pixels and cropped to a height between 1080px-1200px. All images – featured and embedded – should be optimized. Featured image files should be 800kb or smaller. Inserted images should be 300kb or less.

  • 2. Content Category

    The content category is automatically generated by the website -– no need to do anything!

  • 3. Post Title

    The Post Title should not exceed 62 characters! IMPORTANT: Not following this guideline will cause homepage blocks to jump and disrupt the viewer readability. With a built in character counter, it's easy to do!

  • 4. Date

    The date is automatically generated by the website. If you would like a different date to appear, simply change the publish date.

  • 5. Author

    When entering a post, there are two additional fields: Author First Name and Author Last Name. If you would like the post to have a generic author, enter ProgressNow as the first name and NM as the last name.

  • 6. Body

    TIPS FOR KEEPING YOUR SITE HAPPY, HEALTHY AND FAST!
    1. It’s best practice to enter your text directly in in the WordPress editor!
    2. If pasting from Microsoft Word, Google Docs or any other editor, click the "Paste as Text' button first. This will remove all formatting – which is a good thing! Formatting from external editors can causes ongoing issues with the site. Don't waste your time formatting in Word or Google Docs! Time is much better spent formatting in the WordPress Editor.
    3. Other than the exceptions below (Header, Links, Quotes) - do not format any of your text. Use the paragraph style. Use BOLD sparingly.
    4. The EM dash is your friend! Instead of using a hyphen directly after a word, hit the spacebar, followed by option+hyphen on a Mac. On Windows, it's a bit more difficult – you have to enter it from the emoji popup. Instead, it's easier to simply click the 'Special Character' button in the WordPress editor and insert the EM Dash (towards the middle of the 2nd row).

  • 7. Header

    DESIGN INTERVENTION! The site generates all the formatting styles behind the scenes. You'll only see 2 style formatting options in the WordPress editor: Paragraph and Heading 3. Use the H3 Header to communicate what's most important and divide content into major subjects. Write headers that are clear and concise to catch the reader's attention.

  • 8. Links

    LINKS DONE RIGHT!
    1. Apply links to key words – not complete sentences.
    2. Be sure not to include leading or trailing white spaces in your link.
    3. Help viewers to not lose sight of your site! When linking to external websites, be sure to select the "Open Link in New Tab" option. If your link is internal (linked to an article on the ProgressNow NM site), you don't need to select this option. They'll remain on your site!
    4. Security is of utmost importance on the ProgressNow NM site. We've included scripting that obfuscates email addresses in posts. In the rare case when including an email address in a post, use this format:  [email]info@progressnownm.org[/email]

  • 9. Pull Out Quotes

    Pull Out Quotes are an integral design element in the ProgressNow NM website. Your goal: find one sentence in each post that would make a great pull out. Pull outs not only add to the visual design, they break the monotony in long posts and keep the viewer engaged.

  • 10. Lists

    Lists should be used sparingly and with purpose! Both numbered and bulleted lists are available. Everything in moderation!

Visuals

Photographs are an integral part of the ProgressNow NM website design adding richness and emotion.

There’s truth to the adage that a picture paints a thousand words. Each post on the ProgressNow NM website leads with a full-screen photo. This image pulls the viewer in. By putting thought into the stock photo you select, you also help the reader understand what the written piece is trying to convey.

Image Specifications

Featured Image
  • image: select a high-resolution stock photo that is at least 1920×1080
  • width: 1920 pixels
  • height: crop to 1080-1200 pixels high
  • optimize: save as 72ppi
  • file size: 800kb or less
Post Images
  • preferred width: 1200 pixels in width when possible
  • smaller: if images are smaller than 1200 pixels, center them in your post
  • optimize: save as 72ppi
  • file size: 400kb or less

Image Compression Technology

Image compression technology has been added to your website, but only works…if you do the basics first!

  • optimize: save as 72ppi
  • featured image file size: 800kb or less
  • embedded post image file size: 400kb or less

Social Media

Coming soon…

Visual

Coming soon…

Content Style: Writing

Coming soon…

Writing
VOICE & STYLE

Coming soon…

Voice

Coming soon…

ProgressNow NM Specific Terminology

Coming soon…

BREVITY

Coming soon…

Gender Neutral Pronouns

Coming soon…