Setting up your brand and style guide on Spark

Setting up your branding in Spark can be done quickly and easily. To do this you will need the following:

  1. Your logos and favicon design
  2. Your color palette with RGB or hex codes

Note: any change you make to elements or styles will trigger a bar at the top of the page to save or discard your work. Be sure to save your work before leaving the page.

Part one: adding logos

For the best results, you should upload two versions of your logo in the provided sections. One that is lighter in color and looks good on dark backgrounds. The other which is darker and looks good on light backgrounds.

You can also upload an icon for you favicon. Don't worry about converting it to an actual .ico file format. Just upload it as an image and Spark will handle the rest.

Part two: Headers and Footers

Below your brand you will see options to build your header and footer. This is where your site will start to take life.

  1. Use the + buttons to add new header links or footer links. Use Spark's smart links to link header and foot items to their respective pages.
  2. Hover over the Spark UI just below the header or footer for additional options, such as:
  • Enlarging and positioning your logo
  • Changing the background colors of your header and footer
  • Toggling Spark branding

Part three: adding your visual styles

Once you've added logos it's time to customize your style guide. The style section in Spark gives you global control over things like fonts and sizing, buttons, colors, and more.

  1. We recommend starting by selecting fonts. Spark comes with 50+ curated fonts, and we can add custom fonts by request.
  2. Once you've added fonts, set font sizes for each of the elements listed in the style guide.
  3. For highlighting, buttons, and links, be sure to set the correct colors that you want.

Now that you've set up your initial styles and branding, it's time to start creating content.