• Skip to primary navigation
  • Skip to main content

Quecie

  • HOME
  • TOPList
  • LIFEHACKS
  • VIRAL
  • Uncategorized

Style Guide

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

#272727
#272727
Secondary Color

HEX: #888888
RGB: 136 / 136 / 136
CMYK: 49 / 41 / 41 / 5

#888888
#888888
Accent Color

HEX: #cc9c1c
RGB: 204 / 156 / 28
CMYK: 21 / 37 / 100 / 1

#cc9c1c
#cc9c1c
Background Color

HEX: #f9f9f9
RGB: 249 / 249 / 249
CMYK: 1 / 1 / 1 / 0

#f9f9f9
#f9f9f9

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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
Rocky shore
Optional caption
Align Left
Cave
Optional caption

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
Mountains
Optional caption

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

  1. List Item 1
  2. List Item 2
  3. 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

Links

standard link

button link

Horizontal Rule


Copyright © 2023 · Keeper on Genesis Framework · WordPress · Log in