Colour Palette
Bay of Many
1. Subtle Text [Links]
#23507D
Oakwyn Gold
2. Alt Accent [Hover]
#b18d2f
Black
3. Strongest Text
#000000
Elephant
4. Strong Text
#11273D
Mine Shaft
5. Medium Text
#333333
Silver
6. Subtle Text
#878787
Regent St Blue
7. Subtle Background
#9abbdd
Concrete
8. Lighter Background
#F2F2F2
White
9. Page Background
#FFFFFF
Fruit Salad
10. CTA button
# 569F6A
Typography
Managed in Customize > General > Typography
Title Font: tERMINA
Google Equivalent: Syncopate
Font size: 36px / Line Height: 1.15 em
Letterspacing: 6px
Text-Transform: Uppercase
Heading Font:
Barlow Semi Condensed
Base Font: Barlow
Font size / line height: 17px / 1.35em
Font weight: 400 (normal)
Brand Font
Wordmark Font: Azo Sans Black & Regular
https://fonts.adobe.com/fonts/azo-sans
Google equivalents: Raleway, Montserrat (use for social media)
Type Samples: H1 Heading goes here. H1 Heading goes here. H1 Heading goes here.
Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text.
Here is a paragraph of text with headline class to emulate H1 appearance.
Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text.
H2 Heading goes here. H2 Heading goes here. H2 Heading goes here.
H3 Heading goes here. H3 Heading goes here. H3 Heading goes here. H3 Heading goes here. H3 Heading goes here.
H4 Heading goes here. H4 Heading goes here. H4 Heading goes here. H4 Heading goes here. H4 Heading goes here.
Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text.
This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote.
- Bulleted List Item
- Bulleted List Item
- Sub Item
- Bulleted List Item
- Bulleted List Item
- Sub Item
Desktop Layout Specs
- Default Layout: 1140px Design Grid (header/footer, generic content, blog pages, 3-column grids)
- 3 x 360px design columns
- 30px gutters
- Wide Layout: CSS 1440 Grid (wider home page content, 4-column grids for product listings etc)
- 4 x 330px columns
- 30px gutters
Mobile Layout Specs
- Tablet (iPad): 2 columns Canvas width: 768px
- Handheld (iPhone): 1 column Canvas width: 375px
- 360px design columns from desktop layout may be pasted in and stacked