This style guide demonstrates the default presentation of elements in this theme. This page can also be used as a blueprint for how to present content within the theme in an effective way. Inspired by Rafal Tomal’s color palette and typography templates in his “The Essential Web Design Handbook”.
Color Palette
Primary Color
HEX: #272727
RGB: 39 / 39 / 39
CMYK: 71 / 65 / 64 / 69
Secondary Color
HEX: #888888
RGB: 136 / 136 / 136
CMYK: 49 / 41 / 41 / 5
Accent Color
HEX: #cc9c1c
RGB: 204 / 156 / 28
CMYK: 21 / 37 / 100 / 1
Background Color
HEX: #f9f9f9
RGB: 249 / 249 / 249
CMYK: 1 / 1 / 1 / 0
Font Families
Heading Font
Font Family: Montserrat
Styles: Regular 400, Bold 700
Montserrat
Body Font
Font Family: Libre Baskerville
Styles: Regular 400, Bold 700
Libre Baskerville
Typography
Heading 1
Font Family: Montserrat
Font Size: 58px
The quick brown fox jumps over the lazy dog.
Heading 2
Font Family: Montserrat
Font Size: 38px
The quick brown fox jumps over the lazy dog.
Heading 3
Font Family: Montserrat
Font Size: 32px
The quick brown fox jumps over the lazy dog.
Heading 4
Font Family: Montserrat
Font Size: 26px
The quick brown fox jumps over the lazy dog.
Heading 5
Font Family: Montserrat
Font Size: 22px
The quick brown fox jumps over the lazy dog.
Heading 6
Font Family: Montserrat
Font Size: 10px
The quick brown fox jumps over the lazy dog.
Paragraph
Font Family: Libre Baskerville
Font Size: 18px
Images
Images will be automatically extended past the content area when image alignment is set to: ‘None’, ‘Left’, or ‘Right’. Alignment set to ‘Center’ will not be extended. For images with alignment set to ‘None’, image width should be at least 880px.
Align None
Align Left
Phasellus consectetur facilisis tellus, eget iaculis libero. Aenean sagittis iaculis diam, ut scelerisque risus dapibus ut. Morbi ultrices enim metus, sed imperdiet ante laoreet id. Proin id quam tempus, rutrum sem a, faucibus enim. Proin orci lorem, eleifend nec tellus tincidunt, volutpat volutpat mi.
Align Right
Phasellus consectetur facilisis tellus, eget iaculis libero. Aenean sagittis iaculis diam, ut scelerisque risus dapibus ut. Morbi ultrices enim metus, sed imperdiet ante laoreet id. Proin id quam tempus, rutrum sem a, faucibus enim. Proin orci lorem, eleifend nec tellus tincidunt, volutpat volutpat mi.
Blockquote
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
— Antoine de Saint-Exupery
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Table Styles
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |