Style Guide

A comprehensive component library for our website, logo suite downloads and brand colour values

Snowplow x FCD: This 'Brand System' marks a turning point for Snowplow's Webflow journey. This page consolidates all layouts, headings, and other global styles. Use this pages as a reference. Various aspects need to be ported from FCD's Unbreaklable Framework.

Typography

Fonts and sizes used through the entire website

Fonts

Headings

Robelia

Headings + Body

Mona Sans

Inter

Heading 1

H1 Headings

Element

3xl

Class

2xl

Class

large

Class

Heading 2

H2 Headings

Element

large

Class

medium

Class

small

Class

Heading 3

H3 Headings

Element

Class

Heading 4

H4 Headings

Element

Class

Heading 5

H5 Headings

Element

Class

Heading 6

H6 Headings

Element

Class

Paragraph

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

PXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lists

Unordered List

List A
List B
List C

Unordered List

List A
- Nested List 1
  - Nested List 2
List B
List C

Ordered List

List A
List B
List C

Ordered List

List A
1. Nested List 1
  1. Nested List 3
List B
List C

Misc

Links

Text Link

Block Quotes

Block Quote

Colours

Text Color

u-text-color-white

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-text-color-gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-text-color-gradient-v2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-text-color-turquoise-500

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-grey-500

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-grey-500

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Buttons & UI

Various links and buttons used throughout.

Buttons

Components

Button

Button Text

Button

cc-medium

Button Text

Button

Dark Purple

Button Text

Button

Purple Outline

Button Text

Button

White Outline

Button Text

Primary

button

Button Text

button

cc-purple-btn

Button Text

Outlined

button

cc-outlined-1

Button Text

button

cc-outlined-white

Button Text

Forms

Contact forms and other interactive user input fields.

Option 1

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Option 2

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Tracking

Hidden fields for UTM parameter capture and page URL

<!-- Requires fcd-utm-hidden-fields.js -->
<input type="hidden" class="utm_source" name="utm_source" value="">
<input type="hidden" class="utm_medium" name="utm_medium" value="">
<input type="hidden" class="utm_campaign" name="utm_campaign" value="">
<input type="hidden" class="utm_term" name="utm_term" value="">
<input type="hidden" class="utm_content" name="utm_content" value="">

<!-- Requires fcd-capture-page-url.js -->
<input type="hidden" id="pageurl" name="PageURL" value="">

<!-- CF7 fields 
  [hidden utm_source default:get]
  [hidden utm_medium default:get]
  [hidden utm_campaign default:get]
  [hidden utm_term default:get]
  [hidden utm_content default:get]
-->

These hidden form fields are pre-applied to the sample forms above. WordPress CF7 must be added manually.

Page URL: insert here

HTML Elements

A collection of global UI elements & HTML components. This section is used to reference anything from badges to global HTML elements.

Modal

This uses an HTML <dialog> to get all of the accessibility benefits for free. The modal should always come before the button that opens it. To update the modal contents, select it in the navigator, and add any value to open attribute in the element settings.

Requires fcd-open-modal.js on GitHub (Release v1.0.7 or higher)

Modal

Theme Switcher

Controls the dark / light / system colour preferences and stores the value inside the local browser storage.

Requires fcd-theme-switcher/logic-part1.js and fcd-theme-swtcher/logic-part2.js on GitHub (Release v1.1.3). A configuration script must be placed in the <head> - a sample is found in GitHub.

Potential Privacy Violation: This script adds a value to the local storage. It is a third-party script (loaded from an external source) and therefore, must be disclossed in the privacy policy.

Generic Notices

A collection of notices used to indicate errors, success, and warnings

General

Tip: You can use the contact details above and this yellow notice throughout the project.

Warning

Tip: You can use the contact details above and this yellow notice throughout the project.

Success

Awesome! We've sent your message.

Error

Oops! Something has gone wrong...

System Notices

These are used by scripts (i.e. click to copy URL)

Success

Page URL Copied!

Error

Error copying URL. Please try again or refresh

Site Notices

Used within the navbar primarily but can be place anywhere.

Dismssable

Fixed

Preview: You're viewing example pages on START:Sites, please return to the getting started page.

Global HTML elements

A collection of notices used to indicate errors, success, and warnings

section_global

container_global

btn-hold

NOTE: These HTML elements have a combo class to display here.

Swiper Pagniation

Swiper Scrollbar

Effects

Various effect classes like glows and shadows which can be applied to primary elements.

Spacers

u-card-shadow

Utility CSS

These are often used throughout a project for space, padding and margin changes.

Spacers

05em-spacer

1em-spacer

2em-spacer

3em-spacer

4em-spacer

5em-spacer

6em-spacer

Margin

Top

u-mt-auto

margin-top: auto;

u-mt-0

margin-top: 0;

u-mt-xxs

margin-top: 0.25rem;

u-mt-xs

margin-top: 0.5rem;

u-mt-small

margin-top: 1rem;

u-mt-medium

margin-top: 1.5rem;

u-mt-normal

margin-top: 2.5rem;

u-mt-large

margin-top: 3.5rem;

u-mt-xl

margin-top: 4.5rem;

u-mt-xxl

margin-top: 6rem;

u-mt-ultra

margin-top: 7rem;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-xxs

margin-bottom: 0.25rem;

u-mb-xs

margin-bottom: 0.5rem;

u-mb-small

margin-bottom: 1rem;

u-mb-medium

margin-bottom: 1.5rem;

u-mb-normal

margin-bottom: 2.5rem;

u-mb-large

margin-bottom: 3.5rem;

u-mb-xl

margin-bottom: 4.5rem;

u-mb-xxl

margin-bottom: 6rem;

u-mb-ultra

margin-bottom: 7rem;

Padding

Top

u-pt-0

padding-top: 0;

u-pt-xxs

padding-top: 0.25rem;

u-pt-xs

padding-top: 0.5rem;

u-pt-small

padding-top: 1rem;

u-pt-medium

padding-top: 1.5rem;

u-pt-normal

padding-top: 2.5rem;

u-pt-large

padding-top: 3.5rem;

u-pt-xl

padding-top: 4.5rem;

u-pt-xxl

padding-top: 6rem;

u-pt-ultra

padding-top: 7rem;

Bottom

u-pb-0

padding-bottom: 0;

u-pb-xxs

padding-bottom: 0.25rem;

u-pb-xs

padding-bottom: 0.5rem;

u-pb-small

padding-bottom: 1rem;

u-pb-medium

padding-bottom: 1.5rem;

u-pb-normal

padding-bottom: 2.5rem;

u-pb-large

padding-bottom: 3.5rem;

u-pb-xl

padding-bottom: 4.5rem;

u-pb-xxl

padding-bottom: 6rem;

u-pb-ultra

padding-bottom: 7rem;