TYPOGRAPHY

H1 / Open Sans Light / 54px / 3.857em

H2 / Open Sans Light / 40px / 2.857em

H3 / Open Sans Regular / 27px / 1.929em

H4 / Open Sans Bold / 18px / 1.289em

H5 / Open Sans Bold / 16px / 1.143em

p / Open Sans Regular / 14px / 1em

Body / Open Sans Regular / 14px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit libero et venenatis auctor. Donec sed laoreet felis, in vulputate nisi. Suspendisse faucibus sit amet augue vitae mattis. Maecenas rhoncus nunc sit amet augue fermentum fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit libero et venenatis auctor. Donec sed laoreet felis, in vulputate nisi. Suspendisse faucibus sit amet augue vitae mattis. Maecenas rhoncus nunc sit amet augue fermentum fermentum.

COLORS

.green
#7ac142
.darkgreen
#629f43
.lightgreen
#629f43
.blue
#00aeef
.darkblue
#2f86d4
.lightblue
#00aeef
.orange
#ffa800
.darkorange
#ff9900
.purple
#a3509f
.red
#ff4d07
.darkgray
#333333
.gray
#a3a3a3
.lightgray
#a3a3a3
.lightestgray
#f5f5f5

BUTTONS


Modal Window


Full width content block

Optional subheading

Paragraph should be 14px, colored #666666 and a line-height of 24px. Full width content container should always be col-md-9, leaving sufficient padding on the right site. This will help with readability and help keep the design clean. Once this is viewed on a tablet, it can go full width (col-xs-12). Use this to display larger amounts of content.

This is your world. See there, told you that would be easy. There isn't a rule. You just practice and find out which way works best for you. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. The man who does the best job is the one who is happy at his job.

We don't want to set these clouds on fire. You better get your coat out, this is going to be a cold painting. Maybe there's a little something happening right here. And I will hypnotize that just a little bit.


Two column content block (with responsive video)

Optional subheading

Column width content container should always be col-sm-6. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

This is your world. See there, told you that would be easy. There isn't a rule. You just practice and find out which way works best for you. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. The man who does the best job is the one who is happy at his job.

We don't want to set these clouds on fire. You better get your coat out, this is going to be a cold painting. Maybe there's a little something happening right here. And I will hypnotize that just a little bit.

When you buy that first tube of paint it gives you an artist license. We have no limits to our world. We're only limited by our imagination. Just think about these things in your mind - then bring them into your world. Clouds are free. They just float around the sky all day and have fun. This is the way you take out your frustrations.

Column width content container should always be col-sm-6. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

This is your world. See there, told you that would be easy. There isn't a rule. You just practice and find out which way works best for you. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. The man who does the best job is the one who is happy at his job.

We don't want to set these clouds on fire. You better get your coat out, this is going to be a cold painting. Maybe there's a little something happening right here. And I will hypnotize that just a little bit.

When you buy that first tube of paint it gives you an artist license. We have no limits to our world. We're only limited by our imagination. Just think about these things in your mind - then bring them into your world. Clouds are free. They just float around the sky all day and have fun. This is the way you take out your fustrations.


Three column content block

Optional subheading

Column width content container should always be col-sm-4. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

Let's give him a friend, too

I'm a water fanatic. I love water. Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. Little trees and bushes grow however makes them happy. Work that paint. Have fun with it. Trees cover up a multitude of sins. You've got to learn to fight the temptation to resist these things. Just let them happen. In nature, dead trees are just as normal as live trees.

Everybody needs a friend

We'll lay all these little funky little things in there. If you didn't have baby clouds, you wouldn't have big clouds. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted. Go out on a limb - that's where the fruit is. Just let go - and fall like a little waterfall.


Four column content block

Optional subheading

Column width should always be col-sm-3. For tablet, it needs to be col-md-6. and wrapped to two lines. It will be full width (col-xs-12) for mobile. Use this for small bits of content.

Let's give him a friend, too

This is the time to get out all your frustrations, much better than kicking the dog around the house or taking it out on your spouse. We'll have a super time in the end.

Everybody needs a friend

Look around, look at what we have. Beauty is everywhere, you only have to look to see it. We'll play with clouds today. You have freedom here.

This should make you happy

The only guide is your heart. Clouds are free. They just float around the sky all day and have fun. I want everybody to be happy. That's what it's all about.


Right rail content block

Optional subheading

Column width content container should always be col-sm-6. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

This is your world. See there, told you that would be easy. There isn't a rule. You just practice and find out which way works best for you. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. The man who does the best job is the one who is happy at his job.

We don't want to set these clouds on fire. You better get your coat out, this is going to be a cold painting. Maybe there's a little something happening right here. And I will hypnotize that just a little bit.

When you buy that first tube of paint it gives you an artist license. We have no limits to our world. We're only limited by our imagination. Just think about these things in your mind - then bring them into your world. Clouds are free. They just float around the sky all day and have fun. This is the way you take out your flustrations. There isn't a rule. You just practice and find out which way works best for you.

Happy little right rail

  • This copy section is col-md-4
  • Make a little extra spacing by making this column col-md-offset-1
  • This will be col-sm-12 at mobile
  • If you hypnotize it, it will go away

Need a smaller list?

Color content block

Optional subheading

Paragraph should be 14px, colored #ffffff and a line-height of 24px. This example is more for a style reference. Although knocked out text is not a preference, we should have it as an example. Please make all text follow the same rules as the above.

Didn't you know you had that much power? You can move mountains. You can do anything. But we're not there yet, so we don't need to worry about it. Let's make a happy little mountain now. We'll put some happy little leaves here and there. Use what you see, don't plan it.

Content block with blurred background

Optional subheading

Column width content container should always be col-sm-6. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

This is your world. See there, told you that would be easy. There isn't a rule. You just practice and find out which way works best for you. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. The man who does the best job is the one who is happy at his job.

We don't want to set these clouds on fire. You better get your coat out, this is going to be a cold painting. Maybe there's a little something happening right here. And I will hypnotize that just a little bit.

When you buy that first tube of paint it gives you an artist license. We have no limits to our world. We're only limited by our imagination. Just think about these things in your mind - then bring them into your world. Clouds are free. They just float around the sky all day and have fun. This is the way you take out your flustrations. There isn't a rule. You just practice and find out which way works best for you.

Happy little right rail

  • This copy section is col-md-4
  • Make a little extra spacing by making this column col-md-offset-1
  • This will be col-sm-12 at mobile
  • If you hypnotize it, it will go away

Need a smaller list?

Full image billboard

This content column will be col-xs-12 col-sm-6, with a col-md-offset-6 if text is aligned to the right. Font color should be darker to accommodate background image (#333333). The padding will relfect the same dimensions from the Content Template. In this example, the background stays the same, while the subnav and paragraph do not change. Have fun with it. The more we do this - the more it will do good things to our heart. No pressure. Just relax and watch it happen. We'll make some happy little bushes here.

Oh, and please keep backgrounds light.

Read more


Full image billboard dark

Optional subheading

This content column will be col-xs-12 col-sm-9 col-md-6. Because the content can overlap the background, we make the tablet view almost full width, unlike the lighter version above where we want to avoid covering the image. Font color should be white to accommodate background image (#ffffff). The padding will reflect the same dimensions from the Content Template. In this example, the background stays the same, while the subnav and paragraph do not change. Have fun with it. The more we do this - the more it will do good things to our heart. No pressure. Just relax and watch it happen. We'll make some happy little bushes here.

Bleed image right billboard

This content column will be col-xs-12 col-sm-8 col-md-6. If text aligned right, use col-md-offset-6 column in tablet view. The image column should be col-xs-12 col-md-6. Font color should be base #666666. Use this when you need to show an image that runs off the page (the laptop, in this case). Please note that the background may disapear when in mobile view. Paint anything you want on the canvas. Create your own world. See how easy it is to create a little tree right in your world. It's almost like something out of a fairytale book.

macbook

macbook

Bleed image left billboard

This content column will be col-xs-12 col-sm-8 col-md-6. If text aligned right, use col-md-offset-6 column in tablet view. The image column should be col-xs-12 col-md-6. Font color should be base #666666. Use this when you need to show an image that runs off the page (the laptop, in this case). Please note that the background may disapear when in mobile view. Paint anything you want on the canvas. Create your own world. See how easy it is to create a little tree right in your world. It's almost like something out of a fairytale book.

ipad

Bleed image billboard gray

Optional subheading

Paragraph should be 14px, colored #ffffff and a line-height of 24px. This example is more for a style reference. Although knocked out text is not a preference, we should have it as an example. Please make all text follow the same rules as the above.

Didn't you know you had that much power? You can move mountains. You can do anything. But we're not there yet, so we don't need to worry about it. Let's make a happy little mountain now. We'll put some happy little leaves here and there. Use what you see, don't plan it.

Isolated image billboard

Optional subheading

This content column will be col-xs-12 col-sm-6. Font color should be standard #666666. The image column will be col-xs-12 col-sm-6 as well. Use this when you need to show an image that runs off the page (the laptop, in this case). Please note that the background may disappear when in mobile view. Paint anything you want on the canvas. Create your own world. See how easy it is to create a little tree right in your world. It's almost like something out of a fairytale book. Make friends with it. I started painting as a hobby when I was little. I didn't know I had any talent. I believe talent is just a pursued interest. Anybody can do what I do. A tree cannot be straight if it has a crooked trunk.

ipad
ipad

Isolated image billboard (colored)

This content column will be col-xs-12 col-sm-6. Font color should be standard #666666. The image column will be col-xs-12 col-sm-6 as well. Use this when you need to show an image that runs off the page (the laptop, in this case). Please note that the background may disapear when in mobile view. Paint anything you want on the canvas. Create your own world. See how easy it is to create a little tree right in your world. It's almost like something out of a fairytale book. Make friends with it. I started painting as a hobby when I was little. I didn't know I had any talent. I believe talent is just a pursued interest. Anybody can do what I do. A tree cannot be straight if it has a crooked trunk.

Bleed bottom centered image

This content column will be col-xs-12 col-sm-10 with col-md-offset-1 for spacing. This text should be #666666 18px and very short as we want the focus to be on the images below. Very easy to work these to death. Let's get wild today. There are no limits in this world. You can put lots of little happy things in here.

dashboard

Icon carousel that can be used for several invigorating icons

Didn't finish? Say the rest in this optional subheading


Object image based tabs for product display

macbook

Bulleted List

  • Use this tab system when displaying products
  • This copy space is col-md-5
  • This will be col-sm-12 at mobile
  • If you hypnotize it, it will go away

Basic content example

Paragraph should be 14px, colored #ffffff and a line-height of 24px. This example is more for a style reference. Although knocked out text is not a preference, we should have it as an example. Please make all text follow the same rules as the above.

Didn't you know you had that much power? You can move mountains. You can do anything. But we're not there yet, so we don't need to worry about it. Let's make a happy little mountain now. We'll put some happy little leaves here and there. Use what you see.

ipad

Product Three

Optional subheading

Column width content container should always be col-sm-4. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

Let's give him a friend, too

I'm a water fanatic. I love water. Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. Little trees and bushes grow however makes them happy. Work that paint. Have fun with it. Trees cover up a multitude of sins. You've got to learn to fight the temptation to resist these things. Just let them happen. In nature, dead trees are just as normal as live trees.

Everybody needs a friend

We'll lay all these little funky little things in there. If you didn't have baby clouds, you wouldn't have big clouds. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted. Go out on a limb - that's where the fruit is. Just let go - and fall like a little waterfall.

Product Four

Optional subheading

Column width content container should always be col-sm-4. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

Let's give him a friend, too

I'm a water fanatic. I love water. Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. Little trees and bushes grow however makes them happy. Work that paint. Have fun with it. Trees cover up a multitude of sins. You've got to learn to fight the temptation to resist these things. Just let them happen. In nature, dead trees are just as normal as live trees.

Color Tabs with Full Images

Full image billboard dark

Optional subheading

This content column will be col-xs-12 col-sm-9 col-md-6. Because the content can overlap the background, we make the tablet view almost full width, unlike the lighter version above where we want to avoid covering the image. Font color should be white to accomodate backgroudn image (#ffffff). The padding will relfect the same dimensions from the Content Template. In this example, the background stays the same, while the subnav and paragraph do not change. Have fun with it. The more we do this - the more it will do good things to our heart. No pressure. Just relax and watch it happen. We'll make some happy little bushes here.

Basic content example

Paragraph should be 14px, colored #ffffff and a line-height of 24px. This example is more for a style reference. Although knocked out text is not a preference, we should have it as an example. Please make all text follow the same rules as the above.

Didn't you know you had that much power? You can move mountains. You can do anything. But we're not there yet, so we don't need to worry about it. Let's make a happy little mountain now. We'll put some happy little leaves here and there. Use what you see.

ipad

Product Three

Optional subheading

Column width content container should always be col-sm-4. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

Let's give him a friend, too

I'm a water fanatic. I love water. Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. Little trees and bushes grow however makes them happy. Work that paint. Have fun with it. Trees cover up a multitude of sins. You've got to learn to fight the temptation to resist these things. Just let them happen. In nature, dead trees are just as normal as live trees.

Everybody needs a friend

We'll lay all these little funky little things in there. If you didn't have baby clouds, you wouldn't have big clouds. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted. Go out on a limb - that's where the fruit is. Just let go - and fall like a little waterfall.

Product Four

Optional subheading

Column width content container should always be col-sm-4. Once this is viewed on a mobile device, it can go full width (col-xs-12). Use this to display for large amounts of content. If the colums start to get too long (approx. over 1000px), consider breaking up the content differently.

Let's give him a friend, too

I'm a water fanatic. I love water. Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. Little trees and bushes grow however makes them happy. Work that paint. Have fun with it. Trees cover up a multitude of sins. You've got to learn to fight the temptation to resist these things. Just let them happen. In nature, dead trees are just as normal as live trees.


Full-page Bullseye

Alternate subhead with happy little clouds

  Privacy secured  |  Advertising Disclosures


Medium Bullseye

Alternate subhead with happy little clouds

  Privacy secured  |  Advertising Disclosures

Slim Bullseye

  Privacy secured  |  Advertising Disclosures

Super Slim Bullseye

  Privacy secured  |  Advertising Disclosures

Non-Form Bullseye

This looks more like our billboard, but has larger text. Make this bullseye yours and add a happy little CTA.

macbook

  Privacy secured  |  Advertising Disclosures

Video Bullseye

Alternate subhead with happy little clouds

Added value proposition for happiness and cheer

If there's two big trees invariably sooner or later there's gonna be a little tree.

  Privacy secured  |  Advertising Disclosures

icon-auto-ring

Large icon promotional banner

Used for small bits of content. This should be col-md-7 and col-med-offset-2. Font size 18pt. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone.

icon-auto-rainbow

Small icon promotional banner

Used for small bits of content. This should be col-md-7 and col-med-offset-2. Font size 18pt. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone.

icon-auto-rainbow

Slim icon promotional banner

icon-auto-rainbow

Double row slim icon promotional call to action

If you have something else to describe, place it here. At point 14pt font, it can go a long way.

icon-auto-rainbow
58%

of some demographic does this on the reg. Seriously. Just make this font 18pt.

Large promo box with form start

Used for small bits of content. This should be col-md-7 and col-med-offset-2. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone.

Small promo box with form start

Small promo with form start

Just have something little to say? Use this format. Header 27pt body is 14pt. This section should be col-md-6. Use it. Make friends with it. This is a happy place, little squirrels live here and play.

Basic loan calculator

Tree trunks grow however makes them happy. Here we're limited by the time we have. But we're not there yet, so we don't need to worry about it. Now we don't want him to get lonely, so we'll give him a little friend. The light is your friend.

$
%
months

Advanced calculator

Loan breakdown
Loan amount: $10,000
Interest & fees: $10,000
Total repayment: $10,000
Your monthly payment would be: $186.43

Footnote: A tree needs to be your friend if you're going to paint him. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. Disclosures.


Centered basic loan calculator

$
%
months

Advanced calculator

Loan breakdown
Loan amount: $10,000
Interest & fees: $10,000
Total repayment: $10,000
Your monthly payment would be: $186.43

Footnote: A tree needs to be your friend if you're going to paint him. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. Disclosures.


Alternate basic loan calculator

$
%
months

Advanced calculator

Loan breakdown
Loan amount: $10,000
Interest & fees: $10,000
Total repayment: $10,000
Your monthly payment would be: $186.43

Basic loan calculator with chart

$
%
months

Advanced calculator

Loan breakdown
Loan amount: $10,000
Interest & fees: $1,085
Total repayment: $11,085
Your monthly payment would be: $186.43