Home Page

Design System

Typography

H1 Head

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opry Thin Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opry Bold Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opry Bold Italic Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opry Cowboy Text

Typography Classes

Header Classes

banner-header
banner-subtitle

Additional Typography Classes

opry-cowboy-text
opry-thin-text
opry-bold-text
opry-bold-italic-text

Typeface Information

Typefaces can be found on Adobe Typekit.

The Primary typeface is Brandon Grotesque. Thin, Regular, Bold and Bold Italic weights are available.

font-family: brandon-grotesque, sans-serif;

The Secondary Typeface is Cowboyslang. Use this typeface to draw more attention to a specific call to action.

font-family: cowboyslang, sans-serif;

Colors

Opry Gold

#eca922

Opry Blue

#50a4e4

Opry Green

#56ae77

Opry Red

#ed635d

Lt Grey

#edeae8

Gradients

Opry Gold Gradient

linear-gradient(#eca922, white)

Opry Blue Gradient

linear-gradient(#50a4e4, white)

Opry Green Gradient

linear-gradient(#56ae77, white)

Opry Red Gradient

linear-gradient(#ed635d, white)

Color Palette Classes

Background Color Classes

opry-gold
opry-blue
opry-green
opry-red
opry-lt-grey

Text Color Classes

opry-gold-text
opry-blue-text
opry-green-text
opry-red-text
opry-lt-grey-text

Gradient Classes

opry-gold-gradient
opry-blue-gradient
opry-green-gradient
opry-red-gradient

Buttons

Primary Button

Gold Button

Blue Button

Green Button

Red Button

Secondary Button