Off White--off-white#f3f3f3
1.118.92
Storybook
Design Guidelines
This page describes many of the most basic building blocks of the KET Web Design System and how all should be used. Use the navigation links below to jump to a particular section.
Fonts
Open Sans is the only font approved for use on KET websites.
- Open Sans
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
1234567890 !@#$%^&*()
- Open Sans Bold
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
1234567890 !@#$%^&*()
- Open Sans Italics
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
1234567890 !@#$%^&*()
Headings
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Headings are NOT to be used to stylize content visually. Each of our KET headings are listed below for demonstration purposes.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Colors
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.
Light Gray--lt-gray#cdcecf
1.5713.32
Medium Gray--md-gray#97999B
2.857.34
Dark Gray--dk-gray#333333
12.631.66
Red--red, --error#ba0c2f
6.63.18
Pink--pink#E31C79
4.464.7
Coral--coral#FE704E
2.747.64
Yellow--yellow, --warning#FFCD00
1.513.98
Lime--lime#CEDC00
1.5113.86
Green--green, --success#77BC1F
2.338.99
Dark Green--dk-green#087B45
5.343.92
Mint--mint#6ECEB2
1.8811.13
Teal--teal#48D3CD
1.8311.47
Light Blue--lt-blue#486CD8
3.026.92
Blue--blue, --primary#2638c4
8.582.44
Navy--navy#0A145A
8.572.45
Purple--purple#6A1B9A
9.392.23
Links
Links are one of the most important navigation elements on the site and as such should be consistent across all KET domains while being easy to identify and interact with. Links come in two varieties: inline links and prominent links.
For all links, the link itself should be clear to the user as it the purpose of the link and expected behavior. Avoid using phrases like "click here" or making a full web URL visible in the link. Both are bad user experience and bad for accessibility.
- Inline Link
This is a line of text with an inline link. Inline links must be easily recognizable from the surrounding text for accessibility.
- Prominent Link
- This is a prominent link
Prominent links are larger and part of other components including site navigation and cards.
Form Elements
Form elements should be styled consistently and provide clear feedback to users. Different form elements like input fields, checkboxes, radio buttons, and select dropdowns should have appropriate styles.