Logos

The logo must not be altered in any way and should always be used in the formats shown in this guide. Attention must be given to ensure that the logo is always readable, and that other images or design elements do not visually interfere with the logo.

Logo configurations

Individual logo files available in /assets/img/.

Full logo: Use for external-facing websites and apps where the full institutional signature is required.

Main logo: Use as the default logo for internal web applications and authenticated tools.

Main logo (black): The full-colour logo is preferred. Use this one-colour black version only when the background colour makes the full-colour version less readable.

Compact logo: Use in tight spaces, on mobile, and when displayed alongside external partner logos. This is also used in the responsive logo configuration described below.

Full logo (white): Use on dark backgrounds.

Main logo (white): Use on dark backgrounds.

Compact logo (white): Use on dark backgrounds.

Responsive logo

Resize your browser window to see this logo change automatically from Full to Main to Compact.

Desktop (768px and up): Full logo
Tablet (576px-767px): Main logo
Mobile (under 576px): Compact logo

Layout & container

Content is centred in a .container with a max-width of 940px to ensure optimal reading length. A min-width: 350px on the body prevents layout breaking on very small screens.

Colours

This palette uses Concordia's official web colours. Primary colours meet AAA or AA contrast when used with white text; secondary and light tints use black text. The colour classes accommodate hover effects on buttons. Use these utilities on buttons, pills, sections, or any element.

Background colour classes

.bg-burgundy

.bg-blue

.bg-dark-blue

.bg-green

.bg-orange

.bg-magenta

.bg-turquoise

.bg-mauve

.bg-black

.bg-dark-grey

.bg-darker-grey

.bg-yellow

.bg-cyan

.bg-grey

.bg-burgundy-tint

Typography

Font families

Body text: Use Inter on any site. Inter is a clean sans-serif optimized for screen readability and is freely available via Google Fonts.

Headings: Official Concordia applications that reside on the Concordia domain should use Gill Sans Nova. This is Concordia's brand typeface, delivered via Adobe Fonts. For information on using this typeface, email fonts@concordia.ca.

Note: Gill Sans Nova cannot be used on non-Concordia.ca domains; for headings on a non-Concordia domain, use Inter.

In assets/css/concordia-base.css, the tokens --cds-font-family-brand and --cds-font-family-brand-condensed control heading fonts. Comment them out and uncomment the Inter values when building for a non-Concordia domain.

Text sizes

Lead text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Large text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Muted text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headings

Headings establish the structure of a document. They support navigation for screen reader users and improve readability for everyone.

Do not use headings for visual styling. Use CSS classes instead for large or bold text that is not a section label.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

Unordered lists use square markers by default. Ordered lists use standard numbering. Both inherit the body font family and size.

Unordered list

First item in the list
Second item in the list
Third item in the list

Ordered list

Step one
Step two
Step three

Unstyled list

First item in the list
Second item in the list
Third item in the list

Links

Here is a standard link. Press Tab to see the focus ring.

A visible :focus-visible outline ensures keyboard users can always see which link is active.

Buttons

Buttons have clear :hover and :focus states. The focus ring shows which element has keyboard focus.

Default button

Uses the .btn class.

Small button

Uses the .btn and .btn-small classes.

Ghost button (burgundy)

Uses the .btn, .btn-ghost, and .btn-ghost-burgundy classes.

Ghost button (dark)

Uses the .btn, .btn-ghost, and .btn-ghost-dark classes.

Buttons with colour variants

Uses the .btn class with any .bg-* colour utility. All variants include hover states.

Tables

Default table

No additional classes used.

Table caption
Course	Title	Credits
ENGL 212	Introduction to English Literature	3
HIST 205	Canadian History	3
MATH 203	Differential and Integral Calculus	3

Responsive table

Wrap the table in a <div class="table-responsive">. On narrow viewports, the table becomes horizontally scrollable.

Fall 2026 course schedule
Course	Title	Credits	Prerequisites	Schedule
ENGL 212	Introduction to English Literature	3	ENGL 211 or equivalent	Mon/Wed 14:45–16:05
HIST 205	Canadian History	3	None	Tue/Thu 10:15–11:35
MATH 203	Differential and Integral Calculus	3	MATH 201, MATH 204	Mon/Wed/Fri 09:00–09:50

Table with horizontal and vertical lines

Uses the .horizontal-lines and .vertical-lines classes.

Table caption
Department	Program	Degree
Computer Science	Software Engineering	BEng
Psychology	Clinical Psychology	PhD
Business	Marketing	MBA

Striped table

Uses the .table-striped class.

Table caption
Department	Program	Degree
Computer Science	Software Engineering	BEng
Psychology	Clinical Psychology	PhD
Business	Marketing	MBA

Table with small text

Uses the .text-small class.

Table caption
Department	Program	Degree
Computer Science	Software Engineering	BEng
Psychology	Clinical Psychology	PhD
Business	Marketing	MBA

Pills

Pills are compact labels or tags used for categories, filters, and status indicators.

Default pill

Uses the .pill class. Default colour is burgundy.

Default pill

Large pill

Uses the .pill and .pill-large classes.

Large pill

Pills with colour variants

Uses the .pill class with any .bg-* colour utility.

Burgundy Blue Dark blue Green Orange Magenta

Turquoise Mauve Yellow Cyan Black

Grey Dark grey Darker grey Burgundy tint Muted

Transparent

Pills as checkboxes

Use .pill-input on a <label> that wraps a hidden <input type="checkbox"> and a <span> for the label text. Add a .bg-* colour class (e.g. .bg-blue). Default is burgundy. Good for filter controls and multi-select.

Undergraduate Graduate Certificate Research

Single-select example using radio buttons (same markup, use type="radio" and shared name):

Full-time Part-time

Pills as list

Use .pills-list on a <ul> or <ol> for a flexible row of pills that wraps on narrow screens. A list is semantically correct for a group of related items, which helps screen readers announce the number of items and navigate between them. Wrap each pill in an <li>.

Undergraduate
Graduate
Certificate
Research
Optional