Style guide

This page is a brief overview of style elements which allows us to document, design and build our website with consistency. Please read the documentation for each section as any changes made to individual classes/code may have adverse affects across the site.

Colour

These are the swatches of all brand colours used across the Reason site. We have documented these in code so that we can add their values to Webflow's designer interface for continuity.

Typography

Here you will find the master styling for all basic text elements that make up the core content of a rich text block. Any changes made to these classes will be affected on all pages and device breakpoints.

This is a H1

This is a h2

This is a H3

This is a H4

This is a H5

This is a H6

‍

This is a paragraph with the appropriate classes for bold, italic, sub/super script, text hyperlink and block-quote styles.
Lorem ipsum dolor sit amet consectetur. Faucibus aliquam ac ac metus et ac eu aliquet. Dui et vitae arcu purus pulvinar sit urna quam ac. Donec in pellentesque amet rhoncus ^{varius lorem} ultrices. Quam et a ams _vestibulum vitae libero. Lectus aenean a integer sodales tristique faucibus massa pretium. Facilisis scelerisque sem enim lacus.

‍

Here is an example of bullet list styling

Bullet list item here
Bullet list item here
Bullet list item here
Bullet list item here

‍

Here is an example of numbered list styling

Numbered list item here
Numbered list item here
Numbered list item here
Numbered list item here

‍

"This is an example of a rich content blockquote"

‍