COLOR

The MoveOn color palette is a core element of our brand. It is used in the logo, backgrounds, text, illustrations and more.

PRIMARY COLOR PALETTE

MoveOn Blue and MoveOn Red are our primary colors and should be the dominant colors defining our brand. These should always be the most prominent colors in the palette as they are the most representative of the brand. One or the other should be included on all communications.

COLOR USAGE ON DIGITAL PLATFORMS
On the homepage, give the petitions in the carousel a background color that matches it’s tone. For messages with a more positive and supportive tone, use a blue background. For messages that are in opposition to a policy, group, or ideology, use a red background.

Please note: Do not mix red and blue in the same communication.

    PMS 801C
    RGB: 0/171/255
    Hex: #00abff
    CMYK: 85/0/8/0



 

MoveOn Blue
Blue is used to show support or solidarity with a message, movement or cause.

    PMS 2035C
    RGB: 234/28/36
    HEX: #ea1c24
    CMYK: 0/100/95/0



 

MoveOn Red
Red is used to show resistance to a policy, group or ideology.

    RGB: 0/0/0
    Hex: #000
    CMYK: 0/0/0/100




 

Black
 

    RGB: 178/178/178
    Hex: #b2b2b2
    CMYK: 0/0/0/30




 

Gray
 

SECONDARY COLOR PALETTE—FOR WEB USE ONLY

    RGB: 229/245/255
    HEX: #e5f5ff





 

    RGB: 153/221/255
    HEX: #99ddff





 

    RGB: 0/128/191
    HEX: #0080bf





 

    RGB: 0/86/128
    HEX: #005680





 

The Secondary color palette is best used for:

  • Buttons, floating action buttons, and button text
  • Text fields, cursors, and text selection
  • Progress bars

  • Selection controls, buttons, and sliders
  • Links

High-Level Section (Home)

Intensity highIntensity high

Mid-Level Section (Petitions Detail)

Intensity MediumIntensity Medium

Detail-Level Section(Modal)

Intensity LowIntensity Low

Decreasing Intensity (Color as well as layout and design) ⟶
Increasing Flexibility  ⟶

Primary Page
Large fields of color, particularly darker, more saturated colors, should be reserved for the primary pages in the architecture, such as Petitions and Campaigns. Leverage colored backgrounds and full-bleed images to give these sections the weight they deserve.

Secondary and Tertiary Pages
For pages further into the site architecture, such as an individual petition or an informational modal, use white and lighter blues for a more toned-back look. This approach will help keep copy-heavy pages approachable and readable. It will also differentiate them from the core pages of the experience, reinforcing the user’s place in the system.

Which color values should I use?

Pantone® and CMYK values are used for printed materials such as print ads, merchandise, and brochures.
RGB is used for on-screen applications such as video, digital, and mobile.
HEX values are for web use only.

  • Do not convert a spot, RGB or CMYK swatch within a design application: use the values outlined above.
  • Do not use Pantone Color Bridge to convert to RGB or CMYK values.