FWC styleguide

Colour palette

Blue

Light bluergb(22, 151, 211)
Middle bluergb(31, 118, 178)
Dark bluergb(15, 28, 67)

Orange

Light orangergb(248, 218, 6)
Middle orangergb(234, 167, 34)
Dark orangergb(190, 133, 18)

Green

Light greenrgb(101, 188, 70)
Middle greenrgb(46, 157, 64)
Dark greenrgb(18, 115, 58)

Purple

Light purplergb(229, 96, 163)
Middle purplergb(188, 78, 135)
Dark purplergb(141, 56, 100)

Grey

Light greyrgb(229, 229, 229)
Middle greyrgb(177, 117, 118)
Dark greyrgb(57, 62, 69)

Use of colours

Audiences

Employeesrgb(31, 118, 178) [middle blue]
Employersrgb(46, 157, 64) [middle green]
Small business employersrgb(188, 78, 135) [middle purple]

Fonts & others

Body font colourrgb(31, 118, 178) [dark grey]
Heading 2rgb(15, 28, 67) [dark blue]
Goldrgb(234, 167, 34) [middle orange]

Font family

Neue Helvetica Thin

Neue Helvetica Light

Neue Helvetica Roman

Neue Helvetica Semibold

Neue Helvetica Bold

Heading

Dolor duis elit Felis a lorem cras.

h1{
  color: rgb(255, 255, 255); /* On dark blue background on the website */
  font-family: HelveticaNeueW01-65Medi, Helvetica, Arial, sans-serif;
  font-size: 50px;
  letter-spacing: 1px;
  line-height: 63px;
  margin-bottom: 21px;
}

Viverra euismod eros Gravida lorem urna Tincidunt aliquam vitae Mattis aliquam elit Massa ac in.

h2{
  color: rgb(15, 28, 67);
  font-family: HelveticaNeueW01-55Roma, Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 31.5px;
  margin-bottom: 21px;
}

Dolor convallis consequat Est lacinia ac Vestibulum euismod.

h3{
  color: rgb(57, 62, 69);
  font-family: HelveticaNeueW01-65Medi, Helvetica, Arial, sans-serif;
  font-size: 16px;
  height: 21px;
  line-height: 21px;
  margin-bottom: 21px;
}

Ac ac adipiscing Iaculis amet malesuada Ac nec tincidunt Consectetur felis convallis Convallis velit aucto.

h4{
  color: rgb(57, 62, 69);
  font-family: HelveticaNeueW01-75Bold, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 21px;
}

Ut enim magna Velit consequat convallis Gravida eros eu Gravida mattis in Lorem sed erat.

h5{
  color: rgb(57, 62, 69);
  font-family: HelveticaNeueW01-55Roma, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 20.984375px;
  margin-bottom: 21px;
}

Lorem lacus duis Amet elementum lorem Euismod et tempor Lacus viverra aliquam Lorem lorem pellentesque.

h6{
  color: rgb(57, 62, 69);
  font-family: HelveticaNeueW01-65Medi, Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 20px;
  line-height: 21px;
  margin-bottom: 21px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

p{
  color: rgb(57, 62, 69);
  font-family: HelveticaNeueW01-55Roma, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 21px;
}

Heading with text