The underlying structure of the website is based on a flexible 12 column grid. The width and horizontal positioning of all page elements is based off this grid, with additional padding equal to multiples of the gutters allowed for inset spacing, or when larger gutters between elements are required.

The header primarily consists of the logo, and multiple tiers of navigation extending from the right edge. The main navigation sits along the same baseline as ‘Collective’ in the logo, with sub-navigation dropdown extending below the menu item. A secondary navigation area is allowed for in the top right corner, for minor navigation items and search.

The home page has an expanded header in dark green, that reaches slightly less than screen height (showing the top edge of the content area). The logo and text appears in warm white, and the tagline is included in lockup with the logo.

The footer has a pure white background, and shows the full logo/tagline lockup, the entire navigation structure, social media links, address block and copyright information.

Text follows the underlying grid system, and makes use of both brand typefaces. Typically Cooper Light is used for larger text and headings, and Rational Text is used for body text and lower level headings.

Beyond raw text, a number of components have been designed to accomodate a variety of content. These may include various box-outs and panels, combining images and text. Brand icons may be sprinkled around to add interest.

Styles are provided for all key form inputs. Button styles make use of the UI icon set, applicable to the action they perform.

In addition to the brand icons, a set of UI icons have been included specific to the website. These serve practical use cases to show actions, act as markers, or for social media links.