Customization and branding

Scopes come in a very flexible customization package where you can add your brand’s identity through colors, logos and arranging cards and categories.

• Header and background ›

• Card and category design ›

For code templates and visual examples see our developer guide.

Header and background

The header allows for the most customization, as you can change the color of the background, insert your own branded logo, or use different text colors and fonts.

We provide a set of several elements that you can use to change the look of your scope header, background and text color.

Standard header

BBC scope

7 Digital

SoundCloud scope

Creating a logo and using a specific color helps users identify more with a brand. You can use the color of your logo in the text, background or buttons also to create an overall look and feel.

Things you can change

• Foreground color

• Background color

• Using the Ubuntu Shape

• Category header background

• Preview button color

• Logo overlay color

• Page header logo

• Page header foreground color

• Page header background

• Page header divider color

• Page header navigation background

To get inspired why not check out how the branded SoundCloud scope was created in this handy tutorial, or simply flick through the default scopes on your Ubuntu device.

See where each header component can sit in our Component section.

Category and card design

The templates define how result cards are laid out within a category, where you are free to use your own layout and rendering style using a template declared in your scope code; but there are rules.

See our Core Scope page for inspiration or the Components section on the different ways you can place components in cards, as well as card sizes and layouts.