...
Updated Nov 30th, 2023

With rad design, comes great responsibility. Every logo; or any design element or system; comes with its own strengths. However, there are certain general and specific design practices that need to be followed in order to maintain the quality of any piece of graphic design. This design guide will walk you through a few such design rules and practices for the logo.

Please make sure you check out the press page before using our Logo's and Branding!

The logotype can be used in 2 different configurations.

Use the standard version of the logo where possible. Use the compact version when legibility may be at risk.

Standard Version

The standard logo to use.

Compact Version

Logo to use when space is an issue.

This one comes first because it's specific to this logo, and really important.

The extreme right and extreme left sections of the logos have different visual densities. The extreme left side has a really dense 'S', while the extreme right side has an 'L' that mostly consists of empty space.

This is why, when centered perfectly, the empty space on the right side of the logo appears slightly, but significantly larger than the space on the left side of the logo.

When using the logo in a thumbnail photo, in the middle of a screen, or in any environment that requires you to center the logo, this optical unbalance can be a problem.

Fortunately, this issue can be fixed with almost no effort, in almost no time.

To fix the spacing problem that ships with the logo, first center the logo mathematically using the default centering tool in your graphic editor, then shift the logo, pixel-by-pixel, to the right, until it 'appears' to be centered to your lying, human eyes.


DO NOT STRETCH THE LOGO

Every time you stretch a logo or font, a designer dies.

That is why you should never, ever, ever do it.

Though designer deaths are one of the most common and unfortunate outcomes of stretching fonts and logos, an even more unfortunate outcome of this malpractice is that it just looks really bad, alright?

Though logos and fonts look really simple in form, a good logo, or even a good letter in a typeface is built with many extremely subtle adjustments that the human eye doesn’t catch, but does get annoyed by. Every single one of these measurements is accurate and intentional to its smallest detail, and stretching the shape obviously changes them. And none of it ends up looking good.

Bad Version

NEVER strech the logo.

Good Version

Logo scaled correctly.

Horizontal Spacing

Like most logotypes, this marks needs sufficient padding or empty space around itself to maintain legibility.

When working with the primary, horizontal-length logo, make sure that it has a padding of at least 1/4th of the total horizontal length of the logo, on the rightand left sides. The width of the padding can also considered to be the width of one letter from the logo.

s3rl-logo-spacing-example
Gray parts of the logo is the 1/4 spacing used.

Always ensure the logo has proper spacing.


s3rl-logo-spacing-example

Vertical Spacing

The top and bottom of the logo should carry padding half the length of the horizontal padding. This can also be calculated as half the height, or 1/8th the width of the logo.


Padding

Although using the recommended top and bottom padding is the safest practice, this logo has really strong and uniform horizontal edges. Due to this quality, the top and bottom padding can be reduced, but not eliminated, when against another uniform edge.

s3rl-logo-spacing-example

The palette contains 7 primary, and 5 grayscale colors.

Specific colors from this palette should be used in combination with specific backgrounds.

Ensure when you are using any colors with our logo that it remains readable, if you are unsure a good guide to follow would be Google's Material Design around accessibility found here: https://m3.material.io/foundations/designing/color-contrast.


Color on Dark Backgrounds

HEX: #2196F3

This is example text!

Dark background
HEX: #FF4081

This is example text!

Dark background
HEX: #8DE500

This is example text!

Dark background
HEX: #7C4DFF

This is example text!

Dark background
HEX: #FF6D00

This is example text!

Dark background

Color on Bright Backgrounds

HEX: #2196F3

This is example text!

Bright Backgrounds
HEX: #FF5252

This is example text!

Bright Backgrounds
HEX: #8DE500

This is example text!

Bright Backgrounds
HEX: #7C4DFF

This is example text!

Bright Backgrounds
HEX: #FF6D00

This is example text!

Bright Backgrounds

Stroke and color

Sometimes, it's an extremely useful design tool; sometimes, it's an extremely concerning health issue.

Strokes can look really good when used within certain design styles, and improve legibility over a busy background. However, theres a right and a (couple) wrong way(s) when it comes to applying strokes to this logo.

Always position strokes outside the logotype.

Here's a closer look at what kind of strokes you should apply to your logo:

s3rl-logo-spacing-example
Use the #2196F3 blue as the standard

color for the logotype on white/dark backgrounds.

Default