Showreel Studio Help
Help · Brand kits

Make a kit from your app

Read your app's colours, type, logo and masthead into a new brand kit in a minute.

Video A kit from your app0:43

Showreel Studio can open your app and read its brand into a new kit, so your films look like your product from the start.

Before you start

  • Your app is connected. See Connect your app.
  • The app is running at the address its profile names.

In the app

  1. Open Kits and find Make a kit from the app.
  2. Give the kit a folder id (lower-case letters, digits and dashes, such as acme) and, if you like, a brand name. Leave the name empty to read it from the app.
  3. Choose the app.
  4. If the app serves its own fonts, tick the box to bring their files in, but only if their licence lets you embed them in films and decks. See Fonts and font licences.
  5. Press Make it. The kit's page opens when it is done.

In the terminal

showreel kits new acme --from-app --name "Acme"

Add --licensed to bring in font files the app serves itself. Add --force to make the kit again over one of the same id.

When the app shows someone else's brand

Some apps wear their customer's brand: a white-labelled product, or a demo account that belongs to a sample customer. Read from the screens, the kit would come out in the customer's colours, logo and name. Instead:

  1. Under brand from, choose the product's website, and give its address.
  2. Give the product's name.
  3. Under never ours, name the customer the screens show, such as the demo account's company. Separate several with commas.

Its logo and name are then passed over, and the kit takes the product's own brand from its website. In the terminal:

showreel kits new harbour --from-app --brand-from site --brand-url https://harbourhire.example --product "Harbour Hire" --not-ours "Northwind Films"

To keep these for every kit made from the app, put them in its profile: about.product, about.notOurs and brand.

If you have the product's brand guide, add it to the app's About page and accept its brand. Kits made from the app then take the guide's colours and fonts, without opening the app at all.

If you make the kit from the screens anyway, its notes warn you when the screens show a never-ours name, or call the app something other than the product.

What it reads

  • Colours: the background, the main text colour, the accent from buttons, links and the stylesheet's brand colours, and a second accent. The masthead bar is always dark, so white titles read on it.
  • Type: the fonts of the headings, body and code. A Google font is named. A system font such as Helvetica is swapped for the nearest Google font, because it looks different on every machine.
  • Logo: the masthead's logo. A dark logo on the dark bar has its black and grey shapes turned white.
  • Masthead: the logo's width and position and the bar's height.

The voice, motion and cuts come from the showreel kit.

Check the result

The kit's page shows Made from your app: each thing found, where it was found, notes on what to check, and the screen it was read from. Change anything that is not right in the kit editor, then press Render preview.

What next