Design System

Victoria University

At Victoria University, I led the creation of a scalable design system.

The initiative focused on supporting a responsive website. The system introduced scalable design tokens, reusable responsive components, and clearer governance practices to help teams design, prototype, and build faster and more efficiently.

The challenge

As the university’s website continued to grow, the team faced several challenges:

Inconsistent UI patterns
Gaps between Figma designs and front-end implementation
Limited accessibility considerations
Lack of responsive components and elements
Difficulty maintaining consistency across multiple teams and contributors

My Approach
The first step was understanding the current state of wesbite and review:

Existing UI inconsistencies
Repeated patterns and duplicated work
Responsive behaviour gaps
Accessibility considerations
Team workflows and handoff processes

Design Sytem Foundations

Scalable Token Architecture

I introduced a structured token framework using a three-tier model.

Brand (Primitives) → Alias (Semantic) → Components

This approach helps create a more scalable design system that can support multiple themed experiences.
At Victoria University, this was important for future-proofing campaign sites such as Open Day, which use different UI patterns and colour palettes.

1
Brand Collection

The Brand collection contains the raw design values, such as colours, spacing, and sizing. Not all of these values are necessarily used by other collections. For example, while the Brand collection may contain 10 shades of blue, only 4 of those shades are selected and mapped within the Alias collection based on the system's design requirements.

2
Alias Collection

The Alias collection defines the semantic meaning of tokens. For example, the colour value #5BC2E7 from the Brand collection is mapped to Primary – Default in the Alias collection, giving the token a clear purpose and making it easier to use consistently across the design system.

3
Component Collection

The Responsive collection maps semantic tokens to specific components, use cases, or contexts. For example, Primary – Default from the Alias collection is assigned to Surface / Background / Brand, defining how and where the token should be applied within the interface.

Naming Convention

The naming convention was designed to be scalable and adaptable, ensuring it can accommodate future rebranding efforts.

For colours, I use a numerical scale in increments of 100, with 500 representing the default value.

Grid System

I defined three responsive breakpoints: Large (Desktop) – 1440px, Medium (Tablet) – 960px, and Small (Mobile) – 540px. The grid system uses a 16px margin and 32px gutter, with all values linked to design tokens. This approach ensures consistency across layouts while providing the flexibility to scale, adjust, or redefine the grid system in the future with minimal effort.

Typography

The typography system was designed to be fully responsive across different screen sizes and devices, while also supporting both light and dark modes to ensure readability and accessibility.

Spacing

The Brand collection stores the raw spacing values, while the Alias and Responsive collections add meaning and purpose. This approach keeps spacing consistent and connected across the system, enabling responsive behaviour across different screen sizes and devices.

1
Brand Collection

Brand Collection: The Scale group contains the raw design values, which serve as the foundation for spacing, sizing, and other tokens used throughout the Alias collection.

2
Alias Collection

Alias Collection: Raw values from the Brand collection are assigned to semantic groups such as Device, Spacing, and Border. At this layer, the values become meaningful and are named according to their purpose and usage. For example, a raw device value is mapped to Device / LG, representing a Large device breakpoint.

3
Responsive Collection

Responsive Collection: The Alias collection informs the Responsive collection, which maps tokens to specific component properties and behaviours across different breakpoints. This enables the creation of responsive, multi-device components that adapt consistently across desktop, tablet, and mobile experiences.

Light & Dark Modes

I created token variables to support both light and dark modes across buttons, surfaces, typography, and other UI elements. Designers can select the desired appearance in Figma, and components will automatically switch to the appropriate colour values, ensuring consistency across themes.

Complex Components

Some complex components were condensed while maintaining a logical structure, allowing designers and developers to use them efficiently and with ease.

Cards

With numerous card variations used throughout the website, I developed a single, configurable component capable of handling all use cases.

Navigation

Both the navigation and footer are flexible, scalable, and fully responsive, ensuring a consistent experience across all devices. While their layouts adapt across breakpoints, boolean properties are used to show, hide, and reconfigure elements as needed for each device, allowing a single component to support multiple responsive variations.

What’s Inside

20+
components

1,000+
variables

2
modes (light & dark)

My Role

Led the design system initiative, building upon existing UI.
Defined the design system strategy, structure, and governance approach.
Created and implemented scalable design tokens to support consistency and responsiveness.
Established clear naming conventions for tokens, variables, and components.

Developed a three-tier token architecture to support scalability and future growth.
Created component variants, properties, and variables to streamline design workflows.
Documented patterns, standards, and best practices to support adoption across teams.
Collaborated with stakeholders and developers to ensure the system met business and technical requirements.

●