OCAS · Design system for the domestic, international, and college-branded applications · 2015 to 2021

One system, three applications

One system across the domestic, international, and college-branded applications kept design and code consistent, cut review and rework cycles, and sped up design and build.

Context and stakes

OCAS runs the applications students use to apply to Ontario's colleges. Three applicant-facing products, the domestic application, the international application, and college-branded applications, had to look and behave as one system, and the development team needed something concrete to build from rather than screens to interpret.

My role

I built the design system. Most of it lived in documentation and usage guidance. I built components in Figma, and worked with a developer to produce coded components the development team could build from.

What I built or changed

The documentation was the core of the system. It covered when and how to use each component, accessibility requirements, form and content patterns, and how states, errors, and edge cases should behave. It also covered English and French: components were built to grow, so longer French text wraps rather than truncates.

English and French versions of a heading, button, navigation link and form label side by side, showing how much longer each French string is. — Components built to grow. French labels run up to 48% longer, so buttons wrap instead of truncating.

It also set semantic colour rules so meaning never depended on guesswork: red for alarm, yellow for warning, green for success, and blue for information.

Colour palette with blue, neutral, success, warning and error ramps from 50 to 900, each swatch labelled with its hex value and contrast ratio on white. — Five colour ramps on one lightness scale, with contrast on white at every step. Bold values pass WCAG AA for normal text.

Components lived in Figma, and I worked with a developer to turn them into coded components the development team used directly, so design and code started from the same parts.

Button states for default, hover, pressed, focus and disabled, plus link, input and dark-surface focus examples. — One focus indicator everywhere, never removed, with contrast tested on light and dark surfaces.

Outcomes and open threads

Design and code stayed consistent across all three applications. Review and rework cycles dropped, because the decisions were already written down, and design and build both got faster.