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.
Logo
The WooThemes™ and WooCommerce™ logos and logo variations are the property of WooThemes® and the owner retains all rights afforded by US and international Law.
- WooThemes
WoothemesWhoothemesWoothemeWoo Themes
- WooCommerce
WoocommerceWhoocommerceWoo Commerce
Ask First. Permission from WooThemes is required to use the WooThemes and WooCommerce names or logos as part of or in conjunction with any commercial project, product, service, or event and any domain or company name.
Proceed as you were. You may freely use the WooThemes and WooCommerce names or logos for use in non-commercial endeavors as long as there is no attempt to create the appearance of an official relationship or endorsement between the trademark owner and your endeavor. Please disclose these terms at all times.
Right of Refusal. Trademark owner retains the right to revoke permission and use of protected assets at anytime for any reason.
Download WooThemes Logo Pack. Contains .eps & .png versions of the WooThemes and WooCommerce logos, in both dark and light version.
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
Tables
| Order | Subscription |
|---|---|
| 18924 | Standard Subscription |
| 18925 | Standard Subscription |
Notifications
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 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.
