Concordia Design System

Concordia Design SystemShared standards for Concordia experiences

The Concordia Design System provides shared foundations and guidance for creating consistent, accessible and recognizable Concordia experiences.

About the Concordia Design System

Get started

Design

Explore design guidelines and access Figma libraries.

Development

Set up your environments and learn how to use components and compose code.

Content

Learn about UI content standards, voice and tone principles and design assets.

Discover what powers our designs

Brand standards

Brand Standards help create a consistent and recognizable Concordia experience across digital and print communications.

Design tokens

Design tokens that encode web design decisions for colour, type, spacing and more.

Colour

How to use Concordia colours for UI, hierarchy and accessible contrast.

Typography

Type styles and hierarchy for headings and body content.
Explore web UI foundations

Build with the Concordia Design System

Components

Reusable building blocks that meet specific interaction needs.

Accessibility

Standards and practical guidance to build inclusive, usable experiences.

Help shape the Concordia Design System

The Concordia Design System is built with and for the teams who use it. If you've spotted a gap, have a component proposal, or want to flag an accessibility issue — we want to hear from you.

Contact the team