Pedal Design System
The Trek Bicycle design system is named “Pedal”. A rough, unfinished versions only existed in the dev storybook when I joined Trek. With the help of some amazing front end developers and eventual other designers added on, I have been working hard to transform the Trek Design System. There are constant changed and improvements that need to be made. Along with the typical component making and documentation, here are a few additions to highlight that i’ve added to our design system.
Introducing the Radix Color System to Trek.
Current problems with Treks Color System
The Pedal 1.0 palette (Treks current color palette) is insufficient in terms of number of base colors.
The Pedal 1.0 palette (Treks current color palette) is insufficient in terms of number of number of color tones and may be greatly improved in terms of overall functionality.
New Radix Color System will:
Add more efficient and consistent component design
Help with accessibility
Help with theming per brand, light/dark more, etc.
Adding color variables in Figma
An additional step outside of just adding this color palette to our design system and the Trek Digital System, was to create a library of color variables for future design work. These variables will allow mass color changes across projects making Figma designing much more efficient.
