Trunk Components

Design System

I created a a developer friendly design system for our form and page layouts, allowing developers to add new functionality without getting bogged down by styles and brand considerations. Working in Figma, I am currently working on updating the components to bring more flair from Elephant's new branding elements into the Design System itself, while maintaining accessibility considerations.

Here's a prototype that showcases some of the new components in the proposed layout:

View Figma Prototype

Component Architecture

This project has been a little backwards, because before doing the above redesign, we wanted to ensure a component architecture was achievable. Previously, we used Angular Material wrapped in custom components, but we found the upgrade path was not feasible, since we'd customized the material components.

So, using the existing wrapper components and the current customized material styling as a base, I created a custom Angular component library that was completely free of material, but kept the accessibility and interactivity. To allow these components to be easily shared across projects, I created a private npm repo on Github to host it as a package. During this process, I used Storybook to test individual components before including them in a new project.

It's alive!

For the first project to include the new components, we wanted something simple. So this new vender W9 upload form was the perfect place to work out the kinks. Everything here, except the text and W9 graphic, is from the components package: form elements, the validations, button states, general layout, etc.

A little more custom

After proving that the base components were feasible, we included them in the account login project. This is a much more branded experience with a customized layout, but using the components made this a cinch to put together.

View the login page live