Brand Style

OVERVIEW

Typography

Yes, we use Poppins.

Sounds like Popping.

It is a Google Font.
And everyone likes free things,
especially dancers.

Poppins

Regular
Medium
Semibold
Bold
Extrabold
TYPESTACK

Typestack

TYPE STYLE SPECIFICS ARE MEANT AS REFERENCE AND MAY NOT BE CORRECTLY
 DISPLAYED DUE TO RESPONSIVE DISPLAYS.

Headlines

Poppins Bold

60/62
1% tracking
Poppins SemiBold

48/54
.5% tracking

Subheadlines

H  60/62/1% tracking
L Sub  20/28/2% tracking

H  48px/54px/1% tracking
S Sub  48px/54px/1% tracking

H  48/54/1% tracking
S Sub  48/54/1% tracking

Paragraph Copy

Poppins Regular
25/35
4% tracking

Call-to-Actions

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.

Poppins BOLD
18/20
8% tracking

Other

Poppins BOLD
18/20
8% tracking
Poppins BOLD
Poppins REGULAR
18/20
8% tracking
Poppins BOLD
18/20
8% tracking
STYLING    

Additional
Styling

Containers

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.

Overline

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.

Outline

An outline may be used to de-emphasize bold text, but never as primary headline usage.

ALIGNMENT

Alignment

OVERVIEW

Color

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.

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.

Just White
#FFFFFF

Cement Gray
#EBEFEF

Not Black
#222222

LA Blue
#0B79FB

Clean Mint
#81F1AE

SECONDARY

Secondary Brand Colors

Secondary brand colors may be used if more colors are needed as labels or individual compositions that need another color to set a vibe.

Wavy Green
#00D9CC

Smooth Cyan
#35B6ED

Mamba Purp
#684AE2

Hawt Pink
#D824A5

Red Mercedes
#D22222

Sharp Orange
#F26D33

Champ Yellow
#FFB800

TINTS + SHADES

Tints + Shades

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.

Grays

#EBEFEF
#cbcece
#acaeae
#8e9090
#707272
#555656
#3a3b3b
#222222

Color

#c8f9db
#b6f7d0
#a4f5c5
#93f3b9
#81f1ae
#6fcf96
#5dae7d
#4b8c65
#396a4d
#8feee9
#6be9e1
#47e4da
#24ded3
#00d9cc
#00bbaf
#009c93
#007e76
#00605a
#a6dff7
#8ad5f5
#6ecaf2
#51c0f0
#35b6ed
#2e9dcc
#2683ab
#1f6a89
#175068
#94c4fd
#71b1fd
#4f9efc
#2d8cfc
#0b79fb
#0968d8
#0857b5
#064692
#05356f
#bcaff2
#a796ee
#927dea
#7d63e6
#684ae2
#5940c2
#4b35a3
#3c2b83
#2e2164
#ee9fd7
#e880cb
#e361be
#dd43b2
#d824a5
#ba1f8e
#9c1a77
#7d1560
#5f1049
#eb9e9e
#e57f7f
#df6060
#d84141
#d22222
#b51d1d
#971818
#7a1414
#5c0f0f
#f9bfa5
#f7aa89
#f6966c
#f48150
#f26d33
#d05e2c
#ae4f25
#8c3f1e
#6b3016
#ffe08f
#ffd66b
#ffcc47
#ffc224
#ffb800
#db9e00
#b88500
#946b00
#705100
GRADIENTS

Gradients

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.

Primary

Cement
Grey

Not
Black

LA 
Blue

Clean
Mint

Secondary (Subtle)

Clean
Mint

Wavy
Green

Wavy
Green

Smooth
Cyan

Smooth
Cyan

LA
Blue

LA
Blue

Mamba
Purp

Mamba
Purp

Hawt
Pink

Hawt
Pink

Red
Mercedes

Red
Mercedes

Sharp
Orange

Sharp
Orange

Champ
Yellow

Tertiary

LA 
Blue

Clean
Mint

Wavy
Green

LA
Blue

Smooth
Cyan

Mamba
Purp

LA 
Blue

Hawt
Pink

Mamba
Purp

Red
Mercedes

Hawt
Pink

Sharp
Orange

Red
Mercedes

Champ
Yellow

OVERVIEW

Composition

The base for all layout needs including a rounded card treatment, layout examples, and a strong use of the grid.

CLASS CARD

The Class Card

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.

GRID

Grid

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.

16 Column Grid

8 Column Grid

LAYOUT

Layout

Standard Layout Variations