Sign Up for our Window Rebate Education Session Click Here!

Style Guide

Colours

Primary Colours

Turkstra's main colour palette for web.

Turkstra Blue/Deep

#08134d

Turkstra Blue/Pressed

#0f2492

Turkstra Blue

#3246ae

Turkstra Blue/Hover

#5067de

Vibrant Blue/Deep

#014e76

Vibrant Blue/Pressed

#067cba

Vibrant Blue

#0095d6

Vibrant Blue/Hover

#3cafe0

Vibrant Blue/Sky

#cce9ff

Vibrant Blue/Sky/Hover

#f2f9ff

Vibrant Blue/Air

#f2f9ff

Red

#e31c3d

Red/Soft

#fff4f6

Green/Bold

#1e6b3c

Green

#39a46d

Green/Soft

#e2f3ea

Design Centre Brown

#9b8165

Design Centre Brown Hover

#b69c7d

Design Centre Black

#333333

Secondary Colours

Used when validating forms & focusing on elements for accessibility.

Gold/Deep

#a67c01

Gold/Pressed

#d6a617

Gold

#fec829

Gold/Hover

#ffde7c

Gold/Soft

#ffefa7

Gold/Mellow

#fff9dc

Safety Orange/Deep

#79452b

Safety Orange/Pressed

#c36333

Safety Orange

#ff9762

Safety Orange/Hover

#ffb088

Safety Orange/Sherbet

#ffe2d3

Neutrals Colours

Additional colours used throughout the site

White Transparent

rgba(255, 255, 255, 0.2)

White

#ffffff

Soft Gray

#f7f7fa

Light Gray

#e3e5ed

Gray Hover

#9ea0a9

Gray

#85868f

Dark Gray

#71737a

Charcoal

#3d3e44

Black

#000000

Typography

Body Typeface

Aa Bb 123 quasimoda

Heading Typeface

Aa Bb 123 din-2014

Headings

h1 or class="heading heading--1"

H1 Heading

h2 or class="heading heading--2"

H2 Heading

h3 or class="heading heading--3"

H3 Heading

h4 or class="heading heading--4"

H4 Heading

h5 or class="heading heading--5"

H5 Heading

h6 or class="heading heading--6"

H6 Heading

Subtitles

These subtitle modifiers can be added to any `h` level element.

class="heading heading--subtitle"

Subtitle

class="heading heading--subtitle-2"

Subtitle 2

Body Copy

Regular Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Links

Link Text

Buttons

Default

class="button"

Secondary

class="button button--secondary"

Inverse

class="button button--inverse"

Alternate

class="button button--alternate"

Large

class="button button--large"

Small

class="button button--small"

Disabled

disabled attribute or class="button button--disabled"

Forms

Property

class="property"

class="property" with note

Note

class="property" with error note

Error Note

class="property" with required field

Button Property

class="button-property"

Text Box

class="text-box"

class="text-box--small"

class="text-box text-box--full-width"

class="text-box text-box--multi-line"

Inline Form

Inline Form sizes the input/button height to the same height

class="inline-form"

Inline Form with regular sized components

Inline Form with small text-box and button

Products

Product Summary

class="product-summary"

Freud Canada Inc.

#0 Freud Plate Joiner Biscuits Splines, (50/Bag)

$8.98 / Pack (approx)

SKU # 950-00

Messages

Default

class="message" or class="message message--info"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Error

class="message message--error"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Success

class="message message--success"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Warning

class="message message--warning"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link