CSS, JavaScript & Images

The B.C. government web property look and feel can be accomplished with the following elements. Developers may use these elements as a starting place to meet the gov.bc.ca look and feel as required by policy. 

Any site developed on behalf of B.C. government must:

  • have been approved by the Joint Working Group
  • be developed according to the requirements in this guide; and:
  • adhere to the visual and writing styles from the web standards and guides; Writing for the Web; Plain Language Guide, Content Development Guide and the Visual Design Guide
  • not duplicate information hosted elsewhere
  • ensure all information relates and pertains to site intention
  • host “static” content within CMS Lite (gov.bc.ca) where possible

CSS Links

Developers are advised to copy and host a local file of gov.bc.ca CSS files to support the site's appearance according to gov.bc.ca look and feel.

  • http://www2.gov.bc.ca/StaticWebResources/static/shared/bootstrap-3.2.0/css/bootstrap.min.css?refresh=160106102
  • http://www2.gov.bc.ca/StaticWebResources/static/gov3/css/main.css?refresh=160106102

JS Links

Developers are advised to copy and host a local file of gov.bc.ca JS files to support gov.bc.ca's interactive functionality.  Please modify local copies to meet your application's environment needs.

  • http://www2.gov.bc.ca/StaticWebResources/static/shared/scripts/jquery/jquery-1.11.1.min.js                              
  • http://www2.gov.bc.ca/StaticWebResources/static/shared/bootstrap-3.2.0/js/bootstrap.min.js
  • http://www2.gov.bc.ca/StaticWebResources/static/gov3/js/misc.js
  • http://www2.gov.bc.ca/StaticWebResources/static/gov3/js/navMenu.js

Images and Buttons

B.C. Government Logo

B.C. Government Online Logo

  • When: all B.C. government websites and applications must display this logo
  • File location: http://www2.gov.bc.ca/assets/gov/home/gov3_bc_logo.png
  • How: Do not place a vertical line between the logo and site name

B.C. Government Favicon

B.C. Government Favicon

  • When: all B.C. government websites and applications must display this favicon
  • File location: http://www2.gov.bc.ca/favicon.ico

Icons and Buttons

Note: Customized buttons and navigation should be vetted by JWG or BCID (Corporate Identity team) prior to implementation.

Search icon within search box (expanded header)

B.C. Government Search Icon

  • When: use this icon when using the search feature within the header banner (expanded) and for search offering within page body
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/search-ico.png
  • How:
    • class="search-trigger"
    • class="search-suggestion-full ss-gac-m"
    • display the text “Search all of B.C. government” OR “Search this site”

Search icon (collapsed header)

B.C. Government Icon

  • When: use this icon when using the search feature within the collapsed header banner and for mobile devices
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/mini-menu/search-open-mobile.png
  • How: class="search-button navbar-toggle mini-menu-trigger"

Footer expand button

B.C. Government Footer Expandbutton

  • When: use this icon when the footer has extended content that needs to be viewed (ie. if a site map is offered)
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/footer_expandbutton.png
  • How: class="footerExpand"

Footer collapse button

B.C. Government Icon

  • When: use this icon when the footer has extended content that needs to be viewed (ie. if a site map is offered)
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/footer_collapsebutton.png
  • How: class="footerCollapse"

Back to top button

B.C. Government Back to Top button

  • When: use this button when a page content display extends over more than one screen
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/back-to-top.png
  • How: class="back-to-top footer-overlap"

Share button

BC Gov Share Button

  • When: use this button if a page is shareable
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/shared/img/icon_share.png
  • How:
    • float icon above the “back to top” button in the bottom right hand corner
    • class="footer-overlap"

Login/logoff button

B.C. government corporate online branding logout button

  • When: use this button when providing login access to users
  • Note:
    • cannot be implemented without a Privacy Impact Assessment and OCIO security requirements set in place
    • should be, where appropriate, coordinated with BDeID to provide centralized “one account” with government for users
  • How:
    • use CSS styling to present button
    • wording - Login and Logout are to be used
    • font - Regular 13px Myriad Pro #1a5a96
    • box - 70px width; 25px height; background colour #ffffff; border 1px white
    • buttons must have a label (within code)
    • login and user details hosted in the top right corner. (13px Myriad Pro; #ffffff; login id or name in italics) to the left of the collapsed search icon

Call to action button

Sign up for BCeID#

  • When: used to highlight a call to action on a page
  • Note: must not be an image
  • How: class="btn btn-primary"

Bullet

B.C. Government Bullet

  • Do not use bullet styles for layout
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/gov3/images/bullet.png

Font Family

  • Myriad-Pro, Calibri, Arial, Sans Serif
  • File location: http://www2.gov.bc.ca/StaticWebResources/static/shared/fonts/MyriadWebPro.ttf
  • Note: ​Enterprise licence is in place for Government of British Columbia web properties

Font Styles

  • Site title <h1 class="sitetitle"> <h1> Semi-bold 42px #fff [note: developer to add to CSS file]
  • Normal <p> Regular 14px #494949
  • Heading one <h1> Semi-bold 42px #494949
  • Heading two <h2> Semi-bold 24px #494949
  • Heading three <h3> Regular 20px #494949
  • Heading four <h4> Semi-bold 16px #494949
  • Title bars <h2 class="blue-heading-bar"> Background 83%; Opacity #003366; Padding 8px 15px 7px; Regular 24px #fff
  • Hyperlinks <a ref> Underlined Regular 13px #1a5a96. Do not customize link styles or behaviours
  • First level navigation <div class="level2Navigation"> Regular 13px #fff, background colour #38598a with vertical line separator colour # c6d6ee (note: this is second level navigation on gov.bc.ca)
  • Second level navigation <div class="level3Navigation"> Regular 13px #fff, background colour #5475a7 with vertical line separator colour # c6d6ee (note:this is third level navigation on gov.bc.ca)
  • Lefthand navigation for navigation levels 3 onward <div class="leftNav-item-wrapper"> Underlined Regular 14px #1a5a96 with # f2f2f2 border
  • Login text 13px Myriad Pro; #ffffff; italics
  • Search box text Regular 13px #bcbec5

Site Colours

The following corporate branding colours are to be used according to how they are approved for use. Variations will need to be vetted through the JWG or Corporate ID prior to use.

Note: Colour contrast must be checked for text on backgrounds to meet WCAG 2.0 requirements.

 

B.C. Government Colour 003366 #003366 Header & footer 83% opacity for background colour on title bars

B.C. Government colour #1a5a96 Links and title links

B.C. Government colour #38598a First level background colour for navigation bar (use #fff for navigation text)

B.C. Government colour #5475a7 Second level background colour for navigation bar (use #fff for navigation text)

B.C. Government colour #f2f2f2 Background grey left and right side bars (outside content body)

B.C. Government colour #fcba19 Highlight gold bar under header and above footer

B.C. Government colour #494949 Site wide text on white background

B.C. Government Corporate Online Branding Colour #bcbec5 #bcbec5 Return to op icon, share button icon, search icon, search box text and search box border

Secondary Colour Pallet

The following secondary pallet of colours offer options for display within the gov.bc.ca online style.

Note: Colour contrast must be checked for text on backgrounds to meet WCAG 2.0 requirements.

  PMS CMYK RGB Hex
  CoolGrey 3 C0, M0, Y0, K17 R208, G208, B209 d0d0d1
  CoolGrey 6 C33, M26, Y27, K21 R175, G175, B175 afafaf
  CoolGrey 10 C62, M53, Y50, K21 R97, G98, B101 616265
  7544 C10, M1, Y0, K40 R138, G145, B152 8a9198
  281 C100, M89, Y31, K30 R0, G38, B99 002663
  279 C68, M34, Y0, K0 R80, G145, B205 5091cd
  277 C39, M14, Y0, K0 R150, G192, B230 96c0e6
  142 C4, M27, Y83, K0 R243, G189, B72 f3bd48
  141 C4, M19, Y71, K0 R243, G203, B101 f3cd65
  1215 C2, M10, Y60, K0 R250, G222, B129 fade81
  7735 C70, M41, Y77, K29 R72, G100, B70 486446
  504 C80, M100, Y100, K30 R72, G33, B36 481124
  1795 C9, M97, Y92, K1 R216, G41, B47 d8292f
  7628 C C24, M97, Y99, K99 R161, G38, B34 a12622