This is your Evolve Styleguide

This layout is used exclusively to be able to plan out the effects for your website in the theme settings functions

Evolve uses a modular type scale combined with varying font weights to establish a functional and visually pleasing content hierarchy. By default, each heading pushes down one measure of the base line height (26px). This ensures that when constructing new elements, a consistent rhythm can be achieved.

Evolve uses REM units to ensure that typography and general spacing remain optimized at different screen sizes and on different devices. Type and spacing scale down from a base font size of 16px, to 14px towards a mobile screen size. Try dragging this window down to the narrowest width to see the scale in action.

Text styles

Text styles should follow these guidelines. Microcopy should only be used for supporting text and all important copy should use body copy styles due to contrast.

Body text

Open Sans, 16px

Link text

Open Sans, 16px

Heading One (2.6rem)

Heading Two (2.2rem)

Heading Three (1.2rem)

Heading Four (1.1rem)

Heading Five (1rem)
Heading Six (0.9rem)
  • This is unordered list item #1
  • This is unordered list item #2
  • This is unordered list item #3
  • This is unordered list item #4
  1. This is ordered list item #1
  2. This is ordered list item #2
  3. This is ordered list item #3
  4. This is ordered list item #4

Color Selections

Primary Color

#4a90e2

Secondary Color

#31639c

Tertiary Color

#69A84F

Accent Color

#f1f1f1

Paragraph Styles

Lead Paragraph

The Evolve theme offers a clean and contemporary design to suit a range of purposes from corporate, tech startup to a marketing site. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.

Standard Paragraph

The Evolve theme offers a clean and contemporary design to suit a range of purposes from corporate, tech startup to a marketing site. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.

Blockquote Paragraph

The Evolve theme offers a clean and contemporary design to suit a range of purposes from corporate, tech startup to a marketing site. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.

Button styles

.btn–primary .btn–secondary .btn–tertiary

Code style

There are different styles for referencing code inline or within a block of code.

Using <code>

this is inline code

Using pre

this is
  a block
    of code