Back to Index

HRF Brand Guide

Use this digital brand guide to manage the HRF website’s brand look and feel, from 'agile' prototype to production. Link directly to the brand CSS to sync website styles with this brand guide.

<link rel="stylesheet" href="../css/evo-brand.css">

Logos

  • HRF Logo
  • URL../image/brand/logo-hrf.svg
  • SASS$logo-hrf
  • CSShrf-logo-bg
  • SVGDownload Logo
  • HRF Logo White
  • URL../image/brand/logo-hrf-white.svg
  • SASS$logo-hrf-white
  • CSShrf-logo-white-bg
  • SVGDownload Logo
  • HEP Logo
  • URL../image/brand/logo-hep.svg
  • SASS$logo-hep
  • CSShep-logo-bg
  • SVGDownload Logo
  • HEP Logo White
  • URL../image/brand/logo-hep-white.svg
  • SASS$logo-hep-white
  • CSShep-logo-white-bg
  • SVGDownload Logo

Colors

  • HRF Green
  • HEX#009877
  • RGB( 0, 152, 119 )
  • SASS$brand_color_1
  • CSShrf-color-1
  • CSShrf-color-1-bg
  • CSShrf-box-color-1
  • HEP Green
  • HEX#78BC42
  • RGB( 120, 188, 66 )
  • SASS$brand_color_2
  • CSShrf-color-2
  • CSShrf-color-2-bg
  • CSShrf-box-color-2
  • HRF Blue
  • HEX#1A9AD6
  • RGB( 26, 154, 214 )
  • SASS$brand_color_3
  • CSShrf-color-3
  • CSShrf-color-3-bg
  • CSShrf-box-color-3
  • HRF Warm Gray
  • HEX#939597
  • RGB( 147, 149, 151 )
  • SASS$brand_color_4
  • CSShrf-color-4
  • CSShrf-color-4-bg
  • CSShrf-box-color-4

Fonts

Place this link at the top of each page.

<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat:400,700" rel="stylesheet">

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

  • Merriweather
  • 400Regular
  • SASS$google-merriweather
  • CSShrf-font-1
  • CSSfont-google-merriweather
  • GETGoogle Fonts

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

  • Montserrat
  • 400Regular
  • SASS$google-montserrat
  • CSShrf-font-2
  • CSSfont-google-montserrat
  • GETGoogle Fonts

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

  • Montserrat Bold
  • 700Bold
  • SASS$google-montserrat
  • CSShrf-font-3
  • CSSfont-google-montserrat-bold
  • GETGoogle Fonts

Icons

Approved icon colors and background color placement.

View All Icons
  • Search White
  • URL../image/brand/search-book-white.svg
  • SASS$icon_search_white
  • CSShrf-icon-search-bg-white
  • SVGDownload Icon
  • Search White
  • URL../image/brand/search-book-white.svg
  • SASS$icon_search_white
  • CSShrf-icon-search-bg-white
  • SVGDownload Icon
  • Search Gray
  • URL../image/brand/search-book-gray.svg
  • SASS$icon_search_gray
  • CSShrf-icon-search-bg-gray
  • SVGDownload Icon
  • Search
  • URL../image/brand/search-book.svg
  • SASS$icon_search
  • CSShrf-icon-search-bg
  • SVGDownload Icon

Images

  • Person
  • URL../image/brand/person.jpg
  • SASS$image_person
  • CSShrf-image-person-bg
  • JPGDownload Image
  • Place
  • URL../image/brand/place.jpg
  • SASS$image_place
  • CSShrf-image-place-bg
  • JPGDownload Image
  • Thing
  • URL../image/brand/thing.jpg
  • SASS$image_thing
  • CSShrf-image-thing-bg
  • JPGDownload Image
  • Texture
  • URL../image/brand/texture.jpg
  • SASS$image_texture
  • CSShrf-image-texture-bg
  • JPGDownload Image

Graphics

  • Infograph
  • URL../image/brand/infograph.svg
  • SASS$graphic_infograph
  • CSShrf-graphic-infograph-bg
  • SVGDownload Graphic
  • Chart
  • URL../image/brand/chart.svg
  • SASS$graphic_chart
  • CSShrf-graphic-chart-bg
  • SVGDownload Graphic
  • Dataviz
  • URL../image/brand/dataviz.png
  • SASS$graphic_dataviz
  • CSShrf-graphic-dataviz-bg
  • PNGDownload Graphic