City of Toronto Web Design System

The City of Toronto Web Design System (CWDS) is a framework that outlines the design and development direction for City of Toronto in-house and third-party developed applications. Its purpose is to promote usability, readability, user engagement and successful experiences for all users.

The City of Toronto Web Design System addresses three key areas: Style, Design Patterns, Components.

Style (Design Consistency)

A style guide is the visual language of the design system and includes branding, colour and typography.

Design Patterns

Design patterns are best practice design solutions for specific user-focused tasks and page types. Patterns often use one or more components.

Components (Interactive Elements)

Components are reusable parts of the user interface, such as buttons, input fields, and tables. Components may be combined to create design patterns.

References