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
Gold Button
Blue Button
Green Button
Red Button

Button Classes

Primary Button Classes
  • gold-primary-button
  • blue-primary-button
  • green-primary-button
  • red-primary-button

Secondary Button Classes
  • gold-secondary-button
  • blue-secondary-button
  • green-secondary-button
  • red-secondary-button

Text Button Classes
  • gold-text-button
  • blue-text-button
  • green-text-button
  • red-text-button