Colors

Brand Colors


Grays


State Colors

Typography

Headings

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Lists

Definition Lists

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!
Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Un-ordered Lists

  • List item with a much longer description or more content.
  • List item
  • List item

Ordered Lists

  1. List Item 1
  2. List Item 2
  3. List Item 3

Paragraphs

This is a lead paragraph that appears at the beginning of a section, just below the heading for that section. Integer ullamcorper, libero facilisis dictum euismod, elit nunc eleifend arcu, vel hendrerit eros massa non orci. Duis scelerisque condimentum lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo at est sit amet imperdiet. Phasellus ut nisl risus. Nam blandit lectus eu erat bibendum condimentum. Pellentesque purus lorem, ultrices eu metus ut, viverra porta augue. Donec sed nisi hendrerit, lobortis augue non, hendrerit leo.

Etiam pharetra tortor ac leo sagittis, a vehicula eros fermentum. Phasellus tincidunt nulla non auctor consequat. Sed at augue hendrerit, condimentum ex finibus, tristique risus. Integer ullamcorper, libero facilisis dictum euismod, elit nunc eleifend arcu, vel hendrerit eros massa non orci. Duis scelerisque condimentum lacus id vehicula. Nullam vel justo id dui sodales posuere quis sit amet leo. Nam faucibus aliquam euismod.

Blockquotes

Default


I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.

Someone famous in Source Title

Testimonial


“I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.”

Someone famous in Source Title

Numbered Sections

Know your audience

Similar to your website content, it’s important to write microcopy for your audience. A tech savvy crowd might understand and follow technical instructions while a less tech savvy crowd may get confused, frustrated or lost. Age can also be an important factor. A younger, more internet-experienced crowd may already know that clicking on those three horizontal bars will open the menu. Heck, they may even know that it’s often called a ‘hamburger menu,’ but those less experienced website users won’t.

Less is more

Writing in as few words as possible is what you should aim for, especially on the smaller parts of a website. Using small, targeted words can help keep the website looking clean and uncluttered and convey important sections. This is particularly important for items such as menus and buttons. “Pricing Options” can become “Pricing.” “News Page” can be shortened to “News.”

As with most copy, we want to prevent users from being intimidated by large sections of text. So being concise can help. Why use four words when one will do?

That being said…

Beware of being too vague

While it’s important not to bog down your site with too much content, it’s also important to note that sometimes those little bits of instructions may not be clear enough. It’s important to think through the steps and make sure you’re giving the clearest instructions. Most sites have contact forms. Are they really “submitting” a form or “contacting” you? What does contacting you really mean? Submit and Contact are two of the most common buttons for forms and it’s short, but also really vague. Instead using “Click for a Free Quote” or “Submit for Free Quote” helps the user know that by submitting the form what the action really entails. They are asking for that free quote.

Microcopy is all about the happy balance between using as few words as possible, but explaining actions as clearly as you can.

Think about microcopy early on

The really great websites out there use microcopy to their advantage. Thinking about the little things as soon as you can will help add the fine-polish and clarity to your site. A good website needs to have good direction, let the little words guide your users through the site and towards a goal. Whether that is to contact you for a service quote or to buy your product directly, you need to guide users there in as few clicks as possible. Microcopy helps you do that. Start thinking about what you want to say early on.

Alerts

Forms

Please enter your first name.

Captions

This is a caption for this image. It can be short or long.

Partner Grid

Content Blocks

If content is king, then microcopy is queen

Microcopy helps guide users through the website. Harnessing good copy can help nudge clients towards your products and services. It’s important to be clear and not vague, but also to do so in as few words as possible.

Social Sharing

Pagination

Modals

     

Tables

Table Header Table Header Table Header Table Header
Content Goes Here Content Goes Here Content Goes Here Content Goes Here
Content Goes Here Content Goes Here Content Goes Here Content Goes Here
Content Goes Here Content Goes Here Content Goes Here Content Goes Here

Favicons


iPad 3 Retina (144x144)


iPhone 4 Retina (114x114)


iPad (72x72)


iPhone Apple Touch (57x57)


Favicon Retina (32x32)


Favicon (16x16)