For the curious Web slingers out there interested in how we build digital experiences at Tesla with vanilla CSS Props, I thought I'd write a quick note highlighting how to find the Tesla Design System (TDS) CSS Props from the browser console (or Chrome DevTools).
- Visit tesla.com in your favorite browser (I'll be using Chrome and a desktop for this example)
- Inspect any element on the page to open the browser's developer tools panel
- With the developer tools panel now open, navigate to the Styles pane
- Next, using the filter input and search for
--tds-
- This search will list all of the current CSS Props available in the Tesla Design System (TDS)
Note: You may need to scroll to the bottom of the list to access the beginning TDS CSS Props and in their entirety.
/* Example subset of TDS CSS color and font props from the DevTools Styles pane */ ... --tds-color-grey-35: #8e8e8e; --tds-color-grey-30: #5c5e62; --tds-color-grey-25: #444; --tds-color-grey-20: #393c41; --tds-color-grey-15: #222; --tds-color-grey-10: #171a20; --tds-color-green: #12bb00; --tds-color-blue-40: #3368ff; --tds-color-blue-30: #3e6ae1; --tds-color-blue-20: #3457b1; ... --tds-font-family-latin-alt: "Universal Sans"; --tds-font-family-latin: "Gotham SSm"; --tds-font-family-korean: "FB New Gothic"; --tds-font-family-japanese: "AXIS Font Japanese W55";
There are many more TDS CSS Props available than the subset above, such as for spacing, sizing and more.
Pro tip: you can copy and paste the CSS Props into your own CSS file to experiment with. Addy Osmani, from the Google Chrome team, highlights how to do this in the following tweet:
There are a good number of CSS Props available in TDS which make up our complete set of design tokens, like spacing, sizing and more. The browser dev tools is a great way for anyone to review what CSS props are available and how they're used by various teams across the company for a growing number of our digital products, like tesla.com.
In the coming months, we plan to build and launch a new website that will make this information, like our available CSS Props, more accessible and easier to consume internally across multiple platforms.
In the meantime, have fun exploring the Tesla Design System (TDS) CSS props (aka: design tokens)!
Manny is a fantastic team player who can take any product to a new level of vision and fulfillment. Manny engages with people, serves as their voice, brings out the best ideas.
Software QA Engineering @ Tesla