About this Post

This summer we're rebuilding the Tesla Design System website with Next.js, MDX and more cross-functional collaboration. Oh My!

Well, it's official: we're going to rebuild the Tesla Design System website with Next.js.

Tesla Design System (TDS)

It's no secret to my colleagues that I'm a big fan of Next.js and for where we're at with things, I think it's a great fit for the Tesla Design System community, the core team, our partners, the product itself and our users at-large.

There are various reasons to go with Next, but the gist is:

  • Top-tier developer experience
  • Better performance0-to-60 in Tesla speed ;)
  • Ease of use by various folks, e.g. developers, designers, product managers, content creators and more, which helps improve collaboration, contribution and adoption

Essentially, all of the reasons or factors help us with delivering a better product and user experience. Plus, we already maintain a Next.js-based scaffold/starter kit for anyone at the company to use, which has been getting some great adoption lately.

We'll be using MDX to write our documentation. MDX allows us to use markdown and JSX in the same file, which opens up the door for wider collaboration. Effectively, using MDX will allow us to really take advantage of the power of React components in our content while making it relatively easy for cross-functional partners to contribute to our documentation using markdown.

I've been using this exact stack, Next.js and MDX, for my personal site for a few years now and I'm really enjoying it. I think the rest of the crew will too.

We'll likely use Contentlayer to help us with making our MDX content more structured and type-safe.

export const Post = defineDocumentType(() => ({ name: 'Post', filePathPattern: 'posts/**/*.mdx', contentType: 'mdx', fields: { published: { type: 'boolean', description: 'Whether the post is published', default: true, required: true, }, title: { type: 'string', description: 'The title of the post', required: true, }, publishedDate: { type: 'string', description: 'The date of the post', required: true, }, modifiedDate: { type: 'string', description: 'The modification date of the post', required: false, }, summary: { type: 'string', description: `The posts's description/lead` required: false }, coverImage: { type: 'string', description: `A supplementary visual for the post`, required: false }, categories: { type: 'list', of: { type: 'string' }, default: [], required: false, }, ... }, computedFields, }));

Delba from the Vercel/Next.js team has a great, in-depth blog post about Contentlayer + Next.js here.

In addition to combing through every line of code and content as we rehaul the TDS website (to ensure freshness, accuracy, etc.), we'll be working on a personalized experience for our users on top of improving discoverability and shareability. This is critical to help reduce friction and increase adoption of TDS, notably as we begin to scale the number of products we support across the company, internal and external, including various platforms.

The Tesla Design System strives to deliver components and systems which are:

  • Clear
  • Consistent
  • Controllable and
  • Accessible and Inclusive

We are committed to delivering on all of this and much more through this rehaul initiative.

We're still in the early stages of this initiative, but we have a decent starting point and should be able to give this effort a more dedicated focus once we're out from under Q2. In addition, more of our goals with this rehaul will be further refined as we iterate on things amongst ourselves (the core team) in Q3, along with collecting feedback from our partners and the community at-large for what they'd like to see in the new TDS website.

With that, stay tuned for more on this initiative later in Q3/Q4.