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.
Gray parts of the logo is the 1/4 spacing used.
Always ensure the logo has proper spacing.
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.
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!
HEX: #FF4081
This is example text!
HEX: #8DE500
This is example text!
HEX: #7C4DFF
This is example text!
HEX: #FF6D00
This is example text!
Color on Bright Backgrounds
HEX: #2196F3
This is example text!
HEX: #FF5252
This is example text!
HEX: #8DE500
This is example text!
HEX: #7C4DFF
This is example text!
HEX: #FF6D00
This is example text!
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:
Use the #2196F3 blue as the standard
color for the logotype on white/dark backgrounds.