fbpx
Skip to Content

Style Guide & Notes

Colors

The color scheme aims to be simple without too many variations.

Color Hex Class
  #ffffff .color-primary
  #161514 .color-secondary
  #ef501f .color-tertiary
  #e3e4e5 .color-quaternary
  #ee4420 .color-quinary
  #122f40 .color-senary
  #565656 .color-septenary

 


Typography

We use Montserrat as a primary typeface. Listed below are all default styles for headings.

Heading 1
Heading 1

(Desktop 45px/1.1) (Mobile 40px/1.2)

 

Heading 2
Heading 2

(Desktop 40px/1.3) (Mobile 34px/1.3)

 

Heading 3
Heading 3

(Desktop 40px/1.3) (Mobile 27px/1.3)

 

Heading 4
Heading 4

(Desktop 27px/1.3) (Mobile 24px/1.3)

 

Heading 5
Heading 5

(Desktop 24px/1.4) (Mobile 18px/1.4)

 

Heading 6
Heading 6

(Desktop 21px/1.4) (Mobile 16px/1.4)

 


Paragraph

(Desktop 14px/1.4) (Mobile 14px/1.4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

 


Lists

  • List item one.
  • List item two.
  • List item three.
  1. List item one.
  2. List item two.
  3. List item three.

 


Text Links

Default Hover
Default Default

 


Buttons

(Desktop 14px/18px) (Mobile 14px/18px)

Default Hover
Default Default

 


Forms



Custom Classes

left-align-bg-img = left aligns a background image at desktop and tablet breakpoints
top-align-bg-img = top aligns a background image at desktop and tablet breakpoints
layout-bp-850 = forces a mobile breakpoint at a browser width of 850px

 


Modules

Modules can be used on pages that have “Modules” selected as the page Template.

  • Masthead
    • Top most module on the homepage
  • Text Block
    • Most used module on the site. Contains the following layout options:
      • Background cover image with left column text and a right column image
      • Background cover image with left column text with a heading using the font Monteserratic
      • Background cover image with left column text with a heading using the font Playfair Display
      • Background cover image with right column text with a heading using the font Playfair Display
      • Left column cover image with right column text that’s middle aligned
      • Left column text with right column quote
  • Full-width Image
    • Displays an image at full browser width
  • Multi-Column
    • Supports one to four columns. Each column can support one image, heading, body copy, call to action label and url.
  • Quote
    • Slideshow module supporting quotes and facebook share feature
  • Sub-Menu
    • Add a sub menu to a page. External links and links within a page can be used. To utilize links within a page, follow these steps:
      • Add a unique name starting with a period that contains no spaces or special characters. Here’s an example of an acceptable value “.module-text-block-america-the-beautiful”
      • Under the Link Type option, select “Anchor”
      • Next, add the unique name, minus the period, to the Custom Class field on the module that you want the link to anchor to on the page. Example “module-text-block-america-the-beautiful”
  • Albums
    • Used for the Albums Discography page
  • Singles
    • Used for the Singles Discography page
  • Legacy Repeater
    • Used for the Legacy pages
  • Contact
    • Left column text with a right column contact form

 


Special Note

The Singles Discography page contains a large number of records. It may take the server awhile to save the page when edits are made. In the event that the server takes too long to save, it might redirect the Admin to a 404 page. This appears to be fine since the content does save. To confirm, review the page to see if the recent changes have been applied.