PRIMARY
Primary Brand Colors
Our primary brand colors should be used for all marketing efforts and all consumer facing products, with the exception of YouTube.
Our logo carries a bold and consistent weight with balanced kerning. The connecting line above the "E's" represent STEEZY, as a the bridge between communities and the foundation beneath it.
Not to be used in place of the STEEZY logo unless the main logo is already presented within a platform or composition.
A 14° angle is used in the "S" construction as a reference to 2014, the year STEEZY was founded. This also carries over to the gradient angle used in the mark.
Clearspace is equal to the height of the double E's on the logotype and lock-up. On the logomark it is equal to half the width of the "S".
Below are general logo placements based on the minimum clearspace requirements. The studio lock-up is preferred for all center placements and should never be used un-centered.
A rounded rectangle may wrap the logo for better contrast over busy backgrounds or text heavy layouts that need a pop. If an outlined container is used, make sure the stroke width matches the weight of the logotype.
Container size and corner radius is contingent to the clearspace requirements.
Can be attached to any corner with only one rounded corner.
Can be attached to sides with two rounded corners.
When not attached to a corner, clearspace must be equal or greater than the height of the logo.
The logotype may be used in-line with text in the two circumstances shown below.
Don’t stretch the logo.
Don’t separate logo elements unless it is for animation.
Don’t stack logo elements to create new lock-ups.
Don’t change or alter the lock-up text font.
Don’t rotate the logo in any way not approved by this guide.
Don’t add any effects on or around the logo.
Don’t pair the logo with marks that may look like logos.
Logo can only be used in color if it is for the purpose of matching the palette of a composition.
Don’t try to recreate the STEEZY logo, even with our brand font
The full-lockup is the primary usage as social icons. On public pages such as Linkedin, Facebook, Twitter, or Youtube, the logomark may be used if the full logo is presented in the cover photo.
A few examples of our logo in use.
Yes, we use Poppins.
Sounds like Popping.
It is a Google Font.
And everyone likes free things,
especially dancers.
There is a minimum spacing requirement but no maximum (with good judgement). Corners should be rounded to at least 2px.
CTAs should primarily be blue. If placed over a blue background, please invert the colors. Other colors may be used to match the palette o specific composition, or for hierarchy amongst multiple CTAs.
Headlines and labels may be wrapped within rounded containers with at least a 2px corner radius. Clearspace should be relative to the letter-spacing and leading.
An overline attached to the top of frame may be used to highlight headers. You may also use overlines in a selected or hover state for navigational elements.
An outline may be used to de-emphasize bold text, but never as primary headline usage.
Our brand uses a wide range of colors across product, marketing, social media, and YouTube. Specifications on usage are based on a primary and secondary palette.
Our primary brand colors should be used for all marketing efforts and all consumer facing products, with the exception of YouTube.
Secondary brand colors may be used if more colors are needed as labels or individual compositions that need another color to set a vibe.
Our tints and shades are based on both our primary and secondary colors at 14% steps between each of them. Current main usage for full color palette is Youtube Content.
Our gradients may be used to add more contrast underneath text and over images. Our primary color gradient should be used minimally as an accent rather than a color fill. All secondary and tertiary gradients may be used to exemplify a mood, style, or promote a specific class.
The base for all layout needs including a rounded card treatment, layout examples, and a strong use of the grid.
Our class card element, pulled from our product design system, is the base of inspiration for the use of rounded rectangles as containers and as a structural design element.
Our grid is based on a clean 8-count without any gutters. 16-columns are preferred for horizontal layouts and 8 columns are preferred for both square and vertical layouts.
