MyHEAT — Style Guide

MyHEAT Style Theme (v0.1.0)



Header Navigation Bar


Corporate site navbar breakpoint set to 930px




Hero Section

Hero Title

Hero Subtitle



Typography


Fonts

Default page font size is 16px on desktop and 12px on mobile.

Default Bulma typography classes are used.


Title 1 - 3rem/48px

Title 2 - 2.5rem/40px

Title 3 (default size) - 2rem/32px

Title 4 - 1.5rem/24px

Title 5 - 1.25rem/20px

Title 6 - 1rem/16px

Title 7 - 0.75rem/12px

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Subtitle 6

Paragraph text

Paragraph text - bold

Paragraph text - italic


Span
Link


Colours


Primary palette

Canary

RGB: 255, 153, 51

HEX: #FF9933

Charcoal

RGB: 120, 120, 120

HEX: #787878

White

RGB: 255, 255, 255

HEX: #FFFFFF

Tangerine

RGB: 255, 102, 51

HEX: #FF6633

Light Grey

RGB: 204, 204, 204

HEX: #CCCCCC

Black

RGB: 35, 31, 32

HEX: #231F20

Secondary palette

Marigold

RGB: 247, 137, 44

HEX: #F7892C

Mango

RGB: 255, 51, 41

HEX: #FF3329

Cherry

RGB: 188, 48, 43

HEX: #BC302B

Pineappple

RGB: 255, 204, 51

HEX: #FFCC33

Lime

RGB: 161, 206, 94

HEX: #A1CE5E

Juniper

RGB: 51, 102, 51

HEX: #336633

Cobalt

RGB: 51, 102, 153

HEX: #336699

Sky

RGB: 144, 220, 255

HEX: #90DCFF

Plum

RGB: 153, 51, 153

HEX: #993399

Heat Ratings

Juniper

Lime

HEX: #EF4323

Juniper

Pineapple

Mango

HEX: #41A048

Marigold

Cherry

Cherry

Light Grey



Icons

  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-datacollection"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-home-error"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-home-error-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-downarrow"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-downarrowcircle"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-envelope"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-facebook"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-1"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-1-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-2"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-2-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-3-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-3"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-4"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating--ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-5"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-5-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-6"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-6-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-7"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-7-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-8"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-8-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-9"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-9-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-10"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-10-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-sad"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-heat-rating-sad-ol"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-leftarrow"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-linkedin"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-myheat-home"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-myheat-home-filled"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-question"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-rightarrow"></i></span>
  • >
    <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-technology"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-twitter"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-uparrow"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-uparrowcircle"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-apps-menu"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-edit"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-fill"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-move"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-transparency"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-reset"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-cancel"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-circle"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-file-image"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-file-pdf"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-apps-menu"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-file-powerpoint"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-file-word"></i></span>
  • <span class='icon'><i class="icon-mh-size-2x icon-mh icon-mh-file-text"></i></span>

Available icon font size classes include, in addition to the Bulma typography helpers:


                            .icon-mh-size-2x {
                                font-size: 2em;
                            }
                            .icon-mh-size-3x {
                                font-size: 3em;
                            }
                            .icon-mh-size-4x {
                                font-size: 4em;
                            }
                            .icon-mh-size-5x {
                                font-size: 5em;
                            }


Forms

Typical Contact Form

  • error  Email is a required field



Buttons



Call to Action

Ready to unleash the power of Energy Made Visible?

Request a Demo


 SUBSCRIBE