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 5Header 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
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.
Experience the triumph of the first moon landing, witnessed by the largest TV audience in history. But dreams of space dramatically intersect with dreams of democracy, raising questions of national priorities and national identity.
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 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 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.
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.
It appears your browser is using an ad blocker. In addition to blocking ads, this software affects our ability to properly detect your location, which we must do before allowing access to video content. Please add KET.org to your safe list or disable your ad blocker for the best experience.