Kootenay Family Place style guidelines and good practices Cheat Sheet
Page Headers, Images, Titles and Banners
Home page Header;
- Image should be full width and have a max height of …….
- Banner below should maintain a standard height of and text should be white and size ……
Secondary page headers;
- Image should be full width with a max height of 310px.
- Banner below should contatin H1, H2 or H3 title text in white only
- Banner can be any colour in the provided colour palette.
Section Banners and Titles;
- Section Banners can be any colour in the provided colour palette
- Section Banners should be no more than a max height of …….
- Section Banners can contain Title only or Title and short text (keeping in mind that more text will turn your banner into a full width coloured section)
- If there is going to be a short paragraph in the banner is should try to not be any longer than in the example below.
- Text in section Banners should be white and size H1, H2, or H3 ( try to maintain consistancy throughout section title sizes in order to avoid heirarchy confusion)
- Section Titles not in a banner should be size H1, H2, or H3 and can be any colour in the provided colour palette. The colour can be changed using <h3><span style=”color: #xxxxx;”>Examle text here</span></h3> in the ‘text’ editing section of the Body.
Images;
Images can also be used in order to liven up a page or a section but when using images it is important to have the right size image for the job otherwise the resolution can end up looking pixellated and bring the look of the site down with it. Please refer to the following guide for image guidelines, The Ultimate Guide to Using Images within Divi
Content Blocks
When using blocks to emphasize sections or pages chose a standard and stick with that standard. For example if you have square or rectangular blocks, switching to circles on a different page creates confusion to the user and can appear messy. So choosing a shape, and layout, font styles and design for your blocks is important for your look and feel. Once a standard is set Do Not Stray from this, if you have blocks of a solid colour, continue to use the solid colour style for other pages and avoid things like designs or dropshadows. Once you have a standard that is in place there are options that can be used to bring more life or diferentiation to your pages. Colours combinations within your colour palette can be used to create more feel throughout the pages without breaking up the overall quality of the site.
See the examples below for some suggestions on colour combos for content blocks
Blocks Option 1
The example below shows the block in Navy colour Hex #2e535e R 46 G 83 B94
Title: set at H2 size, regular text size set at 16.
Colour set at white
Buttons: text colour = White, background = Navy (#2e535e), border = White
on Hover = Orange Hex #f4a261, text colour and border colour = Orange Hex #f4a261
Children's Services
Childcare, Infant Development, Supported Child Development, Physiotherapy, Occupational Therapy & Speech Therapy
Family Programs
Check out our regularly scheduled programs here and find our Calendar for specific days.
Blocks option 2
The example below shows the block in Blue colour Hex #0e899e R 14 G 137 B148
Title: set at H2 size, regular text size set at 16.
Colour set at white
Buttons: text colour = White, background = Navy (#2e535e), border = White
on Hover = background Hex #oe899e, text colour, border colour and icon colour = Navy Hex #2e535e
Children's Services
Childcare, Infant Development, Supported Child Development, Physiotherapy, Occupational Therapy & Speech Therapy
Family Programs
Check out our regularly scheduled programs here and find our Calendar for specific days.
Blocks option 3
The example below shows the block in aPurple colour that has been added to your colour palette for a touch more variety if needed.
Hex #881d5b R 136 G 29 B 91
Title: set at H3 size, regular text size set at 16.
Colour set at white
Buttons: text colour = White, background = Purple (#881d5b), border = White
on Hover = background Hex #881d5b, text colour, border colour and icon colour = Teal Hex #0e899e
Children's Services
Childcare, Infant Development, Supported Child Development, Physiotherapy, Occupational Therapy & Speech Therapy
Family Programs
Check out our regularly scheduled programs here and find our Calendar for specific days.
Text and Colours
Colour Palette and Extended Colour Palette
The KFP Base Colour Palette consists of five colours drawn from the KFP logo. These colours are;
Navy:
#2e535e, R 46 G 83 B 94
Teal:
#2a9d8f, R 42 G 157 B 143
Blue:
#0e899e, R 14 G 137 B 158
Orange:
#f4a261, R 244 G 162 B 97
Rust:
#e76f51, R 231 G 111 B 81
Gold:
#e9c369, R 233 G 195 B 105
Drawing from the original colours the palette can extend out to the colours below for other applications as needed. These colours are;
Dark Teal:
#0c6d5d, R 12 G 109 B 93
Dark Blue:
#0d5c63, R 13 G 92 B 49
Deep Orange:
#dd7027, R 221 G 112 B 39
Red Rust:
#e1462a, R 225 G 75 B 42
Deep Gold:
#d68e28, R 214 G 142 B 40
One additional colour in a light and dark version have also been added to the extended colour palette
Light Plum:
#9a4a71, R 154 G 74 B 113
Dark Plum:
#881d5b, R G B
Colour Choices for text options
When looking at a web site, colour can make a big difference to the user experience, it can make the overall experience more pleasing or potentially unsatisfying and drive users away. Generally when it comes to text content it is best to maintain one colour of text for main content. Titles or headers, quotes, and bolded or highlighted and link text can be areas where you can break that up a little and get away with adding in different colour options. When doing so though we need to keep in mind that sometimes the colours we are presented with do not always work in text format. They may be to light to provide proper legibility or depending on the background colour they may also be to dark. When this happens it is safe to stray a little in the colour department using different tints or shades of our original colour palette. This helps to ensure readability and continuity throughout the site.
Below is an example using different colours for Tab Titles
Navy Font Colour
This colour works well as a header/title font and is best viewed on a white background. When used this way it provides a good contrast for viewing and reading. When using this as a header please use font sizes H2 and H3 for best readability.
The Hex code is #2e535e and the RGB is = to R 46 G 83 B 94.
Teal Colour
The light Teal in the original colour palette presents legibility issues when used in text. I suggest using a darker version of your original Teal for these applications. For the Dark Teal colour use Hex code #0c6d5d and RGB = R 12 G 109 B 93.
Using this darker Teal will provide a better visual experience for users trying to read the text and will still maintain continuity of colours throughout the site.
When using this colour as a text colour it is best presented in Header or Title format. If you are using this as a header please use font sizes H2 and H3 for best readability.
Blue Colour
The light Blue in the original colour palette presents legibility issues when used in text. I suggest using a darker version of your original Blue for these applications. For the Darker Blue colour use Hex code #0d5c63 and RGB = R 13 G 92 B 99.
Using this darker Blue will provide a better visual experience for users trying to read the text and will still maintain continuity of colours throughout the site.
When using this colour as a text colour it is best presented in Header or Title format. If you are using this as a header please use font sizes H2 and H3 for best readability.
Orange Colour
The Orange in the original colour palette presents legibility issues when used in text. I suggest using a darker version of your original Orange for these applications. For the Darker Orange colour use Hex code #dd7027 and RGB = R 221 G 112 B 39.
Using this darker Orange will provide a better visual experience for users trying to read the text and will still maintain continuity of colours throughout the site.
When using this colour as a text colour it is best presented in Header or Title format. If you are using this as a header please use font sizes H2 and H3 for best readability.
Rust Colour
The light Rust in the original colour palette presents legibility issues when used in text. I suggest using a darker version of your original Rust colour for these applications. For the Darker Rust colour use Hex code #e14b2a and RGB = R 225 G 75 B 42.
Using this darker Rust colour will provide a better visual experience for users trying to read the text and will still maintain continuity of colours throughout the site.
When using this colour as a text colour it is best presented in Header or Title format. If you are using this as a header please use font sizes H2 and H3 for best readability.
Gold Colour
The light Gold in the original colour palette presents legibility issues when used in text. I suggest using a darker version of your original Gold for these applications. For the Dark Gold colour use Hex code #d68e28 and RGB = R 214 G 142 B 40.
Using this darker Gold will provide a better visual experience for users trying to read the text and will still maintain continuity of colours throughout the site.
When using this colour as a text colour it is best presented in Header or Title format. If you are using this as a header please use font sizes H2 and H3 for best readability.