Although we value an aesthetically pleasing use of colour, we place a higher value on clear communication. The use of colour should be rational, and should serve to support the purpose of the content, keeping the user tasks in mind.
Colour should be accessible
Colour choices should be made with consideration of users who have difficulty viewing websites and apps because of a disability or form of colour blindness.
Colour palette
The web color palette is based off of CNC’s Branding Guidelines. The palette meets or exceeds WCAG 2.0 Level AA Accessibility Guidelines.
Primary Colours
AA
Red (Primary)
#EA1525
AA
Dark Teal
#2D4245
AA
Gray
#646C6D
AA
Teal (Secondary)
#6DC4BC
AA
Mint
#B7CDC8
AA
Dark Red
#4E131E
Secondary Colours
Grays
AA
Faint Gray
#EFF0F1
AA
Light Gray
#E0E3E3
Teal/Mints
AA
Faint Mint
#F6F9F8
AA
Light Mint
#DBE6E3
AA
Light Teal
#C5E7E4
Functional Colours
AA
Success
#117F5A
AA
Warning
#F5A623
AA
Danger
#C2202A
Colour usage
CNC Red is the most representative brand colour. It should be used sparingly on most UI elements. Ideally, it is limited to primary actions or accents within the website.
Secondary colours (grays and mints) can be used on most UI elements but should be limited to:
Background colours
Border/line colours
Highlights
Functional colours have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red to communicate an error, yellow for a warning, and green for a successful action during form submissions or interface elements that require user input and feedback.
When implementing colour, the combination chosen should be compliant with WCAG 2.0 AA Accessibility Guidelines and have a minimum of 4.5:1 contrast ratio for normal text and 3:1 for large text. There are many online resources for testing the contrast ratio of colour combinations like the one provided by WebAIM: webaim.org/resources/contrastchecker/.
Colour combinations
The following combinations are used throughout the site and are compliant with WCAG 2.0 AA Accessibility Guidelines.
AAA
Indicates a colour combination that is AAA WCAG Compliant.
AA
Indicates a colour combination that is AA WCAG Compliant.
Do not use White on White 0.0.0
White on Red 4.53:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
White on Dark Red 14.62:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
White on Dark Teal 10.62:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Do not use White on Mint 1.66:1
Do not use White on Teal 2.04:1
Black on White 21:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Black on Red 4.63:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Do not use Black on Dark Red 1.43:1
Do not use Black on Dark Teal 1.97:1
Black on Mint 12.58:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Black on Teal 10.27:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Red on White 4.53:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Do not use Red on Red 0.0.0
Red on Dark Red 3.22:1
Large Text
AA
WCAG compliant for large text
Small Text
Not WCAG compliant for large text
Do not use Red on Dark Teal 2.34:1
Do not use Red on Mint 2.71:1
Do not use Red on Teal 2.21:1
Dark Red on White 14.62:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Dark Red on Red 3.22:1
Large Text
AA
WCAG compliant for large text
Small Text
Not WCAG compliant for large text
Do not use Dark Red on Dark Red 0.0.0
Do not use Dark Red on Dark Teal 1.37:1
Dark Red on Mint 8.76:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Dark Red on Teal 7.15:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Dark Teal on White 10.62:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Do not use Dark Teal on Red 2.34:1
Do not use Dark Teal on Dark Red 1.37:1
Do not use Dark Teal on Dark Teal 0.0.0
Dark Teal on Mint 6.36:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Dark Teal on Teal 5.19:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Do not use Mint on White 1.66:1
Do not use Mint on Red 2.71:1
Mint on Dark Red 8.76:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Mint on Dark Teal 6.36:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Do not use Mint on Mint 0.0.0
Do not use Mint on Teal 1.22:1
Do not use Teal on White 2.04:1
Do not use Teal on Red 2.21:1
Teal on Dark Red 7.15:1
Large Text
AAA
WCAG compliant for large text
Small Text
AAA
WCAG compliant for large text
Teal on Dark Teal 5.19:1
Large Text
AAA
WCAG compliant for large text
Small Text
AA
WCAG compliant for large text
Do not use Teal on Mint 1.22:1
Do not use Teal on Teal 0.0.0
Typography
Font Families
Web font choices align with CNC Branding Guidelines. The site uses two font families: Stag and Open Sans, and an icon font family: Font Awesome.
Stag
Stag font is reserved for headings, brief intro text and areas where the CNC brand is emphasized; i.e. header, and hero areas.
Book
Book Italic
Medium
Semibold
Bold
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Open Sans
Open Sans font is optimized for legibility across print, web and mobile interfaces. For this reason, it is used across CNC’s website for most of the body text; short or long paragraphs, links and UI elements like dropdowns, form fields, etc.
Regular
Italic
Semibold
Bold
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Font Awesome
CNC’s website uses Font Awesome as the icon font. It is a well established icon toolkit with hundreds of icons available to suit all of the website’s needs. A pro version of this font is also available for purchase for an even wider range of options.
Brands
Solid
Regular
Light
Thin
Duotone
Headings
Light Background
Heading 1
Heading 2
Heading 3
Heading 4
Dark Background
Heading 1
Heading 2
Heading 3
Heading 4
Subheadings
Subheadings can be used when the full title of the page or section would otherwise be too long or unwieldy. Subheadings can be used either before or after the main title.
Light Background
Heading 1This is a subtitle
This is a subtitleHeading 2
Dark Background
Heading 1This is a subtitle
This is a subtitleHeading 2
Hero Banner Styles
Brief copy or text on home page and campus banners.
Light Background
This is a subtitle Heading 1
Inner page intro & banner boilerplate
Dark Background
This is a subtitle Heading 1
This is some banner copy.
Body Styles
The following styles are used for the majority of the content on a page. Most have contextual meaning and help the user understand the content with greater clarity.
Paragraph Text
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa qui. Proin a velit leo. Cras ac rutrum odio. Ut vitae fringilla nibh. Duis id efficitur metus. Pellentesque faucibus eget felis tempus aliquam.
In ut lacus turpis. Nullam aliquam lobortis lacus, id pellentesque ex cursus vitae. Nullam egestas quam ac neque congue ornare. Proin cursus a lectus vel ullamcorper. Nunc pulvinar scelerisque libero ac imperdiet.
Use
Short or long pieces of text.
Dark Paragraph Text
Paragraph text - donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa qui. Proin a velit leo. Cras ac rutrum odio. Ut vitae fringilla nibh. Duis id efficitur metus. Pellentesque faucibus eget felis tempus aliquam.
In ut lacus turpis. Nullam aliquam lobortis lacus, id pellentesque ex cursus vitae. Nullam egestas quam ac neque congue ornare. Proin cursus a lectus vel ullamcorper. Nunc pulvinar scelerisque libero ac imperdiet.
Use
Darker paragraph for use on notice banners with a light gray background.
Lead Paragraph
This paragraph quickly summarizes the content on the page and is usually 1-2 sentences long.
Use
A small paragraph below the page title to summarize the content within or clarify the title of the page.
Small Paragraph Text
Paragraph Small - donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa qui.
Use
When a smaller size of text is needed for hierarchy, i.e. table content, sidebar items, cards.
Data
Data Items, Captions, etc.
Use
Used for supporting data such as dates, campus, author, etc.
Bulleted List
This is a bullet
Another bullet
And yet another bullet
Use
For lists where the order is not significant.
Ordered List
This is a bollet
Another bullet
And yet another bullet
Use
For lists where the order is significant.
Blockquote
I received a very superior education at CNC. The faculty were not only extremely knowledgeable, but also very passionate and skilled clinicians. They were always willing to answer questions or offer one-on-one help while catering the education to each student's individual strengths and weaknesses.
Student Name
Student in the Program Name Program
Use
A direct quote that you would like to draw attention to.
Inline Markup
These styles can be used inside paragraphs to guide attention or convey additional meaning or tone.
This line contains bold text using the <strong> tag.
<strong> or bold should be used to draw attention to critical words or phrases.
This line contains italicized text using the <em> tag.
<em> or italics is used to emphasize particular words, phrases, or clauses.
You can use the <mark> tag to highlight text.
<mark> (the highlight tag) should be used sparingly for feature words. It is only ever done with a positive light.
This line of text is meant to be treated as deleted text.
<del> should only be used for text that has since been deleted or is no longer relevant.
This line of text is meant to be treated as no longer accurate.
<s> or strikethrough tags should be used around text that is no longer accurate or has been replaced.
This line of text is meant to be treated as an addition to the document.
<ins> or underline should be used to indicate an addition or update to the information. Often comes after an element stricken with <s>
This line of text is lower priority than other text around it. Readers can probably skip over it without trouble.
<small> should be used for de-emphasized text, disclaimers, or explanations.
Navigation
Breadcrumbs
Breadcrumbs appear at the top of pages and allow users to see where they are in the site map.
Use an ordered list to display breadcrumbs.
Main Menu
This menu can be used as a megamenu, or optionally with standard dropdowns. The menu adjusts to collapse gracefully in a mobile environment, as well as offering a "sticky" function and offering transparency over a home banner.
Utility Menu
A utility menu is used in addition to the main navigation to include common links, audience navigation options, search options, and user login information.
Context Menu
These menus are dependent on the sitemap, and provide navigation to sibling, child, and parent pages of the current page.
For use in long pages or blog posts with many sections.
Scrollspy can be used to track position in the document. To use scrollspy, create a unique id on the menu. Then on the main content, use the following attributes:
To generate the section menu automatically, add a nav with an id="toc" and on your main content, set id="toc_contents". This will add anchor links inside all headers and generate a multilevel section menu from those headers.
Sed maximus tellus lectus, vitae euismod libero ultrices ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ac ornare massa, quis tempor erat. Phasellus quis vulputate tellus, eget hendrerit purus. Nam consequat non dui sed sagittis. Vivamus fringilla vitae nisi non semper. Praesent laoreet facilisis facilisis. In rutrum at dui at porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Item 2
Suspendisse ut leo nec nisl tempor maximus. Nullam eu tellus molestie, vehicula urna in, sodales erat. Duis hendrerit ullamcorper viverra. Maecenas feugiat enim eu eleifend malesuada. Donec ut auctor lacus. Integer imperdiet rhoncus lectus, nec facilisis nisi. Suspendisse potenti. Duis eu pellentesque sapien. Maecenas dui elit, volutpat sit amet nunc sed, luctus rhoncus mi. Sed vitae nisl rutrum, porttitor tellus eget, condimentum elit. In facilisis dictum cursus. Sed eget purus at lectus scelerisque egestas. Duis enim justo, finibus consequat porta sollicitudin, convallis id massa. Mauris semper fringilla justo sit amet viverra. Sed fringilla eros enim. Donec tristique est justo, sed elementum diam ornare vitae.
Item 3
Praesent dapibus est et scelerisque aliquam. In in tristique nulla. Praesent eget enim vitae sapien viverra laoreet. Sed consequat orci nec diam semper volutpat. Duis id tempor libero. Integer quis consequat leo, sed volutpat neque. Integer id nunc sed quam mattis scelerisque a id massa. Fusce neque velit, eleifend a ipsum in, iaculis pharetra nunc. Vivamus sed arcu sapien. Nullam vel egestas urna, vulputate gravida magna. Donec ut nunc ut nisl accumsan aliquam. In ac sagittis augue, non rutrum neque. Donec at dolor ac urna tincidunt luctus.
Item 4
Donec ex diam, rhoncus vitae turpis eu, suscipit consequat mauris. In semper feugiat nunc, ut suscipit erat vehicula ac. Etiam eget augue vel massa scelerisque eleifend a ut tellus. Nunc lobortis lectus ut mi tincidunt, id consequat augue pharetra. Mauris pulvinar est sed tellus venenatis vestibulum. Ut sollicitudin maximus erat, nec efficitur orci convallis id. Sed ac dignissim orci. Mauris in leo purus. Donec pharetra eu leo eget dignissim.
CTA links
For calls to action where a button might be too strong. Can be used multiple times on a page. A single CTA per widget.
Inline links
For links in paragraphs or multiple links within a widget or area.
Cards point the user in one direction (one single link per card). They are most commonly used on notice banners and hub pages. Multiple cards of the same kind can be used within the same area. Use only one set of cards per page.
Small Card
Small cards are used where no description is necessary.
A quick-reference guide on using our visual hierarchy to guide attention.
Primary actions
Buttons are the primary CTAs or follow-throughs for the page or banner. A maximum of two options should be visible. "Submit" buttons on forms are exempt.
If the primary actions don't serve a user's need, where would the user want to go next? Cards are used as the key "flow" blocks that guide users through the site. Use one set of these per page.
Request a Program
Speak to an Advisor
Read/See more
CTA links are the next level of priority. Included when users may want to read more of the above kind of content. More Events, More News. This directs to a single action per widget. CTA links are broken out from other content the way that a button or card would be.
Our default link styles are used within mixed content and inline. For any list of links, use a navigation menu.
If you are hosting an event that you would like to see represented here you may submit an event
Low-Profile
If there are a ton of links near each other or lots of visual interest present (any time that a default link would be "too much"), use a low-profile link.
When a group of links need to be represented without added context in a small space. Often used in hub navigational pages, in sidebars when there are many related pages. These lists should include a maximum of 7 links. Any time more than 7 links need to be represented, they should be broken into groups.
What do I need to apply to the College of New Caledonia?
Last Updated: 1 Jan, 12:00 AM
What are my responsibilities as a potential CNC student?
Alerts
Default Alerts
These alerts have intense priority on the page. There should never be more than one of these alerts present at a time.
An example alert with an icon
An example alert with an icon
An example alert with an icon
An example alert with an icon
An example alert with an icon
Hollow Alerts
A de-emphasized alert still provides the user with a message, but allows multiple alerts to be used throughout the page if there are more items to call attention to. These are best used for form field validation.
An example alert with an icon
An example alert with an icon
An example alert with an icon
An example alert with an icon
An example alert with an icon
Sticky Alerts
Sometimes an alert needs to remain fixed on the screen. Sticky alerts accomplish this. They can be applied through javascript, attached to a cookie, or simply added in as dismissable html.
Backgrounds
When an image isn't quite appropriate but the background needs graphical interest one of the following pure CSS backgrounds can be used.
Topography
Wave
Circuit
Maze
Banners
Banners are used to draw attention to the most promoted actions on a page.
Hero Banners
Large Hero Banner
Large banners are designed for use with a transparent main menu.
A Banner Heading
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Large banners are designed for use with a transparent main menu.
A Banner Heading
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
These banners can be used across pages to add visual interest to the top while being very space efficient.
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Donec tempor erat in lectus bibendum cursus. Aenean at consequat velit. Fusce bibendum dolor in quam rhoncus, quis scelerisque orci pharetra. Cras id lacinia urna, vitae imperdiet turpis. Pellentesque elementum mollis urna sit amet semper.
Phasellus urna justo, malesuada sed nibh nec, suscipit laoreet nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce id lectus ut diam mollis maximus ut vitae arcu.
Taren Johnson
CNC Graduate
My experience at CNC was more than I could have hoped for. I made lifelong friends and memories. With small cohorts of students we were able to create connections with fellow classmates and get the most out of every class, which was integral to managing the program’s demanding workload.
Kayla Yewchuk
Medical Radiography Technology Program Graduate
There aren’t many jobs where you can be outdoors 90 percent of your time and see different places. I’ve gotten to experience some absolutely beautiful places in B.C. that most people wouldn’t even consider going to because they are that remote, or just areas that aren’t on the general horizon of the public. I work with a helicopter quite a bit, and that’s awesome. You can’t beat that.
Luke Friesen
Natural Resources and Forest Technology Graduate
Contact Blocks
Each informational page has contact information for the most relevant contact.
These blocks can change which list items appear on the page.
Expanded Filter List
These filters are often used in the sidebar of a page. Filters become a button with a slide-out menu on mobile.
Campuses
Audiences
Dropdown Filters
Use these in contexts where the filtered items are only a small portion of the page's content, or at the top of a page where the list needs to span the full width.
Campuses
Audiences
Highlight Group
Highlight blocks can be nested inside highlight groups to create a distinct section on the page.
Highlights
20 Dental Operatories
CNC's state of the art facilities will provide you with real life experience.
Calendar items are used for any dates that are relevant before they pass, and irrelevant to the majority of users after they have passed. There are multiple event calendars
Parts of a Calendar Item
Hover over a part of the event to view a description of the part and its formatting.
11
Jun
Convocation
Prince George
Jun 11
12:00 pm - 4:00 pm
Default Layout
All events, important dates, and recreation can be displayed using the default layout.
Events
Events are any occurrence that can be "attended" by a user at a particular time and in a particular place (including online locations).
Important Dates are any date that users need to be aware of that aren't necessarily events that can be attended. They include deadlines, opening dates, college closures, etc.
