CNC's Design System Guide
Colours
Principles
Purpose over embellishment
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
Secondary Colours
Grays
Teal/Mints
Functional Colours
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.
AA Indicates a colour combination that is AA WCAG Compliant.
Do not use White on White 0.0.0
Do not use White on Mint 1.66:1
Do not use White on Teal 2.04:1
Do not use Black on Dark Red 1.43:1
Do not use Black on Dark Teal 1.97:1
Do not use Red on Red 0.0.0
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
Do not use Dark Red on Dark Red 0.0.0
Do not use Dark Red on Dark Teal 1.37:1
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
Do not use Mint on White 1.66:1
Do not use Mint on Red 2.71:1
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
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
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
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
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.
Hero Banner Styles
Brief copy or text on home page and campus banners.
Inner page intro & banner boilerplate
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.
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.
<strong> tag.<strong> or bold should be used to draw attention to critical words or phrases.<em> tag.<em> or italics is used to emphasize particular words, phrases, or clauses.<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.<del> should only be used for text that has since been deleted or is no longer relevant.<s> or <ins> or underline should be used to indicate an addition or update to the information. Often comes after an element stricken with <s><small> should be used for de-emphasized text, disclaimers, or explanations.Links & Buttons
Buttons
There are primary and secondary button styles and a couple sizes available.
Sizes
Primary button
Recommended for primary calls to action. Usually related to student recruitment. Only include one action per page.
Secondary buttons
Recommended for lower priority actions. Can complement a primary call to action. Can be used more than once on a page.
Additional Links
For use in hubs and navigational pages or patterns.
Section Menus
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:
data-bs-spy="scroll" data-bs-target="#[unique-id]" data-bs-smooth-scroll="true"
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.
Item 1
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.
Automatic Icons
Some file extensions are styled with icons, such as PDF files, Word Documents, Excel Files, Phone Numbers, Email Addresses and External Links.
Low profile links
For use in tables or areas where there are multiple links and/or an inline link style would be too visually heavy.
keifl1@cnc.bc.caCards
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.
This is some text within a card body
link nameFull size card
Most cards include both a title and a description of what users will find after clicking on it.
Card Title
Some quick example text to build on the card title and make up the card's content.
link nameCard with image
Cards often communicate ideas better when accompanied by an image.
Card Title
Some quick example text to build on the card title and make up the card's content.
link name
Card Title
Some quick example text to build on the card title and make up the card's content.
link nameMinimal Card
These are typically used where there will be many cards shown at once, such as in carousels or grids. They are less visually overwhelming.
Card Title
Some quick example text to build on the card title and make up the card's content.
link name
Card Title
Some quick example text to build on the card title and make up the card's content.
link nameWhich kind of link do I use?
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.
Follow-up actions
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.
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.
In-context
Our default link styles are used within mixed content and inline. For any list of links, use a navigation menu.
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.
Section Menu
This menu communicates that the links will jump to other portions of the page.
Additional Links
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.
Components
Accordions
Last Updated: October 27, 2025 12:09 PM PST
Our refund policy concerning the tuition deposit is as follows:
- Application fees are NOT refundable
- International applicants are eligible for a refund ONLY if they are denied a Student VISA. Proper documentation MUST be provided with refund request
- Monies received by CNC College are NOT transferrable to any other institution of higher learning
- Students who arrive in Canada with a VISA secured through CNC, but who “Fail To Appear” for classes at our College, WILL BE reported to Immigration Canada as “Missing”
Applicants whose request for a Student Visa is declined will receive a full refund on tuition deposits paid, less a $300 administration fee. Contact the International Education office at CNC for a refund request form if your Visa application has been denied.
Last Updated: October 27, 2025 1:33 PM PST
Steps to becoming an international student at the College of New Caledonia
- Apply – include with your application the $125 application fee, High School transcripts, Post-Secondary transcripts, proof of English Language Proficiency where required (ie IELTS, TOEFL), and copy of the information page from your passport.
- Upon receipt of the above-noted documents, your transcripts will be assessed and your data will be entered into our student files and a student number generated. If you meet the entrance requirements for the program you have applied for a letter of offer will be forwarded by email within approximately four to six weeks.
- Once the letter of offer is received you will need to provide a tuition deposit to the College of New Caledonia of $10,000 representing one year of tuition based on 6 courses over two semesters. This money will be held in your name to cover your first year of tuition fees.
- After receipt of the tuition deposit you will be provided with a letter of acceptance, receipt and official acceptance details. These documents will be emailed to you. The official Letter of Acceptance is the document you take to the Canadian Consulate office in your country. Applying for your study permit must be completed outside of Canada. This process often takes several months, so please apply for your study permit as soon as you receive your LOA.
- Once you receive your visa confirmation it is important that you advise the Admissions Office of your status. Please note, there are a limited number of seats/courses available in each intake for each program. Seats/courses will be allocated based on seat availability and receipt of a scanned copy of your visa or letter of confirmation from CIC. Kindly advise the Admissions Office at intladmit@cnc.bc.ca immediately upon receipt of your visa so that we can confirm your seat and open online registration. If you do not inform us of your visa status prior to arrival, courses and programs may be at capacity and unavailable for registration. Failure to inform us of your visa prior to arrival, may result in a deferral to a future semester.
- You will need to arrange your travel to Prince George. Plan to arrive one week before the orientation session so that you can rest, and settle into your new home and community. Orientation takes place in the week prior to start of classes. Please do not come too early, or after classes start.
- Send your travel details to the International Education Centre. Email your itinerary tointl_edu@cnc.bc.ca or phone 250-561-5857 at least two weeks before you will arrive.
- Once you arrive at the Canadian border (Toronto or Vancouver) report that you are a student to a Canada Customs or Immigration Official to receive your study permit.
Last Updated: October 27, 2025 12:08 PM PST
To apply for admission, you must meet the following requirements:
Certificate, Diploma, Associate Degree, University Transfer or Post-Diploma programs:
- Be 18 years of age
- Provide a scanned copy of your passport data pages.
- Provide scanned originals of your secondary school graduation transcripts or mark sheets and any college or university transcripts for post-diploma programs. All documents must be accompanied by a notarized, official translation into English where applicable.
- Provide proof of English Language Proficiency either a minimum TOEFL score of 80 (IBT), an IELTS score of 6.0 with no band less than 5.5 or equivalent as determined by the College of New Caledonia or have completed CNC’s English for Academic Purposes.
English Language Training:
- Be 17 years of age
- Provide a scanned copy of your passport data pages.
- Provide scanned original copies of your secondary school and post-secondary or degree program transcripts or mark sheets and completion certificate
Admission requirements for the College of New Caledonia depend upon your home country and your current level of education. Some programs may require additional documents such as a portfolio, writing samples, questionnaires, etc. View the program pages for detailed information on admission requirements and additional requirements where applicable.
Last Updated: October 27, 2025 12:07 PM PST
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.
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.
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.
Small Hero Banner
Large banners are designed for use with a transparent main menu.
Page Header (Default) Banners
These banners can be used across pages to add visual interest to the top while being very space efficient.
Minimal Banners
Image Background Banners
These banners can be used across pages to add visual interest to the top while being very space efficient.
Solid Background Banners
These banners can be used across pages to add visual interest to the top while being very space efficient.
Carousels
Providing a way to present browsing options laterally, similar to a netflix style of navigating within categories.
While most styles in the rest of the site are built on Bootstrap 5, Slick Slider is used for all carousels and galleries.
One Up
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.
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.
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.
Contact Blocks
Each informational page has contact information for the most relevant contact.
Contact information should include:
- A phone number [required]
- An email [required]
- Hours of operation
- A physical location
Contact Us
Aboriginal Resource Centre
+1 250-562-2131arc@cnc.bc.ca
Hours: Monday to Friday - 8am-4pm
Room 1-773
Filters
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.
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.
$67,000
Average Salary
According to the Work BC website.
Transfer
Transferability Available
Discover your transfer options at BC Transfer Guide.
Highlights, Stats, and Emphasis
When stats and facts need to be emphasized.
Highlight
Uses highlighted text for emphasis, a heading and description text for clarity.
136
Community Members Surveyed
In an online survey run in September 2020.
Students surveyed
Students surveyed
Content Lists
Program Lists
Default Layout
News items are primarily shown as thumbnail-accompanied grid items.
Program Highlights List
Horizontal Layout
These items can be shown in sidebars or other areas where space is limited but it is important to keep the thumbnail displayed.
Minimal Layout
Add the .minimal class.
Best used in areas where space is very limited.
News Lists
Default Layout
News items are primarily shown as thumbnail-accompanied grid items.
Horizontal Layout
These items can be shown in sidebars or other areas where space is limited but it is important to keep the thumbnail displayed.
Minimal Layout
Add the .minimal class.
Best used in areas where space is very limited.
Calendar Items
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.
Convocation
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).
Fall Orientation 2026
CNC at PG Pride Parade
Pride Pop-up & Color Fest: 'Safe with me at CNC'
Important Dates
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.
Applications Open: January Campus Housing January
Applications Open: January Campus Housing January
Final Exams for Intersession 2025 Courses
Last day to withdraw without academic penalty
Recreation Schedule
Recreation events include all group fitness classes and recreation events. Intramural tournaments and open gymnasium time are included.
Bhangra Lessons
Mixed Application
All types of calendar items can be included in the same list and can still be distinguished by colour.
Bhangra Lessons
Final Exams for Intersession 2025 Courses
Fall Orientation 2026
CNC at PG Pride Parade
Thumbnail Layout
A more visual style can be used for featured events and dates.
Fall Orientation 2026
CNC at PG Pride Parade
Pride Pop-up & Color Fest: 'Safe with me at CNC'
Testimonial Lists
Default Layout
All events, important dates, and recreation can be displayed using the default layout.
Fall Orientation 2026
CNC at PG Pride Parade
Pride Pop-up & Color Fest: 'Safe with me at CNC'
Thumbnail Layout
A more visual style can be used for featured events and dates.
Fall Orientation 2026
CNC at PG Pride Parade
Pride Pop-up & Color Fest: 'Safe with me at CNC'
Profile Lists
Default Layout
All events, important dates, and recreation can be displayed using the default layout.
Melanie Law
Thumbnail Layout
A more visual style can be used for featured events and dates.