University of Toronto
Design System

HOW DO WE BUILD A SCALABLE, ACCESSIBLE, AND UNIFIED DESIGN SYSTEM?

TEAM

Cross-functional team (UX, Development, Product Management)
University of Toronto EASI

ROLE

Research
System Architecture
Component Design
Accessibility (WCAG) Compliance
Documentation & Developer Collaboration

The U of T EASI Design System was developed to unify and modernize our previous fragmented design approaches. Historically, separate design systems existed for student-facing and staff-facing platforms. Our goal was to create a single, scalable design system built from the ground up. Working closely with developers, product managers, and internal stakeholders, we built a comprehensive design foundation — including an updated colour system, typography, iconography, and an extensive component library. Every element was carefully reviewed to meet WCAG accessibility standards across desktop and mobile use cases. In addition to component design, we collaborated with development teams to structure how the system would be accessed, hosted, versioned, and maintained across multiple platforms. We also developed clear, role-specific documentation for both designers and developers.

VIEW CASE STUDY
System Design
Adoption & Collaboration

How it works

The design system was built not just as a set of components, but as a fully documented resource for both designers and developers to ensure consistency, accessibility, and scalability across the University of Toronto's digital platforms.Dual Documentation ModelTo meet the needs of both design and development teams, we structured our documentation in two parallel tracks:

‍Designer-Facing Documentation (Figma):
Every component includes detailed guidance directly in Figma, covering usage guidelines, accessibility considerations, spacing, styling, responsive behavior, and variant states. Designers can explore how and when to use each component, supported by examples, best practices, and content guidelines.

‍Developer-Facing Documentation (Component Library Site):
Developers access the components via our online component library site, which includes technical specifications, code implementation details, version control information, and integration guidance. This ensures that components are implemented consistently while allowing developers to reference up-to-date code-level documentation.

SYSTEM DESIGN

Colours and Typography

Semantic Colour Mapping:
We developed a scalable token-based colour system, starting with primitive tokens that define the raw colour values across core palettes like Grey, Blue and Green. These base tokens serve as the foundation for all colours used in the design system.

Each component — including its various states and roles — maps to specific colours through semantic tokens. Using Figma variables, we layered these mappings to create a system where components pull directly from their assigned semantic tokens, ensuring consistency across different UI states (such as default, hover, focus, and disabled). This structure allows both designers and developers to stay fully aligned while maintaining flexibility, accessibility, and long-term scalability.

Image of base colours used in design system
Image of component colours used in design system

Typography
We selected Noto Sans as the system typeface for its strong browser compatibility, broad language support, and accessible design. Its clean, open letterforms help reduce character confusion between commonly misread characters (such as l, I, 1, 0, and O), improving readability for users with visual or cognitive impairments.

We implemented a font stack to ensure smooth fallback options in case Noto Sans is unavailable, providing consistent rendering across different browsers and devices. Line heights and font weights were also carefully reviewed to meet WCAG accessibility standards, providing clear legibility across both body text and interface elements.

Image of typography panel used in design system

Components

To ensure consistency across all components, we established a standardized documentation template that could be applied to every component in the system.

Each component page includes:
‍Usage Guidelines: Clear explanations of when to use or avoid the component, along with content-specific guidelines.
‍Functionality: Descriptions of component behaviors and logic.
‍Accessibility: Key accessibility notes for each component to ensure WCAG compliance.
‍Spacing and Styling: Platform-specific sizing, padding, and layout details for both desktop and mobile.
‍Figma Instructions: Notes on how to apply variants, tokens, and variables within Figma.
‍Design & Implementation Instructions: Details on structure, variants, and any nested elements.
‍Examples: Sample images of both desktop and mobile implementations.
‍Changelog: Version history to track ongoing changes.

Image of component template

You may view an example of our Figma documentation below for our button component. For more examples, feel free to take a look at the case study.

View button component documentation

ADOPTION & COLLABORATION

The design system was created through sustained collaboration within the EASI team, involving developers, designers, and product managers from the beginning. Our goal was to align both the design and implementation sides of the system from the ground up. Each component followed a structured internal workflow:

As the system matured and we had enough material to show—such as documentation for multiple components and a more fleshed out developer site—we extended our collaboration beyond the core EASI team. I conducted stakeholder research with developers, business analysts, and designers from other departments at the university to gather insights on:
1. How clear and usable the documentation was for their roles, 2. What they needed to successfully adopt the system in their own projects, 3. Suggestions for improving the dev site, structure, or workflows.
Their feedback helped shape the final presentation and onboarding experience for teams outside of EASI. To ensure long-term adoption and sustainability, we also worked on the development of a version-controlled system to support ongoing updates and refinements, and created a scalable model that allows new components and improvements to be integrated over time.

VIEW CASE STUDY
mikella.seth@mail.utoronto.ca
RESUME