Branding: Colors & Images

Make your site and apps look like your brand. In Branding, you set your logo, favicon, and background images, and choose the colors used across your website, mobile apps, and TV apps.

In this article:

Images: your logo, favicon, and background images
Colors: what each color controls
- Base colors · Buttons · Menu · Text · Toolbar · Login, play, and purchase pages · Program guide (EPG)
Preview your branding: see where each color appears

Go to Branding and use the menu at the top of the page to switch between Colors and Images.

Images

Upload your images as PNG or JPG files.

Platform images

Logo: your logo, shown on your site and apps.
Favicon: the small icon that appears in the browser tab next to your site name.

Mobile background images

Background: the main background of your mobile apps.
Login Background: the background of the mobile login page.
Registration Background: the background of the mobile registration page.

TV and desktop background images

TV Background: the main background on TV apps and desktop.
TV Login Background: the background of the TV and desktop login page.
TV Registration Background: the background of the TV and desktop registration page.

Tip: for the login and registration pages, use a welcoming image of your content rather than your logo. It's the first thing new viewers see.

Colors

Click a color swatch to pick a color, or type its hex code. Hover over the ⓘ icon next to any color to see where it's used.

Base colors

Primary Color: your main brand color, used for highlights and interactive elements.
Secondary Color: a complementary color for secondary elements.
Background Color: the main page background across your platform.
Highlight Color: used for hover states and highlighting selected items.

Buttons

Button Primary: the background of main action buttons, such as Subscribe.
Button Text Primary: the text inside those buttons.
Button Secondary: the background of secondary, outlined buttons.
Button Text Secondary: the text inside secondary buttons.
Button Border: the border of outlined and secondary buttons.

Menu Background: the background of the navigation menu or sidebar.
Menu Text: the menu item labels.
Menu Icon: the icons in the navigation menu.
Menu Selected: highlights the menu item that is currently open.
Menu Separator: the divider lines between menu sections.
Drawer Selector: marks the selected item in the side drawer.

Text

Primary Text: titles, headings, and body text.
Secondary Text: descriptions and other details, in a softer color.
Subscription Text: the text on subscription cards.

Toolbar Background: the top toolbar or header bar.
Toolbar Text: the text and icons in the top toolbar.

Login, play, and purchase pages

Login Primary Text: the main heading on the login page.
Login Secondary Text: subtitles and helper text on the login page.
Play Primary Text: the title and main text on the video page.
Play Secondary Text: the description and details on the video page.
Purchases: Primary Text Color: the title, benefits, subscription name, and price on the subscription wall.
Purchases: Secondary Text Color: the subtitle, billing period, and subscription description on the subscription wall.

Program guide (EPG)

EPG Primary: the main accent color in the program guide.
EPG Highlight: highlights the program that is on air now.
EPG Background: the background of the guide grid and cells.
EPG Text: program titles and times.

Preview your branding

Click Preview Branding at the top right of the Branding page. It opens a reference page that shows where each color appears on your site and apps. You can switch between the mobile and desktop looks.

You can also open it any time by adding /color-reference to your Bamboo domain, for example https://demo.bamboo-cloud.com/color-reference.

Your colors apply to your website and all your apps. Each platform uses them in its own layout, so the exact placement can vary slightly between them.

Learn more: Set Up Your Bamboo Site & Apps · Navigation: Building Your Apps & Site Menu

Need help? Contact us.