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.

developer_links.

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

standard_header-1024x219

BBC scope

bbc-news

7 Digital

7d

SoundCloud scope

soundcloud

information-link

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

developer_links.

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.

link_external

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.

link_external

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.