This month, we publicly launched the 7th major version of the Tesla Design System (TDS) 🎉. The Tesla Native (Mobile) App also launched its first major features that utilize TDS (under the code name: "Tacos de Suadero") 🌮
Some of our digital products that currently use TDS include, but are not limited to:
- Tesla's website
- Tesla Energy products
- The Investor Relations website
- Apps for Tesla retail stores
- The Tesla Configurator (Design Studio), and, as of recent
- Tesla's Native App 💪🏽
The ability to bring cross-platform experiences together and create a more cohesive user experience with our homegrown design system is a huge milestone for TDS v7 - and I'm here for it! One of our primary goals for the year ahead is to scale TDS and expand its reach across the company and beyond.
The People in your community make it all worthwhile and make it all possible.
We've been able to accomplish the recent unification of our cross-platform experiences in large part due to the foundation of our design system, which is built on top of HTML, CSS, and JavaScript which are all anchored on an accessibility-first approach. We've also been able to leverage the power of TypeScript to help us improve developer experience. From there, we offer a nearly 1-to-1 component and utility set in React and React Native.
The success of TDS in Tesla's Native App, and our growing product lines, is also due to our growing community of contributors and partners across the company who are passionate about TDS, and who we work closely with to ensure we're building the right things.
As part of the recent major release of TDS (v7), a subset of our components received a visual style refresh. The refresh is the result of our design tokenization efforts, which has been a collaborative effort between design, engineering and product. Through the use of design tokens and semantic colors, we've been able to more easily scale our design system and reduce visual inconsistencies.
Semantic colors leverage TDS base design tokens to create an opinionated abstraction layer. Each semantic color is named based on their role in the UI. These make colors easier to understand and provide theming out of the box.
Here's an example of TDS semantic colors for context:
:root { --tds-theme-primary: var(--tds-color-white); --tds-theme-primary-highlight: var(--tds-color-grey-60); }
Each semantic color (custom property) is prefixed with --tds- to ensure they're unique and don't conflict with other custom properties. The theme prefix is used to indicate that the custom property is a theme variable. Each custom property is assigned a value from the TDS base design tokens, e.g. --tds-color-white or --tds-color-grey-60 as shown above. This allows us to easily change the value of the custom property to change the theme of the entire application across all components and utilities by extension, the product lines that use TDS.
Tip: To view our full list of TDS design tokens, visit our asset server here.
For fun, here's a comparison of the old and new visual styles of our Button component in TDS v6 and v7, respectively.
Per the border-radius size of each version, the old style is affectionately known as "Chorizo" and the new style as "Chiclets".
For the full TDS v7 experience, visit tesla.com and be sure to also take a pit stop at the Tesla Configurator (Design Studio) to see the new visual styles in action.
Manny has gone above and beyond the call of duty more times than I can count, always delivering on impossibly tight deadlines yet always managing to keep a positive attitude despite the relentless pressure.
