Introduction

Welcome to the style guide for NETTLETON SURFBOARDS. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.

To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

Your style guide is not viewable to the public, and can only be accessed with a password.

Typography

The primary colour for all typography on your website is #FFFFFF.

The quick brown fox jumps over the lazy dog.

font-family: GothamBook;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 30px; 
letter-spacing: 0.11em;
text-transform: uppercase;

H2 Sans

The quick brown fox jumps over the lazy dog.

font-family: GothamBook;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 22px; 
letter-spacing: 0.07em;
text-transform: uppercase;

The quick brown fox jumps over the lazy dog.

font-family: Reckless Neue;
font-style: normal;
font-weight: medium;
font-size: 18px;
line-height: 18px;

The quick brown fox jumps over the lazy dog.

font-family: GothamMedium;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px; 
text-transform: uppercase;

The quick brown fox jumps over the lazy dog.

font-family: GothamMedium;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 13px; 
letter-spacing: 0.1em;
text-transform: uppercase;

The quick brown fox jumps over the lazy dog.

font-family: GothamMedium;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 11px;
 letter-spacing: 0.05em;
text-transform: uppercase;

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

font-family: Reckless Neue;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 18px;

SMALL TEXT

font-family: Reckless Neue;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 15px;

SMALL TEXT ITALIC

font-family: Reckless Neue;
font-style: italic;
font-weight: normal;
font-size: 10px;
line-height: 15px;

BUTTON TEXT

This is a piece of text. Not quite the same as a paragraph element.

font-family: GothamMedium;
font-style: normal;
font-weight: normal;
font-size: 8px;
line-height: 9px;
letter-spacing: 0.05em;
text-transform: uppercase;