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].

---

Logo

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

Secondary Logo

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 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.

---

Color Palette

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

---

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.

---

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.

Lifestyle Photography

Try to show customers in environments with good lighting.

Product Photography

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

Avoid

Avoid using photographs with headless bodies.

Avoid using photographs of overly dramatic poses or feelings.

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