colors

colors   

The color styles

    Primary Color Palette

$primaryColor
#000000
$secondaryColor
#0032A0
$tertiaryColor
#FFFFFF

    Grey Color Palette

$otisLighterGrey
#EFEFEF
$otisBeige
#E6E6E6
$otisPaleGrey
#E4E4E4
$otisBlueGrey
#BCC8CC
$otisLightGrey
#949494
$otisDarkGrey
#4D4D4D
$otisBlack
#1A1A1A

    Product Color Palette

$skyriseGold
#86754D
$gen2Green
#7F9F49
$hydrofitBlue
#245E82

    Social Color Palette

$facebookBlue
#4A77EA
$twitterBlue
#55ACEE
Copy
Edit
<pre> Primary Color Palette </pre> <hr> <div class="colors"> <div class="color color1"> <span>$primaryColor<br /> #000000</span> </div> <div class="color color2"> <span>$secondaryColor<br /> #0032A0</span> </div> <div class="color black color3"> <span>$tertiaryColor<br /> #FFFFFF</span> </div> </div> <hr> <pre> Grey Color Palette </pre> <hr> <div class="colors"> <div class="color black color10"> <span>$otisLighterGrey<br /> #EFEFEF</span> </div> <div class="color black color13"> <span>$otisBeige<br /> #E6E6E6</span> </div> <div class="color black color11"> <span>$otisPaleGrey<br /> #E4E4E4</span> </div> <div class="color color8"> <span>$otisBlueGrey<br /> #BCC8CC</span> </div> <div class="color color9"> <span>$otisLightGrey<br /> #949494</span> </div> <div class="color color12"> <span>$otisDarkGrey<br /> #4D4D4D</span> </div> <div class="color color14"> <span>$otisBlack<br /> #1A1A1A</span> </div> </div> <hr> <pre> Product Color Palette </pre> <hr> <div class="colors"> <div class="color color16"> <span>$skyriseGold<br /> #86754D</span> </div> <div class="color color17"> <span>$gen2Green<br /> #7F9F49</span> </div> <div class="color color18"> <span>$hydrofitBlue<br /> #245E82</span> </div> </div> <hr> <pre> Social Color Palette </pre> <hr> <div class="colors"> <div class="color color19"> <span>$facebookBlue<br /> #4A77EA</span> </div> <div class="color color20"> <span>$twitterBlue<br /> #55ACEE</span> </div> </div>
Copy
Copy
Edit
//PRIMARY PALETTE $primaryColor: #000000; $secondaryColor: #0032a0; $tertiaryColor: #FFFFFF; $skyriseGold: #86754d; $otisGreen: #7f9f49; $otisPaleGreen: #afc68a; $otisRichGreen: #006837; //ACCENT COLOURS $otisBlueGrey: #bcc8cc; $otisLightGrey: #949494; $otisLighterGrey: #efefef; $otisPaleGrey: #e4e4e4; $otisDarkGrey: #4d4d4d; $otisBeige: #e6e6e6; $otisBlack: #1a1a1a; $otisOffWhite: #f2f2f2; // PRODUCT COLOURS $skyriseGold: #86754d; $gen2Green: #7f9f49; $hydrofitBlue: #245e82; //SOCIAL PALETTE $facebookBlue: #4a77ea; $twitterBlue: #55acee; .color1{ background: $primaryColor; } .color2{ background: $secondaryColor; } .color3{ background: $tertiaryColor; } .color4{ background: $skyriseGold; } .color5{ background: $otisGreen; } .color6{ background: $otisPaleGreen; } .color7{ background: $otisRichGreen; } .color8{ background: $otisBlueGrey; } .color9{ background: $otisLightGrey; } .color10{ background: $otisLighterGrey; } .color11{ background: $otisPaleGrey; } .color12{ background: $otisDarkGrey; } .color13{ background: $otisBeige; } .color14{ background: $otisBlack; } .color15{ background: $otisOffWhite; } .color16{ background: $skyriseGold; } .color17{ background: $gen2Green; } .color18{ background: $hydrofitBlue; } .color19{ background: $facebookBlue; } .color20{ background: $twitterBlue; } .colors:before, .colors:after { content: " "; display: table; } .colors:after { clear: both; } .colors { *zoom: 1; } .color{ width:140px; height:140px; float:left; margin-right:10px; padding:10px; color:#fff; font-size:12px; &.black { color: $primaryColor !important; } } .colorFixed{ position: fixed; z-index: 3000; right: 0; top: 0; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.57); .color{ float: none; margin-right:0; width:70px; height:50px; } }