Living Style Guide

A living style guide is a great tool to promote visual consistency, unify UX designers and front-end developers, as well as speed up development times.

This style guide should be updated regularly and every time a new module or element is added, the HTML should be amended to match the CMS templates.

Usage

Start by adding the following files to your page:

<link rel="stylesheet" href="assets/toolkit/styles/toolkit.css">

<script src="assets/toolkit/scripts/toolkit.js"></script>

Colour

The elements of this style guide are primarily rendered in monochrome, in line with the Toronto Fringe brand guidelines.

While the Masterbrand itself appears only in black and white, the individual programs have a colour palette that can be used. These colours are used when referencing the programs around the site. They may shift / change depending on the marketing materials for the festivals that year.

Masterbrand

Programs

Genres

Venues

Misc.

Fonts

The two font stacks used in this style guide are:

Headings

"Odudo Soft", Helvetica, sans-serif

Body copy

"BW Modelica", Helvetica, sans-serif