Colors

Accent Colors

• Primary/Brand Color

  #40A3FF

• Accent Color

  #FFA340

• Secondary Accent Color

  #A340FF

Text Colors

• Primary Text Color

  #3A3A3A

• Secondary Text Color

  #9C9C9C

• Error Message Color

  #A94442

• Success Message Color

  #42A944

Typography

• Main Header

  This is a sample Main Header

  Nunito bold 36px

• Sub Header

  This is a sample Sub Header

  Nunito italic 28px, #9c9c9c

• Section Title

  This is a sample Small Title

  Nunito bold 30px, #40A3FF

• Small Title

  This is a sample Small Title

  Nunito bold 24px

• Paragraph

  This sample paragraph is taken from Cheeseburger Ipsum: The last time you had a cheeseburger was too long ago. Try not to drool when you think about the slightly charred, medium-rare meat nestled between soft brioche, cradled in crisp iceberg lettuce and flavour amplifying condiments. Why are you still reading this- go get a cheeseburger.

  Nunito 16px, #3A3A3A

• Links

  • Sample Link

    Underlined, #40A3FF

  • Hovered Link

    Underlined, #D97000

  • Focused Link

    Outlined, Underlined, #40A3FF

  • Visited Link

    Underlined, #A340FF

  Note: all links should have a normal, hovered, visited, and focused state.

Buttons

• Normal Button

  #FFA340 background, #FFF text, 10px padding top-bottom, 15px padding left-right, 16px font

• Disabled Button

  #CFCFCF background, #FFF text

• Small Button

  12px font

• Large Button

  15px padding top-bottom, 30px padding left-right

Note: all buttons should have a normal, hovered, and focused state.

Form Elements

Navigation Elements

• Breadcrumb

  • Root Page
  • Prev Page
  • Current Page

• Tabs

  • Tab 1
  • Tab 2
  • Tab 3

• Pagination

  • 1
  • 2
  • 3
  • 4
  • 5