Design principles

It means to be Efficient.

We believe that simplicity and clarity should underpin every aspect of our design. Our layouts are clean and structured in a way that makes navigation effortless for all users. Every product is designed with a clear, predictable flow so that users always know where they are and where they need to go next.

Tips:

• Keep the content and visual design of UI focused on the essentials.
• Prioritize the content and features to support primary goals.
• Remember about the power of white space in design.

It means to be Efficient, Inclusive and Entrepreneurial.

We use two complementary fonts to create a visual language that balances inspiring self-expression and clarity. In most cases, we use Proxima Nova, a clean and modern font that ensures clarity, readability, and inclusivity. Proxima Nova is designed with accessibility in mind, making it easy for all users to engage with content. It is efficient in delivering information while being mindful of diverse audiences.

For CTA blocks or strong messages, we use Museo Slab, connected to the START SOMETHING campaign—designed to motivate and encourage action, pushing users to take the next step and try something new.

Tips:

• Use Proxima Nova for standard content to ensure clarity and consistency.
• Use Museo Slab campaign font only for Headers or important messages to add visual contrast and encourage action.
• Limit the number of type sizes for a clear hierarchy and easy scanning of content.
• Lear more about legibility, readability, and comprehension.

It means to be Inclusive and Entrepreneurial.

We use bright, energizing colors like red and gold to evoke positive change, inspire action, and communicate a solutions-forward mindset. While using energizing colors, we ensure the palette remains inclusive and accessible to all users. We use color thoughtfully, maintaining a balance that allows for emotional connection without overwhelming the user experience.

• Contrast: We adhere to WCAG (Web Content Accessibility Guidelines) standards to ensure that there is enough contrast between text and its background. This helps make text legible for users with visual impairments and ensures that important elements are visible to all.

Tips:

• Enhance your design using colours. Limit the color palette to maintain a clean, focused design.
• Use bright colors for calls to action and important content that needs to inspire action or grab attention.
• Apply gradients subtly to add depth and movement without overwhelming the design.
• Ensure contrast between text and background for legibility and accessibility.
• Be mindful of colorblind accessibility by combining color with other indicators (such as icons or text labels).

It means to be Entrepreneurial.

We use bold design elements like large CTA blocks to convey our core values of motivation, empowerment, and entrepreneurial spirit. These blocks serve as more than just functional elements—they are visual expressions of who we are as a university and a community. By placing emphasis on calls to action in this way, we encourage users to engage, explore, and take bold steps forward, whether in their academic journey, their career, or personal growth.

Tips:

• Use bold CTA blocks to make clear, motivational calls to action that inspire users to act and engage with content.
• Keep mindfulness at the core of your CTA design, ensuring it feels approachable and inspiring rather than overwhelming.

It means to be Inclusive and Entrepreneurial.

We believe that elements should feel approachable, dynamic, and empowering. We carefully choose design elements and interactions that make users feel welcome, supported, and encouraged to act. Through thoughtful use of shapes, animations, and dynamic transitions, we translate our values of inclusivity and motivation into every user interaction.

• Friendly shapes: We favor rounded corners in UI components like buttons, cards, and containers. Rounded edges communicate that we are humble, supportive, and approachable, while avoiding overly round shapes to maintain a clean, scan-friendly design.
• Playful details: We add small, playful design elements to bring personality and joy to the interface. For example, on our 404-error page, we use a Rex illustration to lighten the experience, offering a bit of humor. These little moments remind users that the experience is meant to be engaging, not just functional.
• Dynamic interactions: We use hover animations and arrows on buttons and interactive elements to motivate action and guide users. These animations add momentum, encouraging users to move forward while reinforcing our entrepreneurial spirit.

Tips:

• Use rounded corners for a friendly, welcoming feel, as humans instinctively prefer curved shapes over sharp ones for safety and comfort, but keep them scan-friendly.
• Use dynamic animations and hover effects to encourage users to act and stay engaged.
• Add playful elements like Rex on 404 page to engage users to keep experience light and fun.

It means to be Inclusive.

We believe in representing the diverse voices and backgrounds that make up our community. Our design reflects this by prominently featuring real photos of people from across UCalgary, ensuring our digital presence is both inclusive and representative of the diversity within our university.

• Authentic representation: We showcase real individuals—students, faculty, and staff—capturing a broad spectrum of backgrounds, identities, and experiences. This makes our design feel personal, relatable, and grounded in the community we serve. It’s a visual commitment to representation and ensuring that all voices are seen and heard.

Tips:

• Use real photos of people from your community to foster authenticity and show inclusivity.
• Avoid generic stock images; they can feel disconnected and impersonal.
• Prioritize diverse representation to ensure all audiences feel seen, heard, and valued.
• Incorporate personal, relatable imagery to make your digital spaces feel grounded and welcoming.