REACH gives you the ability to use your organization’s branding throughout your site. This includes adding your logo and setting your color scheme and fonts.

To get started, go to Settings > Portal Branding. 

This Portal Branding Guide covers all of your options:

Logos#

Logo File

Ideally, 200KB or under and at least 100x100px in size

Favicon File

Ideally, 1KB or under and 192x192px in size

Default Page Design#

Body Font Family

The font used for the main text content on your website. We offer several sans-serif fonts to choose from as these are considered easy to read on screens and are widely supported across different devices.

Heading Font Family 

The font used for the headings on your website. We offer several sans-serif fonts to choose from as they are clean, modern, and easily readable at larger sizes, making them ideal for grabbing attention in headings.

Should you prefer, you can add a custom font. When doing so, you will need the: 

• Link tag – A stylesheet link tag from a hosted font service such as Google Fonts
• Title – The name of the font, which should match the linked stylesheet exactly.
• Fallback Font – The system font the browser should fall back to if there is a problem loading your custom font. 

Standard Colors#

Next to each field, add in the Hex code for your preferred colors. 

Background Color

This color is the background of your website. The most common background color is white (represented by the hex code #FFFFFF) or a lighter color as they are considered clean, neutral, and allows the content to stand out prominently, ensure readability and focus on the key elements of the page.

Default Text Color

This color is used by default for all text on your website. The most common default text color is black (represented by the hex code #000000).

Heading Text Color

For optimal readability on most websites, the heading text color for your H1, H2, H3, etc headings is typically a dark color like black (represented by the hex code #000000) or a deep shade of gray (example being the hext code #666666) against a lighter background, ensuring good contrast and making the headings stand out clearly. 

Primary Color (Link Color) 

The website’s primary color is the color used for hyperlink text.

Content Wrapper Background Color

The Content Wrapper Background Color is the color or design behind the main content of your webpage, distinguishing it from the rest of the layout and enhancing clarity with a contrasting style.

Message Background Color

Note: This is not used in standard REACH Themes. The Message Background Color is the backdrop behind a webpage’s main content, shaping the site’s tone and aesthetic while reflecting the brand. It should contrast with the text to ensure readability and let primary content stand out. 

Default Header Background Color(no image)

This is the color applied to headers when no image is used, often matching the primary color of the design.

Default Header Text Color(no image)

This is the color applied to header text when no image is used, often white (represented by the hex code #FFFFFF).

Menu Design Colors#

Site Name Color

The Site Name Color is the color used for the website’s title and is typically displayed prominently at the top of the page when a logo is not used. It’s often the same as the primary color and chosen to contrast strongly with the background. 

Menu Background Color

The Menu Background Color is the color behind a webpage’s navigation menu. To ensure easy navigation, use a distinct, contrasting color. Most commonly, white (represented by the hex code #FFFFFF) is used for a clean, visible design.

Menu Link Text Color

The Menu Link Text Color is the color used for your menu titles. Most commonly, this color matches your default text color for a clean, visible design. 

Banner Sections Colors #

Background and Button Color

This color will be used as the background color on your banner sections. Banner sections are also known in REACH as hero images or hero banners. If an image is present in your banner but does not span the entire banner area, this banner background color will be used. This is also the color that will be used for the buttons on your website. Most commonly, this color is the same as your primary or secondary color. 

Button Text Color

This color will be used as the text color inside all of your buttons. Most commonly, this is white (represented by the hex code #FFFFFF) to be easily visible inside a colored button.

Button Hover Background Color

This color appears when a visitor hovers over a button, placing their cursor on it without clicking. It is often the same as the Default Text Color or Heading Text Color to maintain brand consistency.

Button Hover Text Color 

This text color appears when a visitor hovers over a button, placing their cursor on it without clicking. It is often white (represented by the hex code #FFFFFF) to be easily visible inside the colored button hovered background color. 

CSS Option#

You can also Add Custom CSS to include your branding on your Donation Pages, Supporter Login Page and/or Donor Pages.

This can also be done under Settings > CSS Editor.

Banner Images, Tag Lines and Call to Action#

You can add your banner images, tag lines and Call to Action (which includes other text formatting and color options) under Settings > Portal Setup.

While there, go through each tab (Home Page, Sponsorships, Campaigns, Projects, Places and Products) and customize as desired.

See our Portal Setup article for more information.