It's all your colour & typo here.

Here you'll find all the colours, you can use. Also how to apply the themes & can take a look at the fonts plus how to use them.

Colours
Themes
Fonts

Colours

The variables we are using across the FW including the HEX.

$orange: #e94e1b; Primary Colour / Header / Footer / Links

$orange-l: #f9c4b3; Secondary Colour / SVG Logos

$blue: #312783; Primary Colour / Header / Footer / Links

$blue-l: #bfbcd8; Secondary Colour / SVG Logos

$green: #0b8e36; Primary Colour / Header / Footer / Links

$green-l: #a9d6b8; Secondary Colour / SVG Logos

$yellow: #f9b233; Primary Colour / Header / Footer / Links

$yellow-l: #fce3b6; Secondary Colour / SVG Logos

$lilac: #520644; Primary Colour / Header / Footer / Links

$lilac-l: #c1a7bc; Secondary Colour / SVG Logos

$gray-1: #282828; Primary Colour / Header / Footer / Links

$gray-5: #b3b3b3; Secondary Colour / SVG Logos

$gray-2: #404040; Font colour

$gray-3: #606060; Font colour

$gray-4: #999; Font colour

$gray-6: #fdfdfd; Background

Themes

Using and changing the themes is pretty straight forward. Just add the right class to your <body> - tag.

                  
                    <body class="orange">

Landing pages and related to hoodie

                  
                    <body class="blue">

Documentation + FAQ

                  
                    <body class="green">

Blog + newsletter

                  
                    <body class="lilac">

Community related + chat

                  
                    <body class="gray">

Imprint + contact

                  
                    <body class="yellow">

Not used anymore, because we've experienced issues with contrast for colour blind people.

Fonts

We are using:

Fira Sans - Light (300) // not used right now
Fira Sans - Regular (500) // text, navigation
Fira Sans - Medium (700) // headlines
Fira Sans - Mono (500) // code

Please NOTE!

We’re using a font loading method which relies on the following script. It has to be included in the <head> file.

                  
                    <script>
                    (function(){
                      function addFont() {
                        var style = document.createElement('style');
                        style.rel = 'stylesheet';
                        document.head.appendChild(style);
                        style.textContent = localStorage.firaSans;
                      }

                      try {
                          if (localStorage.firaSans) {
                              // The font is in localStorage, we can load it directly
                              addFont();
                          } else {
                              // We have to first load the font file asynchronously
                              var request = new XMLHttpRequest();
                              request.open('GET', '/dist/css/fonts.css', true);

                              request.onload = function() {
                                  if (request.status >= 200 && request.status < 400) {
                                      // We save the file in localStorage
                                      localStorage.firaSans = request.responseText;

                                      // ... and load the font
                                      addFont();
                                  }
                              };
                            request.send();
                          }
                        } catch(ex) {
                          // maybe load the font synchronously for woff-capable browsers
                          // to avoid blinking on every request when localStorage is not available
                        }
                    }());
                    </script>

Typo & Icons