TDS CSS Props

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).

Accessing the TDS CSS Props

1. Visit tesla.com in your favorite browser (I'll be using Chrome and a desktop for this example)
2. Inspect any element on the page to open the browser's developer tools panel
3. With the developer tools panel now open, navigate to the Styles pane
4. Next, using the filter input and search for --tds-
5. 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.

Copying the CSS Props

Addy Osmani@addyosmani

Tip: In @ChromeDevTools you can now copy CSS properties faster. Right-click on a CSS class to copy the current selector name, the full rule or all declarations under the rule.

Loading...

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.

What's ahead for TDS?

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)!

Resources

• Chrome Dev Tools
• Safar Dev Tools
• Custom CSS Properties (MDN)