ui design, branding
Tucows Design System
Designing a suite of websites without a consistent, scalable design system is impossible — and that's why, as the sole product designer, I advocated for and created a cohesive UI Kit that can be used throughout the Tucows digital ecosystem.
UI Design
Created a full range of UI elements with variants and instances to build a cohesive visual language across brands
Branding
Worked with brand designer to ensure that my vision aligned with the guidelines
Design Education
Educated stakeholders on the importance of design systems, trained other designers on how to use the UI kit in Figma
VARIANTS
Every element has style & size variants built in.
List elements have swappable icon instances & nested button components, as well as layout variations and style options. This versatile element of the UI Kit formed the basis for many of the designs I created for the multiple Tucows websites.
ICONS
Icon styles & sizes
The main teal colour from the brand guide is only accessible on dark backgrounds — this issue is solved by creating a decorative style inspired by the slash shape of the Tucows logo.
SECTION STYLES
A sampling of hero section style variants
With editable colour, images, and ability to turn elements on & off as needed, like overlines, buttons, and links.
BUILT IN SCREEN SIZES
Easily mockup tablet & phone layouts for stakeholder approval
I created 3 main screen sizes — laptop, tablet, and mobile — to make it quick and easy to built out responsive designs for the larger team to approve. Once everything is good to go, the developer and I work together to tweak any unique elements further page by page.
Navigation designs & documentation
Colour palettes — excepting the first turquoise palette, I selected each individual colour making sure it passed the latest accessibility requirements. Black swatches indicate body copy passing on dark colours & white swatches indicate passing on light colours.
Creating a consistent grid layout system — using instance swapping and column-based section layouts. In this way, every instance (the pink boxes) can be easily swapped to hold other base components like lists, images, icons, etc.

4 column layout shown here
UI Kit in use across the Domains, Registry, Hover, Enom & Ascio brands.
Design system components on the OpenSRS website.