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
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)
Messages
Default
class="message" or class="message message--info"
Error
class="message message--error"
Success
class="message message--success"
Warning
class="message message--warning"