Company Style Guide

Back to Style Guide home.


Headers and Text

Header Size 1: Also can use class: h1

Header Size 2: Also can use class: h2

Header Size 3: Also can use class: h3

Header Size 4: Also can use class: h4

Header Size 5: Also can use class: h5
Header Size 6: Also can use class: h6

Paragraph text: Lorem as a link sit amet, consectetur adipiscing elit. Pellentesque eget sapien eu sem imperdiet sagittis eu eu massa. Cras id eros ut arcu dapibus fringilla. Aliquam luctus orci vitae nunc ultrices pretium. Aliquam vitae malesuada velit. Fusce ligula diam, varius ut vehicula ut, vulputate et justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet ex venenatis, ornare diam in, vestibulum neque. Etiam vel tristique turpis. Vivamus sit amet sem tellus. Sed at ipsum libero. Phasellus consectetur erat non sapien semper, ac ornare nisl commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed odio sit amet tellus vehicula vehicula. Phasellus sapien tortor, egestas et odio id, sollicitudin fermentum risus. Quisque pulvinar ipsum nulla, vitae maximus velit aliquet facilisis.

h1 tag using h3 class

h2 tag using h4 class

h3 tag using h5 class

h4 tag using h6 class

h5 tag using h2 class
h6 tag using h1 class

Background Colors

CLASSES: Primary Color Backgrounds

  • bg-primary-lightest
  • bg-primary-light
  • bg-primary
  • bg-primary-dark
  • bg-primary-darkest

Background Primary Lightest #cfc5e1

Background Primary Light #8a5cbd

Background Primary #5c2c91

Background Primary Dark #391660

Background Primary Darkest #1d0a32

CLASSES: Secondary Color Backgrounds

  • bg-secondary-lightest
  • bg-secondary-light
  • bg-secondary

Background Secondary Lightest #c37312

Background Secondary Light #cc8c4d

Background Secondary #c37312

CLASSES: Grey/Gray Color Backgrounds

  • bg-grey-lightest
  • bg-grey-light
  • bg-grey
  • bg-grey-dark
  • bg-grey-darkest

Background Grey Lightest #f4f6f9

Background Grey Light #e5e5e5

Background Grey #ddd

Background Grey Dark #424242

Background Grey Darkest #000

Text Colors

CLASSES: Primary Font Color

  • color-primary-lightest

  • color-primary-light

  • color-primary

  • color-primary-dark

  • color-primary-darkest

CLASSES: Secondary Font Color

  • color-secondary-lightest

  • color-secondary-light

  • color-secondary

CLASSES: Grey/Gray Font Color

  • color-grey-lightest

  • color-grey-light

  • color-grey

  • color-grey-dark

  • color-grey-darkest



Bear in mind that there are no specific mobile or tablet sizes unless you merely want to do IOS devices. Breakpoints are exactly what they say, Break Points. Most components could have their own bespoke breakpoints which are not globally required.

The naming of the breakpoints is irrelevent, they could have been named Smallest, Small, Medium and Large.

The following are the global break points.

  • 450px : Smallest
  • 600px : Mobile
  • 768px : Tablet
  • 950px : Desktop

Resize the page to see the blocks hide based on the page size using hide classes

Default 0 - 449px

Smallest 450px - 599px

Mobile 600px - 767px

Tablet 768px - 949px

Desktop 950px - Inifinity

The site also aims at Mobile first, meaning styling goes upward in value using min-width in media queries. There are only a few instances where the smallest requires a lot of styling not needed for desktop and so if you need to do this then use max-width instead of min-width

Responsive Hide Classes

As seen in the Break points example, there is some content you want to show or hide based on the size of the page.

For example, the following items show when it reaches it's breakpoint name: Resize the page to find out.





Always Show

You can also change the direction.

For example, the following items hide when it reaches it's breakpoint name: Resize the page to find out.





Always Show