October, 2022

A lot of amazing work and new changes to the Thumbprint Design System have happened from both a design and engineering perspective since our last update.

Let’s take some to celebrate those wins, talk about what’s new, coming up, what’s leaving, and more in this version of the TT Thumbprint Newsletter.

It’s always exciting to get a new pair of shoes. While we won’t don these changes on our feet, these improvements to the product are even more exciting than those new sneakers!

Need to know how to get started as a designer, need a refresher on best practices, or are you a cross-functional team member interested in how the design practice works at TT? The first version of the Product Design Overview resource on TT is now live.

We know Thumbprint is a great product, but there is always room for improvement, just like any home renovation project. Here are some updates and changes to the product that we’re excited to celebrate!

To kick off the component usage updates, the Alert Banner was the first component to receive attention. This work provided more context on the component’s intended use and best practices around applying customer icons.

The Alert Banner is offered in three theme options Info, Warning, and Caution. When passing in this required parameter, it was previously impossible to customize the icon paired with the theme of choice. By passing in the icon prop, you can customize the appearance with any icon offered by Thumbprint. This approach provides a bit more flexibility around the timely & targeted messaging delivered by the Alert Banner component.

Component props have now gotten a bit easier. Each prop has been wrapped in a bordered container, and a border also separates each property attribute. This new approach intends to provide more organized property details at a glance. Lastly, the font colors and sizes have been balanced out slightly to give more weight to the prop name and less emphasis on the Type.

This change expands the current Atomic classes to include the 500 and 600 color values. Introducing these new classes allows for a broader range of color combinations without needing to add any additional custom CSS. View the Atomic Colors guide to see the representation of these newly added classes.

In some cases, we need to be a bit more descriptive about how users engage with the product that, goes beyond the visual experience. Introducing the .sr-only class will allow us to add elements to the page that will only be observable to screen readers.

Here are some projects that are currently in progress or are just over the horizon.

Understanding the nuances and expectations of our components is not always evident. To improve the clarity of how our components are intended to be used or not used, we will spend more energy aligning the expectations of how to use our components.

Not all icons offered by Thumbprint are represented in each size the design system provides. This effort moves towards a more consistent and expected behavior around icon sizing.

Looking for a short snippet to help get you excited about design systems. Below you’ll find a brief knowledge drop that is noteworthy. It’s our “The more you know” (shooting star) moment.

You can evaluate your design for color contrast ratio issues in Figma? The Need to know how to get started as a designer, need a refresher on best practices, or are you a cross-functional team member interested in how the design practice works at TT? The first version of the Product Design Overview resource on TT is now live.

GitHub component repositories

Documentation & Web • Andriod • iOS