Typography

Title
.tbits-title 44px - #262626, #FFFFFF or #038B6D - Cocogoose Pro (regular)

Header 1

.tbits-h1 44px - #262626 or #FFFFFF - Montserrat (Medium)

Header 2

.tbits-h2 30px - #262626 or #FFFFFF - Montserrat (Medium)

Header 3

.tbits-h3 20px - #262626 or #FFFFFF - Montserrat (Medium)

Header 4

.tbits-h4 14px - #038B6D or #FFFFFF - Montserrat (Medium) - Line height 27px
Header Description
.tbits-header-desc 21px - #262626 - Montserrat (Medium)
Large Body Copy
.lg-txt 20px - #262626 - Montserrat (Regular) - Line Height 28px
Medium Body Copy
.md-txt 18px - #262626 - Montserrat (Regular) - Line Height 28px
Small Body Copy
.sm-txt 16px - #262626 - Montserrat (Regular) - Line Height 27px
Extra Small Body Copy
.xs-txt 14px - #262626 - Montserrat (Regular) - Line Height 27px
nav item .tbits-nav-item 14px - #FFFFFF or #262626 - Cocogoose Pro (Regular) - Text Transform Capitalize
hovered nav item .tbits-nav-item 14px - #F4B913 - Cocogoose Pro (Regular) - Text Transform Capitalize
.tbits-btn-light-green 16px - #50BD91 - Montserrat (Bold)
.tbits-round-input 16px - #AAAAAA - Montserrat (Bold)

Color Palette


Tbits Dark Green #038B6D
Tbits Light Green #50BD91
  • Overlay on header images
  • Regular Call-to-Action
Tbits Light Orange #F4B913
  • Special Call-to-action
Tbits Dark Grey #262626
  • Menu Background
  • Footer Background
  • Call-to-Action on colourful backgrounds
  • Section background

Buttons


  • All buttons use .btn for consistency
  • large buttons shown below use .tbits-round-btn
  • small buttons use .tbits-round-btn-sm
  • All buttons use Montserrat (Bold)
.tbits-btn-light-green #50BD91
  • Menu call-to-action
.tbits-btn-light-green:hover #038B6D
  • Menu call-to-action hover
.tbits-btn-transparent Border: 1px #50BD91
  • Secondary call-to-action
.tbits-btn-transparent:hover Border: 1px #038B6D
  • Secondary call-to-action hover
.tbits-btn-orange #F4B913
  • Special call-to-action
.tbits-btn-orange:hover #F5A623
  • Special call-to-action hover
.tbits-btn-orangetransparent Border: 1px #F4B913
  • Special secondary call-to-action
.tbits-btn-orangetransparent:hover Border: 1px #F5A623
  • Special secondary call-to-action hover

.tbits-btn-logout-dark #262626
  • Log out on light background
.tbits-btn-logout-light #FFFFFF
  • Log out on dark background
.tbits-btn-white #FFFFFF
  • Header overlay button
.tbits-btn-light-green.inactive
  • Inactive state of the green button. Used in a row of filters / tags for example.
.tbits-btn-dark #262626
  • Call-to-action buttons on bright sections
.tbits-btn-dark:hover
  • Call-to-action buttons on bright sections hover
  • any button can have an icon

Page Headers


Page Title

Page description here
  • background: linear-gradient(rgba(84, 189, 145, 0.75), rgba(84, 189, 145, 0.75))
  • height on homepage : 630px
  • height everywhere else: 400px
  • position/ background attachment fixed for parallax effect
  • page title: .tbits-title
  • hr with .white-hr
  • page description with .overlay-text

Iconography


Icons should be simple and line based with no fill colours. Aim for a 45px by 45px icon, with lines being an approximate 2px thickness. The reason for this is that its easier to be consistent if the shapes are simple and made out of lines of similar thickness.
Good Examples
Bad Examples

Illustrations


Illustrations should be of flat design with not too many details. Try to stay away from details that don't add to the message, because it will distract the reader from the story that the animation is trying to convey. Don't add features that will make the illustrations overly "cartoony".
Good Examples
Bad Examples

Imagery


Images of fans should be taken at either sports or music events. The best is an image of a big crowd of fans shot from mid-range. Preferably showing happy faces or otherwise making you feel like part of the crowd. Make sure there aren't any recognizable artist, sports players or logos in the image.
Good Examples
Bad Examples

Form Fields


  • Inputs with class .tbits-round-input
  • class .invalid outlines the input in red to show invalid input

Logos