ABOUT THE PROJECT
Each product team designed on its own. Buttons, colors and type drifted from one product to the next, and every new screen started close to zero.
I co-led Canopy, the shared design system that gives the whole TELUS Agriculture & Consumer Goods product family one design language: one documented source that designers design from and developers build from.
My Role
Senior Product Designer, co-lead
Tools
Figma variables, styles, components
Team
2 Other Senior Product Designers
Logged Updates
Nov. 2023 to Apr 2025
The problem
Steele Auto Group isn't a single dealership — it's an ecosystem. 60+ locations spanning Nova Scotia to Texas, operating under multiple sub-brands: Steele Leasing, Steele On-Demand, Steele Certified Pre-Owned, Steele Wheels, and East Coast International Trucks.
The old site was built for a smaller company. It couldn't handle the scale, the variety of user intents, or the brand complexity that had grown up around it. Someone buying a truck, booking a service appointment, and applying for financing all ended up in the same confused digital space.
The goal: a single, scalable system that makes all of that feel unified, premium, and effortless — no matter which dealership you walk into first.
Products Looked Different
Each product had its own look, so moving between them felt like switching companies.
Slow, Repeated Design Work
No shared components or styles. Designers redrew the same parts on every project.
Design and Build Drifted Apart
What shipped rarely matched what was designed.
Uneven Accessibility
Contrast and standards varied from product to product.
Who it serves
01
Designers
Design new screens from shared parts instead of starting over.
02
Developers
Build from one documented source, so the build matches the design.
03
People Using the Products
Get the same patterns and the same accessibility in every product.
The approach
A system only scales if every part has something solid underneath it. So we built from the bottom up.
04
Upkeep
Change log and team workshops
03
Documentation
Notes on every page, real example pages
02
Components
Built only from foundations
01
Foundations
Color, type, spacing, icons
Foundations
40
Variables for color, spacing, size and radius
24
Text styles, from 40px headers to 10px micro
8px
Square base unit for every grid, margin and padding
1
Type family across every product
Color values
Intentional
Every color signals purpose. Never use one against its meaning.
Accessible
As much contrast as possible, meeting WCAG 2.1.
High Dynamic Range
Light, neutral backgrounds. Bold color for elements.
Type scale
H1
40 bold
H3
28 bold
Subtitle 1
22 medium
Body regular
17 regular
Caption 2
12 medium
Display, text and micro cuts. Shown here in a stand-in face.
Icons
Material Icons, Plus an Extension Pack
Material covers the everyday. Agriculture is a niche, so we added the TACG Icon Extension Pack.
Components
20 component pages in three groups, every one built only from the foundations.
Structural
8
Viewports, modal, navigation, drawer, uploader, pagination, tables, maps
Inputs
6
Loading, buttons, selectors, inputs, search, date picker
Informative
6
Label and badge, toast and tooltips, activity timeline, steps, system emails, error pages
Button
7 types · 3 sizes · 294 variants
The current button came out of a team workshop and replaced the old default in April 2025.
Input
8 types · 46px tall
Text, single select, multi-select, date, date and time, combo, text box, date range. Required fields carry a red asterisk before the title.
Labels and Toasts
Informative
Steps
Informative
Redrawn to Canopy's specifications.
Keeping it current
26
Dated, described updates between November 2023 and April 2025
From the change log
Nov 2023
Change log begins
Feb 2024
System email templates
May 2024
All type moved to Helvetica Now for TELUS. Inputs rebuilt as 8 components.
Jul 2024
Inputs raised to 46px for mobile. Standard viewport sizes.
Aug 2024
Mobile headers and full-width mobile buttons
Jan 2025
Charting color palette
2025
Designer Tools: shared parts for organizing design files
Apr 2025
New button from a team workshop replaces the old default
Business impact
50%
Designing a new screen takes about half the time it used to.
For design and engineering
Faster design and build from one shared set of parts
One documented source, so builds match the designs
For the product family
Adopted across [NUMBER] products
More consistent: the same patterns in every product
More accessible: contrast built into the foundations, not checked after
Next Case Study
© 2025 JP Artacho. All rights reserved.