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

Color Logo

Color Logo on Dark Background

One Color Logo

One Color Logo on Dark Background
Secondary Logo

Stacked Logo

Stacked Logo on Dark Background

Stacked Logo – One Color

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.

Use optimal clear space around logo

Use optimal clear space around logo

Do not skew, stretch or distort the logo

Do not use a low-res version of the logo

Do not add to the logo

Do not use the logo without the Registration mark

Do not change the color of the logo

Do not use the logo on any colored backgrounds

Do not use any effects on the logo

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.




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