Design styles

#ee1d23

Black text: AA Pass WCAG

White Text: Fail Normal text WCAG. Pass large text

(Taken from KCLS logo)

Primary Brand Color (bibliocommons)

#003f6b

Secondary brand color

#353535

AAA WCAG White

System messages color/system alerts

#02729e

Kids

Heading Test

KCLS Foundation. Do not use this row!

!

!

!

Primary Brand Color Your library’s BiblioCore Primary Brand Color will be used on BiblioWeb for the following:
  • Sidebar menu
  • Poll results
  • Contact Us button in the footer
  • Buttons

Recommendation

  • BiblioCommons suggests avoiding the following colors for your primary brand color:
    • Red – reasoning: this color is typically used to convey alerts and warnings
    • Grey – reasoning: this color is typically used to convey that an element is inactive
Secondary Brand Color Library provides hex#.  Must be contrast-compliant with white text.

The Secondary Brand Color will be used on BiblioWeb for the following:

  • Footer elements (divider line & address block)
  • The active tab of a Tabbed Carousel
  • The active tab on the Explore page

Recommendation

  • The Secondary Brand Color cannot be the same as the Primary Brand Color.
Link Color Default: #02729E (blue)

Ours: #003f6b (deep blue)

Configuration option: Library-provided Link Color

  • Library provides contrast-compliant hex#
  • This hex# will be a shared setting and leveraged for both BiblioWeb & BiblioEvents
  • Note: links in the Text Editor module of Custom Pages leverage the secondary link colour from the BiblioCommons Design System (#4d4d4d)

Recommendation

  • BiblioCommons suggests using a shade of blue, as this is a well-known web convention.

 

  1. --font-color-base: #000;
  2. --font-color-base-variant: #1a1a1a;
  3. --font-color-headings: #000000;
  4. --font-color-headings-variant: #000000;
  5. --link-color-secondary: #003f6b;
  6. --link-color-secondary-variant: #002138;
  7. --primary-brand-color: #003f6b;
  8. --primary-brand-color-variant: #002138;
  9. --secondary-brand-color: #353535;
  10. --secondary-brand-color-variant: #1c1c1c;
  11. --link-color-default: #003f6b;
  12. --link-color-default-variant: #002138;
  13. --link-color-default-lighten: #007bd1;
  14. --link-color-default-darken: #000305;
  15. --font-family-base: Arial, Helvetica, sans-serif;
  16. --font-family-headings: 'Open Sans', Helvetica, Arial, sans-serif;
  17. --font-weight-headings: 600;
  18. --sidebar-menu-color: #353535;
  19. --sidebar-menu-color-variant: #1c1c1c;
  20. --sidebar-menu-color-lighten: #4f4f4f;

  21. --sidebar-menu-color-darken: #1c1c1c;
  22. --sys-message-bg: #02729e;
  23. --sys-message-fg: #ffffff;


Visit KCLS


Free access to a world of resources! In libraries and online, 24/7.

Visit KCLS

Borrowing and Returns

Log into your account at kcls.org to renew materials, place holds, and more. Check out up to 100 items and up to 25 eBooks.

Computers

You can use a computer or access Wi-fi at any library. Use computers for up to 4 hours per location each day.

Printing

Copy, scan, and fax at KCLS from a library computer or your own device. $1.50 print/copy credits per week. Credits reset on Sunday.

Meeting and Study Rooms

Reserve a space to host a meeting, telework, or study at your library.

test

Borrowing and Returns

Log into your account at kcls.org to renew materials, place holds, and more. Check out up to 100 items and up to 25 eBooks.

Meeting and Study Rooms

Reserve a space to host a meeting, telework, or study at your library.

Printing

Copy, scan, and fax at KCLS from a library computer or your own device. $1.50 print/copy credits per week. Credits reset on Sunday.

Computers

You can use a computer or access Wi-fi at any library. Use computers for up to 4 hours per location each day.
Back to Top