The
Style Guide
(Lets crack on...)

Brand Colours

There are just 3 colours used repetitively throughout the site, these are all applied through swatches so you can easily change the colours site wide with a couple of clicks.

These are also appable to fonts use the classes .grey .yellow & .white

Menu Variations

There are two colour-ways for the primary menu, both of which contain two child symbols, one for the primary menu and the other for the desktop nav links, if you edit these child symbols inside either of the versions the changes will effect both versions.

Page Headings

Almost all pages contain a large hero sections with the page title appearing in varying font sizes, these are displayed below in both primary colour-ways. All text in the hero should be placed in the <h1> tags with the variations for text and colour achieved through <Spans>. Apply the size first .H1_Size followed by the .Colour

Small
Standard
Standard
Large
HuGe

Small
Standard
Standard
Large
HuGe

Examples

Privacy
Policy

What's
In The Bottle

Heading

Heading

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra, massa a molestie euismod, turpis eros elementum turpis, nec pretium nibh tortor ut massa. In pretium nisl eros, et mollis mauris mattis sed. Suspendisse ipsum nunc, egestas non purus nec, pulvinar molestie ligula. Maecenas id mi et magna eleifend hendrerit. Nullam id orci in tortor rhoncus pellentesque vel ac metus. Quisque at vulputate tortor, et dignissim sem. Etiam dictum consectetur sapien. Aenean quis sapien non felis tristique volutpat. Praesent porta non libero non congue. Suspendisse condimentum lobortis felis.