Skip to content

Set up your brand kit

Add your logos, colors and fonts once so every page of your website looks like you.

Your brand kit is your logo, colors and fonts. Set them once and every page ColibriOS draws follows them: your pages, booking, shop and checkout.

Steps

  1. Open Website > Brand kit.
  2. Under Logos, upload your logos. There are four slots:
    • Favicon: 512 x 512 px, the little icon in the browser tab.
    • Wide logo: about 600 x 200 px, for your site header and emails.
    • Square logo: 512 x 512 px, for social profiles.
    • Tall logo: about 400 x 600 px, a stacked version.
  3. Pick your fonts: Heading font, Body font and Accent font (the small flourishes, like the line above a headline).
  4. Choose a Corner shape (Sharp, Soft, Rounded or Pill buttons), a Hero style for the big opening banner, and Button text (As typed or All caps).
  5. Set your Global color palette. Primary and Accent color your buttons, links and highlights. The other slots cover headings, body text, subtle text, borders, section tints, cards and the page background.
  6. Add a Link preview image, 1200 x 630 px. This is the picture people see when your website is texted, posted or sent in a message.
  7. Press Save public site.

Good to know

  • Logos save the moment you upload them. Everything else saves when you press Save public site.
  • A PNG with a see-through background works best for logos.
  • Leave any slot empty and your site keeps its base look there.
  • If two colors are hard to read together, a warning shows under the palette. Reset entire palette puts every color back.
  • Your choices always win. A template or an imported design only fills the slots you left empty.
  • Pages you imported keep their own fonts, colors and buttons. The brand kit styles the pages built in ColibriOS.
  • The link preview image starts working once your site is on a web address you own. Facebook, LinkedIn and iMessage hold on to the old picture for a while, so give a change a day.
  • The Brand kit card lower on the tab lists your colors and fonts. Click a color to copy it for social posts and flyers.
  • The same tab has Footer gallery (up to four photos above your site’s footer) and your social links.