Contents

• Overview
• What Is Branding
• Step-By-Step Instructions 
  • Access Branding
  • How to Customize Colors and Font
  • Edit the Top Banner
    • Edit the Organization Logo and Title
    • Edit the Colors and Font
  • Edit the Header Menu
  • Edit the Header Dropdown Menu
  • Edit the Navigation Sidebar
  • Edit the Main Content Window

Overview

This step-by-step guide shows Organization Owners and Client Admins how to set up Branding in Next. 

What Is Branding?

Branding lets you customize how the platform looks, including colors, fonts, logos, and your organization's title. Changes apply across all programs and award cycles in the organization. 

⚠️IMPORTANT: Branding is managed at the organization level only. It cannot be changed at the program or award cycle level. 

Who can edit it:

• Organization Owners
• Client Admin

What you can change:

Step-by-Step Instructions 

Access Branding

1. Click Settings in the top menu, then select the Branding tab. Use the left menu on the Branding page to access each section.
   
   

• For each Branding section in the left menu, you can customize colors and font. You can also upload a custom logo and edit the title in the Top Banner.
   
  • To customize colors and font, you'll use the Default/Custom toggles. You can mix and match — for example, keep the default font but use a custom color — without affecting other settings.
     
  • A Live Preview on the right side of the screen updates as you make changes, so you can see how things look before saving.
     

How to Customize Colors and Font 

For every Branding section, you can customize colors and font using these same steps.

📌 Accessibility tip: When choosing colors, make sure there's enough contrast between the text and its background so content is easy to read. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1. Use the WebAIM Contrast Checker to test your color combinations before saving. For more guidance, see Making Color Usage Accessible on Section508.gov.

To customize colors:

1. For any color setting you want to customize, toggle the switch for that setting to Custom. 

Example:

2. Click the + icon to open the color picker. Drag the selector or enter a Hex Code (If the Hex field is not visible, click inside the color picker to activate it). A live Preview on the right side updates as you change colors. Click outside the picker to confirm your selection. 

📌Note: Click Transparent for a see-through background or Inherit for white. 

Example:

To customize fonts:

1. Toggle the Font Family switch to Custom.

Example:


 

2. Click the "Select a font.." dropdown, and choose a font from the list. A live Preview on the right side updates as you select fonts. 

Example:

To save changes:

1. When finished customizing a section, click Save Changes in the upper-right corner, then click Confirm in the pop-up. 

Edit the Top Banner

The Top Banner is the bar at the top of every screen in an organization. It contains your logo, organization title, and the main navigation links.

1. On the Branding page, click Top Banner in the left menu.

Edit the Organization Logo and Title

1. In the Organization Logo section, click Add Image +. 


 

2. Select your image file. 

💡 Tip: For best results, upload a PNG with a transparent background. This way your logo will blend with whatever background color you choose.
 

3. Toggle the Organization Logo switch to Show. You can hide it at any time by toggling it to Hide.


 

4. In the Organization Title section, click inside the textbox, and type the title you want displayed in the Top Banner. 

Edit the Header Menu

The Header Menu contains the navigation links on the Top Banner, such as "Programs," and "Settings."

1.  On the Branding page, click Header Menu in the left menu.

2. To customize colors and font for the Header Menu, follow the steps in How to Customize Colors and Font above, then click Save Changes.

Edit the Header Dropdown Menu 

The Header Dropdown Menu shows the sub-options that appear when you click a link in the Header Menu.

1. On the Branding page, click Header Dropdown Menu in the left menu.

2. To customize colors and font for the Header Dropdown Menu, follow the steps in How to Customize Colors and Font above, then click Save Changes.

Edit the Navigation Sidebar 

The Navigation Sidebar is the left menu that appears inside programs. 

1. On the Branding page, click Navigation Sidebar in the left menu.

2. To customize colors and font for the Navigation Sidebar, follow the steps in How to Customize Colors and Font above, then click Save Changes.
 

Edit the Main Content Window

The Main Content Window is the main area where users work in the platform.

1. On the Branding page, click Main in the left menu.

2. To customize colors and font for the Main Content Window, follow the steps in How to Customize Colors and Font above, then click Save Changes.

What did you think of this article? Please leave a comment below! 
Your feedback helps us improve the experience for everyone.