Our brand, and how we use it.

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

Trademark Guidelines

Automattic Inc. owns and oversees the trademarks for Woo™, WooCommerce®, and WooThemes® names, logos, and related icons (aka the “Woo Marks”).

The goal of these guidelines is to prevent Woo Marks from being used to trick or confuse anyone looking for official WooCommerce or WooThemes resources, and to clarify how legitimate Woo-related businesses and projects can legally use Woo Marks.

We want to encourage legitimate Woo-related products and services, but we reserve the right to take action against anyone who uses any Woo Marks improperly and/or without authorization.

The Details

There are some cases where you can use Woo Marks without asking permission, and some for which our advance permission is required.

You can use Woo Marks without advance permission to:

  • Truthfully describe WooCommerce or WooThemes products.
  • Report news or information about WooCommerce, WooThemes, or Automattic.
  • Link to our sites.

Whenever you use our marks, please always follow the Woo Style Guide below.

If you’d like to use a Woo Mark for reasons other than those listed above, please ask our permission by contacting us via the handy form at the bottom of this page. We’ll review all requests and grant permission to high-quality projects that further the WooCommerce and WooThemes communities. Please note that we do not allow the use of Woo Marks in advertising.

Here are more examples of when you need and don’t need our permission to use a Woo Mark.

You can use a Woo Mark without permission if you want to: You need our permission before using a Woo Mark if you want to:
Describe your products or services.

E.g., “We offer consulting services for small businesses using WooCommerce.”
Include it in your company name, logo, or branding.

E.g., “The WooCommerce Consulting Company.”
Refer or link to the official products.

E.g., “We provide services for products available at WooCommerce.com.”
Use it in any way that suggests a relationship with or endorsement from Automattic.

E.g., "WooUpgrade," "Woo Consulting,” or "WooThemes Bundles.” ("Bundles for WooThemes" would be ok.)
Engage in non-commercial projects that promote the spread of official products.

E.g., Using the Hiro image to advertise a free class sponsored by a nonprofit.
Use it in commercial projects to sell products.

E.g., Reselling our plugins or themes using our logos.
Use “Woo” in a domain name, provided that it is not used in way that suggests an affiliation to Automattic (such as in as a prefix or in a top-level domain).

E.g., TechWoo.com is ok, but Club.Woo is not.
Use the marks "WooThemes" or "WooCommerce" in a domain name in any way, or use "Woo" as a TLD or as a prefix.

E.g., BestWooThemes.com, WooCommerceConsulting.com, or TheWooShop.com.

When in doubt about your use of any Woo Marks, please contact Automattic at trademarks@automattic.com for clarification.

Permission for use of Woo Marks

Please note that we will only grant permission if you provide a comprehensive explanation of how the Woo Mark(s) will be used. If granted, permission will be revocable at any time and is limited to the use specified.

Palette

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

  • WooCommerce

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

    #96588a
  • Dark Grey

    Secondary background color.

    #3c3c3c
  • Green

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

    #71b02f
  • 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 WooCommerce.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 here.

Download Woo Ninja Pack. Contains .svg & .png versions of Hiro, the Woo 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 WooCommerce.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' and '.iconafter' 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 WooCommerce.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.