OPEN Brand Guidelines

 

Our Name

  • OPEN (familiar, preferred)

  • the OPEN Network (more official)

  • the Online Progressive Engagement Network (full title, formal; use once in the beginning of each document)

  • the network (informal, internal)

  • the-open.net (when referring to the website only)

 
recolored logo transparent.png

Primary Logo

Use this logo against any light background like white or light gray. Avoid pairing it with a light blue which will wash out the blue in the lettering.

Click the image to see a full size version. Right click and “Save image as” or “Copy link to image” to send to a colleague.

 

Primary Colors

OPEN’s brand is very sparse — it’s a single word, with the opening letter converted into a “mark” made up of four bold color circles tightly connected. The blue and green are meant to evoke thoughtfulness, empathy and change; the red and orange connote excitement and energy. Together the medley conveys the diversity and vivacity of the OPEN Network.

Blue #0085ba
Green #43b91e
Orange #f37e2b
Red #ee1c24
  • Blue (primary, thought)

    • rgb(0, 133, 186)
    • #0085ba
  • Green (success, change)

    • rgb(67, 185,30)
    • #43b91e
  • Orange (warning, action)

    • rgb(243, 126, 43)
    • #f37e2b
  • Red (error, danger)

    • rgb(238, 28, 36)
    • #ee1c24

Only the primary blue should be used on its own. e.g. a black and white document with a few color flourishes should use only the blue. The other colors are bright and light and are best when used in connection with the rest of the colors and additional branding elements.

 

Other Images

The White Logo

Use this image against a dark background like black, gray, or our primary blue. It has the same dimensions and design as the primary logo but the blue has been swapped out to white.

 

The Logo Mark (Icon)

Use these logos for design flourishes, website icons, or anywhere you need a square-shaped brand mark.

This image is 512px by 512px and can be scaled down to 32, 96, 192 or other dimensions for use as a website icon. Remember always to leave the image twice as large as you expect it to appear, for Apple’s Retina display monitors.

 

Typography

Because our branding is quite sparse, it doesn’t offer a lot of opinions. This means that it’s fine for our website to use some sort of opinionated typography choices while other, less public sites or documents use more vanilla flavours. In other words: don’t stress too much about typography. When in doubt, just use defaults.

  • On this site:

    • Body font is “Libre Franklin”

    • Headings are “Fjalla One”

    • Lots of spacers, padding in between sections.

  • In Google Docs and other environments where these fonts are not available, you can approximate them with:

    • Body font is “Arimo”

    • Headings are “Roboto Condensed”

  • For other web properties like documentation micro-sites or our own web tools:

    • Bootstrap 4’s default typography utilises fallbacks that will result in device-optimised fonts for almost every user. The code for this is:

      • font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI",Roboto, "Helvetica Neue", Arial, 
        "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
    • Default headings are also fine, but Roboto Condensed should be easy to import onto any web page via Google Fonts.