About
The Concordia Design System is the university's shared reference for how we look, sound, and behave on the web and print. It brings together reusable interface building blocks, content guidance, and brand-aligned standards so experiences feel like one institution.
Why we need a design system
Concordia's digital footprint is large. Many sites, many contributors, and steady growth mean that ad hoc decisions add up: duplicated effort, uneven patterns, and harder paths to accessible, readable experiences. The Concordia Design System exists to:
- Offer a single source of truth for web UI, layout, and related content standards.
- Reuse tested components and documented patterns instead of rebuilding from scratch.
- Protect accessibility and usability as we scale (keyboard use, screen readers, contrast, clear language).
- Align design, development, and publishing so what we design is what we ship.
What the design system is
The Concordia Design System is a living library, not a static PDF. It connects documented guidance to real implementation: foundations (such as colour, typography, and spacing), components, patterns, and content standards. The goal is one coherent system that teams can adopt and that can evolve as requirements change.
Who it is for
The Concordia Design System is for everyone who shapes Concordia's public digital experience:
- Developers: Shared structure, conventions, and composition so interfaces stay consistent and maintainable in code.
- Designers: A common visual and interaction language that matches what is implemented and documented.
- Content authors: Clear guidance on components, structure, and voice so pages stay readable, inclusive, and on brand.
- Studio and communications teams: A stable reference when digital work must align with broader campaigns and brand expression.
- Partners and vendors: An explicit baseline for Concordia-aligned work without guessing at one-off exceptions.
You do not need to work in every layer of the system. Use the parts that match your role, and rely on this site to stay aligned with everyone else.
How it works
- Standards are published here so anyone can learn how components and content should behave.
- Implementation follows those standards so the live experience matches documented behaviour.
- Updates are managed so the system can improve over time while we protect accessibility, consistency, and clarity.
Designing the Concordia Design System to work with AI
AI tools are already part of how people design, build, and publish. The Concordia Design System is being designed so AI systems can generate UI that stays consistent with Concordia's brand and patterns, instead of producing pages that are only technically correct.
That means Concordia Design System guidance is written and structured so it can be used by both humans and machines:
- Design tokens with intent: tokens are organized from primitive to semantic to component, with enough meaning that tools can choose the right colour, spacing, and emphasis for a given context.
- Component usage guidance: documentation covers when to use a component, when not to use it, how content should be shaped, and what accessibility expectations apply.
- Page composition patterns: the Concordia Design System documents canonical page types and section sequences, so generated layouts follow an intentional rhythm and hierarchy.
- Clear conventions in code and content: consistent naming, predictable configuration options, and stable patterns reduce guesswork for both developers and AI.
If you are building custom tools or apps outside AEM, the Concordia Design System still applies. For that broader work, its companion is the Agentic Coding Toolkit, which sets the quality bar for Concordia software and shows how to use AI tools responsibly and effectively.
Our principles
We work from accessibility, usability, design consistency, and simplicity. Brand expression matters, but it does not come before access or clarity. The needs of students, staff, faculty, and visitors come first.