fbpx

Global Presets Style Guide

branding elements for the site

The elements on this page attempt to give an overall set of elements that can be used in the design and layout of new pages on this site.  They are in no way final or comprehensive, nor should they discourage creativity.  However, they do provide a framework for consistent, professional design.

Logo Variations

Text Colors

#131313

#ffffff

Logo Colors

#000000

#ffffff

#84c0ad

#90ae8a

#b9b8a3

Main Brand Colors

#84c0ad

#ffffff

#131313

#B7B9B9

Secondary Usable Colors

#333333

#6d8c94

#9eb7b1

#9ba9a2

#d4dad3

#e7e7e7

#ccc5be

#7c7c7c

#bdb8b2

#fffaf5

#90ae8a

#b9b8a3

Background Colors

#e7e7e7

#fffaf5

#ccc5be

#ffffff

#84c0ad

#b7b9b9

Text Styles

Heading 1

Montserrat 60px Color #131313

Heading 2

Montserrat 51px Color #131313

Heading 3

Montserrat 43px Color #131313

Heading 4

Montserrat 36px Color #131313

Heading 1

Montserrat 60px   Color #ffffff

Heading 2

Montserrat 51px   Color #ffffff

Heading 3

Montserrat 43px   Color #ffffff

Heading 4

Montserrat 36px   Color #ffffff

Site Body Text

Main Text: Roboto Condensed 17px  Color #131313

Font Weight: Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Dancing Script for Cursive Text

Sample:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button Modules

Button 1

Background:  #7c7c7c

Text:  Montserrat 16px #ffffff

Button 2

Over Dark section

Button Background:  #131313

Text:  Montserrat 16px #ffffff

Button 3

Background: #b9b8a3

Text:  Montserrat 16px #131313

Full Header 1

Ut at consequat mi. Suspendisse vitae diam sed nibh porta sollicitudin eget vitae orci.

bUTTON

Blurbs

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet

Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Image Left-Text Right Row

ann wigmore sign

Lorem Ipsum Mauris commodo leo leo

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

Text Left-image Right Row

Lorem Ipsum Mauris commodo leo leo

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

ann wigmore sign

Video Left-Text Right Row

Lorem Ipsum Mauris commodo leo leo

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

Full Width Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec euismod libero. Fusce et ante lobortis, iaculis ipsum nec, commodo nibh.

Image Left-Text Right WHITE BG

ann wigmore sign

Lorem Ipsum Mauris commodo leo leo

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

Testimonial Section

|

Ann Wigmore Natural Health Institute
I brought an open mind and inquisitiveness. I'm leaving feeling nurtured in body and soul. The staff is so loving and passionate, classes are taught consciously and with great compassion. I love the energy soup and the wheatgrass! Can't wait to come back!

Video Section 1 Column

ann wigmore sign

Dark BG Section

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

Features / CTA Section

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Form Section Full Width

9 + 9 =

Form Section Half with Text

1 + 14 =

Lorem Ipsum Mauris 

Maecenas vel condimentum nibh, mattis iaculis mauris. Integer eros purus, viverra sit amet efficitur a, suscipit sit amet odio. Donec ut auctor odio. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu. Mauris commodo leo leo, quis efficitur nulla lobortis eu.

Footer Section