Skip to Main Content

KET Web Style Guide

Overview

This website theme is based upon Bootstrap 4. As such, any information that is not included in this style guide can be assumed to be the default behavior and styling of that framework.

Official Color Palette

Color contrast is very important in making KET websites accessible. Text should have a contrast ratio against its background of at least 4.5:1 for body font and 3:1 on large font greater than 18px. The numbers beneath each color swatch show the contrast ratio between that color and black and white for reference.

Primary Colors

#2638C4Official KET

8.58:1

2.44:1

$blue, $ket-blue

#02a2be

3.03:1

6.91:1

$teal

#BA0C2FDonation Related

6.6:1

3.18:1

$red

#FFCD00Calls to Action

1.5:1

13.98:1

$yellow

Education Colors

#78BE20Education

2.28:1

9.18:1

$green, $edugreen

#E31C79Early Childhood

4.46:1

4.7:1

$pink, $ece

#FF8200K-12

2.48:1

8.44:1

$orange, $k12

#702F8AAdult Education

8.52:1

2.46:1

$purple, $adulted

PBS Colors

#2638C4PBS Blue

8.58:1

2.44:1

$pbs-blue

#0F1E8CPBS Medium Blue

13.25:1

1.58:1

$pbs-md-blue

#0A145APBS Navy

16.65:1

1.26:1

$pbs-navy-blue

#5680FFPassport

3.54:1

5.92:1

$passport-blue

#48D3CDPBS Teal

1.83:1

11.47:1

$pbs-teal

Grays

#F3F3F3Off White

1.11:1

18.92:1

$bg-offwhite

#CDCECFLight Gray

1.57:1

13.32:1

$lt-gray

#8d8F91Medium Gray

3.24:1

6.47:1

$md-gray

#333333Dark Gray

12.63:1

1.66:1

$dk-gray

Iconography

KET’s icons and icon font are available for use to vendors working on web and graphics-related projects for KET at: https://bitbucket.org/ket-dev/ket-icon-font/. Use or reproduction of KET brand assets is not authorized without prior written permission from KET. All rights reserved. Requests for permission to use KET logo(s) and/or marks should be directed to:

Todd Piccirilli
Senior Director, Marketing and Communications
tpiccirilli@ket.org

Typography

Websites under the KET identity should limit the fonts in use to those listed below. For maximum accessibility and consistency, the default font size should be 1rem (typically computed 16px). Font styles such as bold (strong) and italics (em) should be used sparingly and only in situations where the context justifies their use.

Some sections of content may be considered to be "special" content. This content recieves some unique styling to set it apart from the rest of the content and still be consistent across all KET websites.

PBS Sans

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

PBS Sans is the primary font on websites under the KET identity. Other acceptable sans-serif fonts are Open Sans, Arial and Helvetica.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in posuere augue. Maecenas nec purus quis ipsum blandit fermentum eget in turpis. Vivamus nec ligula et lacus porta mattis eu nec leo. Mauris ullamcorper imperdiet augue, non egestas justo ullamcorper vitae.

Open Sans

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

Open Sans is a secondary alternative font on websites under the KET identity. Other acceptable sans-serif fonts are Arial and Helvetica.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in posuere augue. Maecenas nec purus quis ipsum blandit fermentum eget in turpis. Vivamus nec ligula et lacus porta mattis eu nec leo. Mauris ullamcorper imperdiet augue, non egestas justo ullamcorper vitae.

PBS Sans Condensed

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

PBS Sans Condensed is a body font used to highlight special body text on websites under the KET identity. Examples of special body text include promos, quotations, and figure captions. Other acceptible special body fonts are Open Sans Condensed, Arial and Helvetica.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in posuere augue. Maecenas nec purus quis ipsum blandit fermentum eget in turpis. Vivamus nec ligula et lacus porta mattis eu nec leo. Mauris ullamcorper imperdiet augue, non egestas justo ullamcorper vitae.

Open Sans Condensed

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

Open Sans Condensed is a body font used to highlight special body text on websites under the KET identity. Examples of special body text include promos, quotations, and figure captions. Other acceptible special body fonts are Arial and Helvetica.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in posuere augue. Maecenas nec purus quis ipsum blandit fermentum eget in turpis. Vivamus nec ligula et lacus porta mattis eu nec leo. Mauris ullamcorper imperdiet augue, non egestas justo ullamcorper vitae.

Lato

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

Lato is the primary font for headings on websites under the KET identity. Other acceptible fonts are Gill Sans, Arial, and Helvetica.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in posuere augue. Maecenas nec purus quis ipsum blandit fermentum eget in turpis. Vivamus nec ligula et lacus porta mattis eu nec leo. Mauris ullamcorper imperdiet augue, non egestas justo ullamcorper vitae.

Menus

Sidebar

Sidebar menus on larger screens should appear on the right of the page. On smaller screens, the menus should be collapsed and should appear after the main body content.

Sidebar menu items are bold with a bottom border. When hovered over, they turn blue and increase slightly in font size.

Collapsed nested menus are indicated by a right caret that switches to a down caret and expands when clicked. Nested menus have a normal font-weight and are indented slightly.

Headings

The term "heading" refers to any text used to organize the content on the page. Typically these will be traditional heading tags, but if non-heading tags are used, they should still meet these criteria. Additionally, heading tags themselves should be used for content organization and not for styling.

All Headings should have a top margin of .5rem (computed 8px) and bottom margin of 1rem (computed 16px).

Main Section and Page Headings

Main section headers (h1) should be bold, all-caps, and at a size of 2rem (computed 32px).

Public Affairs

Article and Event Titles

Article and event titles should match main section headings except be shown in sentence case instead of all-caps.

Supreme Court Coverage

Special Headings

Headings of content that is considered "special" as detailed under Typography follow are not bolded.

When the Classroom is Outer Space

Subsequent Headings

Non-title headings should have a bottom margin of .5rem and should gradually decrease in size at the rates indicated below.

Header 2 (font-size: 1.75rem)

Header 3 (font-size: 1.5rem)

Header 4 (font-size: 1.25rem)

Header 5 Header 6 (font-size: 1.0rem)

Buttons

"Buttons" here refer to elements on the page that appear to the end user as a button. For accessibility purposes, other elements (including the side navigation of this page) are technically buttons but do not follow these criteria.

Buttons on KET identified websites are based upon the Bootstrap 4 button styles using the KET color palette.

General Purpose Buttons

Primary Button - btn-primary

Primary Outlined Button - btn-outline-primary

Secondary Button - btn-secondary

Secondary Oulined Button - btn-outline-secondary

Specific Usage Buttons

Call to Action Button - btn-cta

PBS Button - btn-pbs - only used in relation to PBS branded content

On This Page Button - btn-on-this-page- only used for skip links to content on the same page

Donate Button- btn-donate - only used to send users to a donation form

Small Button Variant- btn-sm - allowed with any other type to de-emphasize the button

Common Elements

Jump to:

Promos Callouts Blockquotes Lists Links

Promos

Promos are a form of special content that appear on the sites homepage and category pages. Promos contain a short piece of text, an image and links to related categories and programs, as well as a link to the larger article, page or video it is promoting.

Callouts

Callouts are used to bring attention to a small section of information. Callouts have a top and bottom border and background color options of either white or offwhite.

Blockquotes

Blockquotes are one of the special forms of content. The main body of the blockquote should be bold while the citation is italicized and prepended with a hyphen.

“Across Kentucky, I saw the heroic struggle to provide equal education thwarted by the barrier of unequal resources.

It was essential that we harness the power of television to assure the education and enrichment of our people so they would have every possible opportunity.

We could not afford to accept less.”
O. Leonard Press, KET founder and first executive director

Lists

Lists should, by default, be unstyled without bullets and the top level list should have no padding or margin. Nested lists should be indented some to highlight nesting. Bulleted lists are allowed, but are not the default.

Default

Main Item
Main Item
Main Item
Main Item

Nested List

Main Item

Nested Item
Nested Item
Nested Item

Main Item
Main Item
Main Item

Also Allowed

Main Item
Main Item
Main Item
Main Item

Links

Link text should be official KET blue with the light gray underline. On hover, link text should switch to dark gray to match the surrounding text.

This is a sentence with a link in the middle.

Links to documents or external sites should display the relevant icon after the link.

This is a link to an external site
This is a link to a pdf document
This is a link to a word document
This is a link to a spreadsheet document

Forms

Forms should follow the basic structure of the example form. However, fields may be displayed inline with their labels or each other.

Headers and non-submit buttons should be teal.
Legends and fieldset tags shold be used to maximize accessibility.
Placeholder text should be avoided to assist accessibility and UX.
Required fields should be designated with an asterisk.
Invalid fields should be styled in red with explanatory messages directly beneath the input field.
When a form is submitted it should
- display any error messages in an alert at the top of the form and scroll to the message on the screen
- if successful, send the user to a confirmation page
- if successful and not taken to a new page, hide the form and display a success message alert in its place

Form was successfully submitted.

Example Form

Text Input

Textarea

Select Input

Multiple select
(vertical scrollbars should be avoided within reason)

Datalist Input

Radio buttons
(radio buttons have a height and width of 1rem)

Option 1

Option 2

Option 3

Checkboxes
(checkboxes have a height and width of 1rem)

Option 1

Option 2

Color

Date

File

Range

Styling for the range input can be found under Theme Resources

Figures and Images

Any figure or image should have a minimum of 1rem (computed 16px) margin between it and surrounding content. If aligned left or right, the aligned side should have a margin of 0 to ensure alignment. On smaller screens, images should be centered on the page.

Figcaptions are considered special content and should appear .5rem below their figure.

Figure tag with caption

All non-decorative images must have alt tags to ensure accessibility.

Theme Resources

For web developers, below are some Sass mixins and variables to assist in your work.

Font Families

$primary-font-family : 'PBS Sans', 'Open Sans', Helvetica, Arial, sans-serif;
				$headings-font-family : Lato, 'Gill Sans', Arial, Helvetica, sans-serif;
				$special-font-family : 'PBS Sans Condensed', 'Open Sans Condensed', Helvetica, Arial, sans-serif;
				
				//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Open+Sans+Condensed:300,700|Lato:300,400,700'
				//docs.pbs.org/display/RES/Using+the+PBS+Sans+Font

Color Variables

$red 		: #ba0c2f;
				$yellow		: #FFCD00;
				$green		: #78BE20;
				$pink		: #E31C79;
				$orange		: #FF8200;
				$purple		: #702F8A;
				$blue		: #005EB8;
				$border-color : #d3d3d3;

				$ketblue 		: $blue;
				$edugreen		: $green;
				$ece			: $pink;
				$k12			: $orange;
				$adulted		: $purple;
				$passport-blue 	: #00AAEB;
				$pbs-blue 		: $passport-blue;

				$white : #ffffff;
				$black : #000000;

				$lt-gray : #cdcecf;
				$md-gray : #8D8F91;
				$dk-gray : #333333;
				$bg-offwhite : #F3F3F3;

Input Type Range Slider

// The draghandle
				$thumb-color: $blue;
				$thumb-height: 30px;
				$thumb-width: 10px;

				// The range
				$track-color: $border-color;
				$track-width: 100%;
				$track-height: .8rem;

				@mixin track {
					width: $track-width;
					height: $track-height;
					cursor: pointer;
				}

				@mixin thumb {
					width: $thumb-width;
					height: $thumb-height;
					cursor: pointer;
					background: $thumb-color;
					border:none;
				}

				@mixin input-type-range {
					-webkit-appearance: none;
					width: $track-width;
					background: transparent;

					&:focus {outline: none;}

					&::-webkit-slider-runnable-track {
						@include track;
						background: $track-color;
					}

					&::-webkit-slider-thumb {
						@include thumb;
						-webkit-appearance: none;
						margin-top: -.5rem;
					}

					&:focus::-webkit-slider-runnable-track {background: $track-color;}

					&::-moz-range-track {
						@include track;
						background: $track-color;
					}

					&::-moz-range-thumb {
						@include thumb;
						border-radius:0;
					}

					&::-ms-track {
						@include track;
						color: transparent;
						background: transparent;
					}

					&::-ms-fill-lower {background: $track-color;}
					&::-ms-fill-upper {background: $track-color;}

					&::-ms-thumb { @include thumb;}

					&:focus::-ms-fill-lower {background: $track-color;}
					&:focus::-ms-fill-upper {background: $track-color;}
				}