youtube location facebook twitter linkedin

Getting Started

This styleguide is intended to help designers and developers make consistent design decisions within the site. Here you'll find common styles / components. This guide gives us consistent language to use when referring to these elements when discussing this site.


Typography

Integrity sites use Oswald as the standard heading typeface, and Open Sans for body copy.

Oswald is a reworking of the classic style historically represented by the 'Alternate Gothic' sans serif typefaces. The characters of Oswald have been re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Readability

In the interest of readability, the line length of page content is limited to 62 characters per line (40em at 17px paragraph font size).

First Level Heading

H1 is reserved for page titles, and only one per page.

Second Level Heading

There can be several H2s per page, but they're used sparingly and strategically due to their SEO weight.

Third Level Heading

H3 are the most commonly used headings, as they have moderate SEO value.

Fourth Level Headings

H4 has very little if any SEO value, these are still used to break up content into logical chunks for the reader – within blocks of content that already have an appropriate heading tag.

Fifth Level Heading

H5 is the lowest available heading, and is used on occasion.

Colours

A flexible, yet distinctly branded palette designed to convey authority and trustworthiness while meeting the AA standard of 508 / WCAG2.0 Colour Contrast Requirements.

Primary Colours

SCSS variables are used to control colour consistency as well as maintainability accross the entire site. No need to grab hex codes, just use the specified variable names when developing designs.

Below you'll find the primary Colours of the brand, as well as the SCSS variables associated.

Backgrounds

Content Sections

These can be broken down into 3 main sections.

A Standard Section

This background colour matches the $bg-primary colour. Adding the .bg-primary class to any section will automatically adjust the content's colour for readability.

This is what Link text looks like in a standard section.


A Brand Background Section

This background colour matches the $bg-brand colour. Adding the .bg-brand class to any section will automatically adjust the content's colour for readability.

This is what Link text looks like in a brand background section.


An Off White Section

This background colour matches the $bg-offwhite colour. Adding the .bg-offwhite class to any section will automatically adjust the content's colour for readability.

This is what Link text looks like in an offwhite background section.


A Dark Section

This background colour matches the $bg-dark colour. Adding the .bg-dark class to any section will automatically adjust the content's colour for readability.

This is what Link text looks like in an dark background section.


Buttons

Primary Button

DefaultActiveHover

Brand Button

DefaultActiveHover

Accessibility

Buttons should display a visible focus state when users tab to them.

Avoid using <div> or <img> tags to create buttons. Screen readers don't automatically know either is a usable button.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

Accordions

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapseicons

Collapseicons are often used in 'Grand Central Station' to allow opt-in information for many questions that a user might have.

iFramify

this is a test

this is a test

this is a test

GET A QUOTE