Style Guide

Brand assets and guidelines

Sign up for a free account Gain access to our free themes & plugins

Our brand, and how we use it.

This is the WooThemes style guide. Here you'll read about our lovingly crafted brand, its graphic assets, as well as internal guidelines for using these various resources.

Palette

These are the colors that form the WooThemes brand & website. Below you will find information about each color and how best to use it.

Download WooThemes Palette. Contains .ase & .aco swatch files for use in Illustrator or Photoshop.
  • Light Blue

    Main background color used for page headings and footer. Do not use as link or button color.

    #42a2ce
  • Dark blue

    Used for 'standard / low priority' buttons & text links. Works well as font color on light blue background.

    #255a8c
  • Green

    Used for 'high priority / call-to-action' buttons & text links. Works well as contrasting color on light blue background.

    #71b02f
  • Dark Grey

    Secondary background color.

    #3c3c3c
  • WooCommerce

    Used to distinguish WooCommerce from the rest of our Product range. Used for all WooCommerce related call-to-actions.

    #a46497
  • Light Grey

    Subtle background color. Used for table alt rows, inactive buttons and to highlight content blocks on a white background.

    #f7f7f7
  • Border color

    Used for all borders and separating elements.

    #e6e6e6
  • White

    Plenty of whitespace. Less is more.

    #ffffff

Typography

We use two typeface on WooThemes.com, namely Geogrotesque and Proxima Nova.

Proxima Nova is used for body copy, and lower priority headings (h2, h3, h4, h5, h6). It pairs nicely with Geogrotesque as a sub heading, and is also used in graphics as a secondary typeface.

  • Proxima Nova Light
  • Proxima Nova Regular
  • Proxima Nova Semi-Bold
  • Proxima Nova Bold

Loaded via Typekit.

Geogrotesque is strictly used for page headings, top level content headings and in graphics (such as blog graphics, promotions, etc). Please do not use it for any body copy.

  • Geogrotesque Regular
  • Geogrotesque Medium
  • Geogrotesque Semi-Bold

Manually loaded via @font-face.

Hiro

Hiro is our kick-ass team mascot. He is an illustrated representation of our company culture and personality, if you will. He's friendly, helpful and always ready for action. Please only use the ninja as pictured below.

Download WooThemes Ninja Pack. Contains .eps & .png versions of the WooThemes ninja.

Website Style Guide

Here you will find all the common HTML elements used accross the site.

Coding Standards

As we're a WordPress based company, we prefer to follow their coding standards as well. This applies to both here on WooThemes.com, as well as our product range. Please refer to this guide for CSS coding best practices.

Typography

This is an H1 heading

Avoid using full page width paragraphs as much as possible. Try to keep to a maximum of 12 words per line for best legibility.

This is an H2 heading

Our huge portfolio of WordPress themes covers most niches. All powered by our versatile WooFramework you get a beautiful site with incredible flexibility. The perfect building block for designers and developers. Our huge portfolio of WordPress themes covers most niches. All powered by our versatile WooFramework you get a beautiful site with incredible flexibility. The perfect building block for designers and developers.

Icons

Font Awesome

There are hundreds more icons in the FontAwesome library.

You can use these icons anywhere using the '.iconbefore_FA' and '.iconafter_FA' LESS functions and setting the CSS content property to the character you want.

Example:


WooIcons Custom Icon Font

  • <
  • >
  • T
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • m
  • n
  • p
  • r
  • s
  • t
  • u
  • v
  • x
  • y
  • z

This is a custom icon font created specifically for WooThemes.com. The font is loaded via standard CSS @font-face, and you can use it by the setting font-family to the LESS '@wooicons' variable. Inspect the icons above to see which characters are used.

Example:


SVGs

SVGs can be used anywhere you use normal images. You can load them via HTML, or set them as CSS background images. They are infinately scalable and offer great flexibility and customisation options. You can read more about the advantages of using SVGs here.

Forms

Notifications

button This is a standard WooCommerce message. Testing what a text link will look like.
This is a WooCommerce info message. Testing what a text link will look like.
This is a WooCommerce error message. Testing what a text link will look like.
  • A standard WooCommerce message with a list
  • Another list item inside this message
  • Testing what a text link will look like.
  • A WooCommerce info message with a list
  • Another list item inside this message
  • Testing what a text link will look like.
  • A WooCommerce error message with a list
  • Another list item inside this message
  • Testing what a text link will look like.