ShipStation Style Guide

Our Brand and How We Use it

At ShipStation we pride ourselves on being the #1 Shipping Software for a number of reasons. To really bring this concept home, we need to ensure that our relentless pursuit of solutions, reliability, and A+ service ring true across all of our communication and design assets. So how do we communicate this through the words or graphics on our website or in-app? By ensuring our brand principles match our company beliefs and values.

Voice and Tone

Brand voice is a distinct verbal style that shows off our written personality. It remains consistent regardless of our tone, and works to establish a recognizable connection with our customers. As an established brand, we need to educate our customers on what we can do better than our competitors. Staying true to our voice throughout all of our communication is an easy way to nail this.

Brand tone adapts to when, where, and to whom we’re speaking. Think of brand voice as the roof over our office. Regardless of what’s inside, that roof stays put. The roof supports our office, but what’s happening inside changes depending on context, just like our tone.

Content Introduction

Think of ShipStation as the efficient shipping experts - always available, always knowledgeable, and willing to lend a helping hand no matter your shipping needs or questions.

We treat our users like the heroes they are. We champion them whether it’s their first sale or during the busy holiday season. Our creative principles define the characteristics that become synonymous with how ShipStation looks and speaks across all of its channels. Everything we say and do reflects back to our mission of helping our users be exceptionally efficient, wherever they sell, and however they ship.

FAQ

For any questions related to ShipStation Voice and Tone please contact Maria Fagerland at [email protected].

This is our logo. It is shown below in its primary form. There are two versions to ensure optimum legibility. The one on the left should be used when backgrounds are white. The version on the right should be used on dark backgrounds.

Primary Logo

ShipStation Logo - Color Logo (1)

Color Logo

ShipStation Logo - Color Logo on Dark (1)

Color Logo on Dark Background

ShipStation Logo - One Color (1)

One Color Logo

ShipStation Logo - One-Color Logo on Dark (1)

One Color Logo on Dark Background

Secondary Logo

ShipStation Secondary Logo - Stacked (1)

Stacked Logo

ShipStation Secondary Logo - Stacked on Dark (1)

Stacked Logo on Dark Background

ShipStation Secondary Logo - One Color (1)

Stacked Logo - One Color

ShipStation Secondary Logo - One Color on Dark (1)

Stacked Logo - One Color on Dark Background

Logo Best Practices

Clear space should be used to maintain visibility and impact. Please use the diameter of the gear as a minimum for padding on the top, bottom, left, and right of the logo.

The minimum size for the ShipStation logo is 20px for online use and .75 for print material. Please avoid making the logo any smaller to ensure legibility.

Logo Best Practices - Use Optimal Space (1)

Use optimal clear space around logo

Logo Best Practices - Use Optimal Space II (1)

Use optimal clear space around logo

Logo Best Practices - Do not skew (1)

Do not skew, stretch or distort the logo

Logo Best Practices - No low res (1)

Do not use a low-res version of the logo

Logo Best Practices - Do not add to logo (1)

Do not add to the logo

Logo Best Practices - Must have registration mark (1)

Do not use the logo without the Registration mark

Logo Best Practices - No new colors (1)

Do not change the color of the logo

Logo Best Practices - No colored backgrounds (1)

Do not use the logo on any colored backgrounds

Logo Best Practices - No logo effects (1)

Do not use any effects on the logo

Logo Best Practices - No busy backgrounds (1)

Do not use the logo on busy photographic backgrounds

Logo in Context

The following photos exemplify appropriate ways to use the ShipStation logo on an image, photo, or abstract background.

Although our logo may be placed over images, it may not always be successful. Be judicious when choosing an image and when placing the ShipStation logo.

A good rule of thumb: The logo should always be clearly visible. Elements from the image should not interfere with the logo, and the logo should not obscure important details in the photo.

Logo in Context - I (1)
Logo in Context - II (1)
Logo in Context - III (1)
Logo in Context - IV (1)

Color Palette

These are the colors that form the ShipStation brand & website.

#6CBE45
RGB: 108, 190, 69
CMYK: 43%, 0%, 64%, 25%

Used in our logo and some brand materials

#297768
RGB: 41, 119, 104
CMYK: 43%, 0%, 64%, 25%

Used for all ShipStation related call-to-actions

#2E3657
RGB: 46, 54, 87
CMYK: 47%, 38%, 0%, 66%

Used as a secondary background color

#1C272C
RGB: 28, 39, 44
CMYK: 36%, 11%, 0%, 83%

Used as a tertiary background color

#F7F7F7
RGB: 247, 247, 247
CMYK: 0%, 0%, 0%, 3%

Used as a subtle background color

#FFFFFF
RBG: 255, 255, 255
CMYK:0%, 0%, 0%, 0%

White as primary background color

Typography

Roboto is our primary typeface. You can download Roboto here.

Web Type Ramp

We use a vertical rhythm of 8px. Please use increments of 4px when working with web typography.

Oversized H1

h1.oversized { font-size: 60px; font-family: Roboto; color: #333; line-height: 1.25; margin-bottom: 16px; font-weight: Light; }

Headline H1

h1 { font-size: 48px; font-family: Roboto; color: #333; line-height: 1.25; margin-bottom: 16px; font-weight: bold; }

Headline H2

h2 { font-size: 32px; font-family: Roboto; color: #333; font-weight: bold; line-height: 1.25; }

Headline H3

h3 { font-size: 24px; font-family: Roboto; color: #333; font-weight: bold; line-height: 1.25; }

Headline H4

h4 { font-size: 20px; font-family: Roboto; color: #333; font-weight: 700; line-height: 1.25; }
Headline H5/Eyebrow
h5 { font-size: 12px; text-transform: uppercase; font-family: Roboto; color: #3E7673; font-weight: 300; line-height: 1.25; }

Paragraph

p { font-size: 16px; font-family: Roboto; color: #555; font-weight: 300; line-height: 1.5; }

Caption

p.caption { font-size: 12px; font-family: Roboto; color: #555; font-weight: 300; line-height: 1.5; }

Button Text

p.button { font-size: 14px; font-family: Roboto; color: #555; font-weight: 300; line-height: 1.5; }

Printed Type Styles

Standards set for a basic sales sheet:

Heading

  • Typeface: Roboto
  • Size: 24pt
  • Leading: 32pt
  • Weight: Bold
  • Color: #1C272C

Subhead

  • Typeface: Roboto
  • Size: 14pt
  • Leading: 20pt
  • Weight: Regular
  • Color: #1C272C

Body

  • Typeface: Roboto
  • Size: 9pt
  • Leading: 14pt
  • Weight: Light
  • Color: #1C272C

Highlight

  • Typeface: Roboto
  • Size: 9pt
  • Leading: 14pt
  • Weight: Bold
  • Color: #2E3657

Illustration

Merchant-focused photography is the heartbeat of the ShipStation brand. However, when relevant photography isn't appropriate or available, we suggest using isometric and stroked spot illustrations.

ShipStation - Brand Illustration with Padding - 1 (1)
ShipStation - Brand Illustration with Padding - 2 (1)
ShipStation - Brand Illustration with Padding - 3 (1)
ShipStation - Brand Illustration with Padding - 4 (1)
ShipStation - Brand Illustration with Padding - 5 (1)
ShipStation - Brand Illustration with Padding - 6 (1)

Imagery

Our photography style can be divided into three main categories: Merchants, Lifestyle and Product.

Merchant Photography

Merchant photography should feature front-facing and medium shot poses of customers in their work environment.

Merchant Photography - 1
Merchant Photography - 3
Merchant Photography - 2
Merchant Photography - 4

Lifestyle Photography

Try to show customers in environments with good lighting.

Lifestyle Photography - 1
Lifestyle Photography - 3
Lifestyle Photography - 2
Lifestyle Photography - 4

Product Photography

Try to showcase the ShipStation interface in the right context and environment.

Product Photography - 1
Product Photography - 3
Product Photography - 2
Product Photography - 4

Avoid

Avoid Photography - 1
Avoid Photography - 2

Avoid using photographs with headless bodies.

Avoid Photography - 3
Avoid Photography - 4

Avoid using photographs of overly dramatic poses or feelings.

Avoid Photography - 5
Avoid Photography - 6

Avoid using photographs of forced, stiff, or disingenuous poses.