You are here:--Style Guide
Style Guide2018-05-23T18:45:51+00:00

Style Guide

Extend your pages with advanced typography.

Color Palette

#039bf4

#2c2e30

#8f8f8f

#eaeaea

#fafafa

Site Headings

Heading 1

Font family:              Creatus
Font size:                   36px

The big brown box for your soul

Heading 2

Font family:              Creatus
Font size:                   30px

The big brown box for your soul

Heading 3

Font family:              Creatus
Font size:                   24px

The big brown box for your soul

Heading 4

Font family:              Creatus
Font size:                  18px

The big brown box for your soul

Heading 5

Font family:             Creatus
Font size:                  16px

The big brown box for your soul

Heading 6

Font family:             Creatus
Font size:                  14px

The big brown box for your soul

Text Sizes

Mega font

Font family:              Open Sans
Font size:                   700%

Mega text

Jumbo font

Font family:              Open Sans
Font size:                  400%

Jumbo text

XLarge font

Font family:              Open Sans
Font size:                  200%

XLarge text

Large font

Font family:              Open Sans
Font size:                  150%

Large text

Medium font

Font family:              Open Sans
Font size:                  130%

Medium text

Small font

Font family:              Open Sans
Font size:                   80%

Small text

Site Lists

  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen

  1. Lorem ipsum dolor sit amet elitos
  2. Consectetur adipiscing endu voal
  3. Integer molestie lorem at pretium
  4. Facilisis in pretium nisl aliquet vel
  5. Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen

  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen
  • Lorem ipsum dolor sit amet elitos
  • Consectetur adipiscing endu voal
  • Integer molestie lorem at pretium
  • Facilisis in pretium nisl aliquet vel
  • Nulla volutpat aliquam velit a blen

Dropcaps

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Tuisque ornare odio et mi congue varius. tempus mattis bibendum. Duis a conge Curabitur odio est, convallis blanditlapi metus at amet. Facilisis in pretium nisl aliquet vel. Etiam temp u mattis bibendum ornare odio.

Blockquotes

Design isn’t crafting a beautiful textured button with breathtaking animation. It’s figuring out if there’s a way to get rid of the button altogether.

Edward Tufte

It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.

Don Norman

The goal of a designer is to listen, observe, understand, sympathize, empathize, synthesize, and glean insights that enable him or her to ‘make the invisible visible.

Hillman Curtis

There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed.

Ray Goforth

Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.

Kenya Hara

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs

Text Elements

I am  link. Quisque ornare odio et mi congue varius. I am bold.  Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet. Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. I am primary. Duis a congue ipsum. I am italic. Curabitur odio est, convallis est.

Quisque ornare odio et mi congue varius. I am higlight. Etiam tempus mattis bibendum. I am underline. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet. Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. I am bold primary. Duis a congue ipsum. Curabitur odio est, convallis est. I am underline primary.

Skip to toolbar