BoilerJuice Style Guide | UI Playbook

Media Queries

  • $xs: ‘min-width: 480px’;
  • $sm: ‘min-width: 768px’;
  • $md: ‘min-width: 992px’;
  • $lg: ‘min-width: 1200px’;

Colour Palette

Greys

#444444

default text, hover, nav

#666666

not so dark, but white text visible

#b8b8b8

disabled text

#d0d0d0

borders, lines, hint text, disabled bg

#eeeeee

whole background

#f7f7f7

lightest grey

#ffffff

white


Oranges and Yellow

#f05a28 - logo

text link

#F7931E - logo

highlights, background for active state

#FEFCDB

highlight box, bg for hover


Greens

#67C200

primary

#8ADA0B

primary hover


Error/Warning/Success Messages

#D0011B

Alert Red

#FFDEE2

Alert BG

#F7931E

Warning Orange

#FFF0BC

Warning BG

#67C200

Success Green

#E2FFC1

Success BG


Shadows

box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

Default buttons

box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.3);

Hover buttons

box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

Inner shadow for inputs


H1

  • font-family: Montserrat;
  • font-size: 30px;
  • font-weight: 700;
  • color: #444444;
  • line-height: 37px;

H2

  • font-family: Montserrat;
  • font-size: 25px;
  • font-weight:400;
  • color: #444444;
  • line-height: 30px;

H3

  • font-family: Montserrat;
  • font-size: 21px;
  • font-weight:400;
  • color: #444444;
  • line-height: 25px;

p

  • font-family: OpenSans;
  • font-size: 18px;
  • font-weight:400;
  • color: #444444;
  • line-height: 30px;

text link

  • color: #F05A28;
  • border-bottom: dotted 1px #F05A28;
  • padding-bottom: 1px;

text link :hover

  • color: #F05A28;
  • border-bottom: solid 1px #F05A28;
  • padding-bottom: 1px;

tiny text

  • font-family: OpenSans;
  • font-size: 14px;
  • color: #444444;
  • line-height: 17px;

white link on dark background

  • color: #fff;
  • border-bottom: solid 1px #fff;
  • padding-bottom: 1px;

Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare orci at ipsum semper ultrices. Cras placerat eros dui, non efficitur felis mattis sit amet. Duis enim libero, vehicula ac efficitur vitae, varius eu dolor. Phasellus facilisis, nisi eget vulputate elementum, ante erat aliquam tortor, imperdiet semper eros ipsum at velit. Nulla malesuada viverra sem, et ornare nibh faucibus at.
  • Duis enim libero, vehicula ac efficitur vitae
  • Nulla malesuada viverra sem
  • Cras placerat eros dui
  • padding-bottom: 15px;
  • padding-left:15px;

Ordered List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare orci at ipsum semper ultrices. Cras placerat eros dui, non efficitur felis mattis sit amet. Duis enim libero, vehicula ac efficitur vitae, varius eu dolor. Phasellus facilisis, nisi eget vulputate elementum, ante erat aliquam tortor, imperdiet semper eros ipsum at velit. Nulla malesuada viverra sem, et ornare nibh faucibus at.
  2. Duis enim libero, vehicula ac efficitur vitae
  3. Nulla malesuada viverra sem
  4. Cras placerat eros dui
  • padding-bottom: 15px;
  • padding-left:15px;

Tick list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare orci at ipsum semper ultrices. Cras placerat eros dui, non efficitur felis mattis sit amet. Duis enim libero, vehicula ac efficitur vitae, varius eu dolor. Phasellus facilisis, nisi eget vulputate elementum, ante erat aliquam tortor, imperdiet semper eros ipsum at velit. Nulla malesuada viverra sem, et ornare nibh faucibus at.
  • Duis enim libero, vehicula ac efficitur vitae
  • Nulla malesuada viverra sem
  • Cras placerat eros dui
  • padding-bottom: 15px;
  • padding-left:15px;
  • font-family: 'FontAwesome';
  • content: '\f00c';
  • color: #67C200;

Highlight box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare orci at ipsum semper ultrices. Cras placerat eros dui, non efficitur felis mattis sit amet. Duis enim libero, vehicula ac efficitur vitae, varius eu dolor.

  • background-color: #FEFCDB;
  • border-radius: 6px;
  • padding:30px;
  • margin:30px 0px;

Plain line separator


  • border-top: solid 1px #666666;

White arrow separator

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare orci at ipsum semper ultrices. Cras non efficitur felis mattis sit amet. Duis enim libero, vehicula ac efficitur vitae, varius eu dolor.



Primary Buttons (with :hover)



Default

  • font-size:24px;
  • font-family: OpenSans
  • box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
  • background: #67C200;
  • border-color: #67C200;

:hover

  • box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3);
  • background: #8ADA0B;
  • border-color: #67C200;

Secondary Buttons (with :hover)



Default

  • color:#444444;
  • background: #fff;
  • border-color: #b8b8b8;

:hover

  • border-color: #444;

Destroy Buttons (with :hover)



Destruct button

  • color:#FFFFFF;
  • background: #D0011B;
  • border-color: #a70300;

:hover

  • background: #a70300;

Disabled Buttons (no hover or shadow)

Default

  • color:#B8B8B8;
  • background: #D0D0D0;
  • cursor:default;
  • box-shadow: none;

Smaller Buttons (with :hover)

Default

  • font-size:18px;
  • padding: 5px 20px;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

:hover

  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.3);

Tables

Bedrooms Average Oil Usage Yearly Cost
1 900 £365.88
2 1455 £586.25
3 1585 £639.52
4 2037 £822.61

Title

  • background-color:#666666;
  • font-weight:700;

Odd Row

  • background-color:#eeeeee;

Fields

Field - default

  • border: 1px solid #D0D0D0;
  • box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2);
  • border-radius: 6px;

Hint Text

  • color:#D0D0D0

Fields - focus

  • border: 1px solid #444444;
  • box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2);

Fields - filled

Text

  • color:#444444;

Dropdown - unselected - IMAGE

Arrow Color

  • background-color:#F7931E; /*orange*/

Field

  • box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2);
  • border: 1px solid #D0D0D0;

Dropdown - select - IMAGE

Separator Line Color

  • border-color:#d0d0d0; /* light grey */

Highlight Color

  • background-color:#FEFCDB; /* light yellow */

Grouped Buttons

Text Only

Text with Icons

Default

  • border:solid 1px #d0d0d0;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

:hover

  • background-color: #FEFCDB;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

:focus

  • background-color: #F7931E;
  • color: #fff;

Stepper - incremental values

Default

  • border:solid 1px #d0d0d0;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

:hover

  • background-color: #FEFCDB;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);

pressed

  • background-color: #F7931E;
  • color: #fff;

Side Navigation

Text Only

Text and Icons


Form Messages

Inline

Please enter a valid email address Changing the postcode may change the price Your quote has been re-generated

Global

Please enter a valid email address Changing the postcode may change the price Your quote has been re-generated
  • <i class="fa fa-exclamation-triangle"></i>
  • background-color:#D0011B /* Error Red */
  • background-color:#FFDEE2 /* Error BG */
  • <i class="fa fa-info-circle"></i>
  • background-color:#F7931E /* Warning Orange */
  • background-color:#FFF0BC /* Warning BG */
  • <i class="fa fa-check"></i>
  • background-color:#67C200 /* Success Green */
  • background-color:#E2FFC1 /* Success BG */

Checkboxes (Image)

Checked

  • background-color: #F7931E;
  • border-color: #F7931E;
  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

Unchecked

  • border-color: #D0D0D0;
  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

Radio Buttons (Images)

Checked

  • background-color: #F7931E;
  • border-color: #F7931E;
  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

Unchecked

  • border-color: #D0D0D0;
  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

Accordians (IMAGE)

Plus icon

  • color: #d0d0d0;
  • <i class="fa fa-plus-square-o"></i>

Plus icon :hover

  • color: #F7931E;
  • <i class="fa fa-plus-square"></i>

Minus icon :hover and :focus

  • color: #F7931E;
  • <i class="fa fa-minus-square"></i>

Minus icon :active

  • color: #d0d0d0;
  • <i class="fa fa-minus-square-o"></i>

Textboxes and Scrollbars (IMAGE)

Box

  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
  • border-color:#d0d0d0;

Slider BG

  • color:#eeeeee;

Slider handle

  • color:#b8b8b8;

Slider (IMAGE)

Default grey

  • color: #d0d0d0;

Selection orange

  • color: #F7931E;

Toggle

Default

  • box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
  • border-color:#d0d0d0;

Deselected text

  • color: #d0d0d0;

Selected text

  • color: #444444;

Handle orange

  • color: #F7931E;

Carousel

Button

  • border: 1px solid #D0D0D0;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
  • color: #F7931E;

Pressed Button

  • border: 1px solid #F7931E;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.3);
  • color: #fff;
  • background-color: #F7931E;

Pagination

Default

  • border: 1px solid #D0D0D0;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
  • color: #444;
  • background-color: #ffffff;

:hover

  • border: 1px solid #444444;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
  • color: #444;
  • background-color: #ffffff;

:active

  • border: 1px solid #F7931E;
  • box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.3);
  • color: #fff;
  • background-color: #F7931E;

Tabs

Default

  • border: 1px solid #D0D0D0;
  • box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.2);
  • color: #444;
  • background-color: #ffffff;

:hover

  • border: 1px solid #444444;
  • box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.2);
  • color: #444;
  • background-color: #ffffff;

:active

  • This also has a thicker horizontal border next to it: 5px high #F7931E
  • border: 1px solid #F7931E;
  • box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.3);
  • color: #fff;
  • background-color: #F7931E;

Progress Bars

Current Stage - Number Circle

  • CIRCLE = color: #F7931E;
  • NUMBER = color: #FFF;
  • TEXT = color: #444;
  • <i class="fa fa-circle" aria-hidden="true"></i>

Completed Stage - Check Circle

  • CIRCLE = color: #F7931E;
  • CHECK = color: #FFF;
  • TEXT = color: #444;
  • <i class="fa fa-check-circle" aria-hidden="true"></i>

Uncompleted Stage - Grey Number Circle

  • CIRCLE = color: #B8B8B8;
  • NUMBER = color: #FFF;
  • TEXT = color: #444;
  • <i class="fa fa-circle" aria-hidden="true"></i>

Modals

Weighted Upsell

Unweighted Upsell

Weighted Warning

Box

  • border-color: #d0d0d0;
  • border-radius: 6px;
  • colour: #67C200;

BG Grey

  • background-color: #eeeeee;

Trustpilot Stars

  • <i class="fa fa-star fa-3x fa-fw"></i>

Spinners

         
  • <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Social icons

  • .fa-facebook-square {color:#3b5998;}
  • .fa-twitter-square {color:#55acee;}
  • .fa-google-plus-square {color:#dd4b39;}
  • .fa-linkedin-square {color:#007bb5;}