Foundations and tokens

Making UCalgary experience’s look and feel like ucalgary.ca.

Masonry gallery thumbnail

Foundations are the structural and visual elements of a design system. They serve as blueprints that inform how components, patterns and other elements of the design system are built and utilized. 

Our UCDS foundations are at the heart of our system, they bring together user’s end-to-end experiences. This means they have been developed in line with our core design values, commitment to community, a solutions-oriented mindset and a focus on inclusivity. Meaning each foundation is centered around UCalgary’s institutional brand standards, WCAG accessibility standards (AA) and UX best practices.

Need access?

Looking for access to our foundation specs and tokens? Connect with us for a walkthrough and onboarding session. Let's get you set up!

The UCDS foundations include:

Colour

Colour is a powerful design element used to aid in storytelling, create visual interest and to highlight important elements. The UCDS colour palette has been developed in accordance with WCAG accessibility standards (AA) for colour contrast and is based on the UCalgary brand colours.

Typography

Good typography enhances the overall design, reinforces messages and storytelling, and establishes visual hierarchy to help guide readers through information. Our UCDS typography has been developed based on our organizational needs, and includes access to global licensing for our branded web fonts.

Space

Space, or negative space, is the area around and between design elements. Space helps to create a balanced and organized layout, allowing for breathing room between elements to prevent visual clutter and aid in overall visual accessibility.

Shape & Size

Shapes help to establish a visual hierarchy, guide users' attention, and contribute to the overall aesthetic. UCDS includes guidelines and parameters for spatial elements such as, border radius and width. Our shape and size choices help to convey our friendly and approachable brand.

Icons

Icons are simplified graphical representations of objects, actions, or concepts, used to communicate information efficiently and often serve as visual shortcuts. UCDS includes a library of system icons designed to provide consistency in system icon usage across key UCalgary digital experiences.

Grid

Grid is the framework that defines how content is organized to ensure it is structured in a consistent and effective manner. The UCDS grid system is based on the typical 12 column grid used for digital products. 

Tokens

Design tokens are a set of variables used in design systems to maintain consistency and scalability across digital products. They represent the foundational design decisions such as colors, typography, spacing, and other elements in a format that can be easily shared and reused.

UCalgary colour tokens

Consistency

By abstracting these design properties into tokens, teams can ensure that their designs are cohesive and adaptable to different platforms and devices. 

Convenience

Design tokens are typically stored in a centralized repository and can be referenced in code, making it easier to implement and update design changes.

Seamless workflow

They help bridge the gap between design and development, enabling a more efficient and collaborative workflow.