Ben's Web Service

Ben's Web service: Web Strategists
Menu
Menu
< blog

Tesla Newsletter Design Styling

  • 6:46 pm

Model Y Available to Test Drive - 11/04/25

In this blog posts I’ve analysed how Tesla newsletters are styled. The goal is to showcase modern newsletter design ideas in an easy to use format for designers & small business owners. Modern newsletters usually have two version, one that’s optimised for mobile devices (less than 600px width) and another one for devices that are larger (than 600px width). Tesla’s newsletter also has two versions. Please refer to the image below.

Deconstructing The Design

Tesla have segmented their newsletter into 6 different sections, I have colour coded them and labelled them in the image below. We’ll look at these sections individually.

We will be looking at the white space surrounding features like the text and buttons, and also the styling of the features themselves. Whilst the design is very clean and simple, we’ll see that there are many subtle design choices. Below I’ve listed the differences between the two displays (if any). The newsletter service that you are currently should allow you to adjust the design parameters that I’ve listed in the tables below. 

Padding Explained

Before we jump in, it’s important to explain what padding is: An element’s padding area is the space between its content and its border. The green area below 

 

#1 - The Image Banner

Note: The banner image has a width-to-height ratio of:
Width = 1.2 * Height.

Element Tablet, Laptop & Desktop Mobile
Banner Image
  • width: 100%;
 ⬅️ Same as this.

#2 - The Title Section

Element Tablet, Laptop & Desktop Mobile
Main Title Padding
  • padding-top: 60px;
  • padding-right: 56px;
  • padding-bottom: 40px;
  • padding-left: 56px;
  • padding-top: 60px;
  • padding-right: 24px;
  • padding-bottom: 40px;
  • padding-left: 24px;
Main Title
  • font-family: Arial;
  • font-size: 38px;
  • font-weight: 700;
  • text-align: left;
  • color: rgb(124, 124, 124) !important;
  • line-height: 44px;
 ⬅️ Same as this.

#3 - The Main Paragraph Section

Element Tablet, Laptop & Desktop Mobile
Paragraph Text Section Padding
  • padding-top: 0px;
  • padding-right: 56px;
  • padding-bottom: 0px;
  • padding-left: 56px;
  • padding-top: 0px;
  • padding-right: 24px;
  • padding-bottom: 0px;
  • padding-left: 24px;
Paragraph Text
  • font-family: Arial;
  • font-size: 20px;
  • text-align: left;
  • color: #5c5e62;
  • line-height: 26px;
 ⬅️ Same as this.

#4 - The Call To Action Button Section

Element Tablet, Laptop & Desktop Mobile
Button Section Padding (Both Buttons Are Inside This)
  • padding-top: 40px;
  • padding-right: 56px;
  • padding-bottom: 0px;
  • padding-left: 56px;
  • padding-top: 40px !important;
  • padding-right: 24px !important;
  • padding-bottom: 0px !important;
  • padding-left: 24px !important;
"Test Drive" Button (Blue) Container. The Positioning Of The Button.
  • padding-top: 0px;
  • padding-right: 10px;
  • padding-bottom: 0px;
  • padding-left: 0px;
  • padding-top: 0px;
  • padding-right: 0px;
  • padding-bottom: 8px;
  • padding-left: 0px;
"Test Drive" Button (blue)
  • min-width: 120px;
  • height: 36px;
  • padding-top: 10px;
  • padding-right: 25px;
  • padding-bottom: 10px;
  • padding-left: 25px;
  • border-width: 2px;
  • border-style: solid;
  • border-color: #3e6ae1;
  • background: #3e6ae1;
  • border-radius: 4px;
  • font-size: 14px;
  • font-weight: 700;
  • font-family: Arial;
  • line-height: 12.8px;
⬅️ Same as this.
"Order Now" Button (White) Container. The Positioning Of The Button.
  • padding-top: 0px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 10px;
  • padding-top: 8 px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
"Order Now" Button (white)
  • background: #ffffff;
  • color: #171a20;
  • padding-top: 10px;
  • padding-right: 25px;
  • padding-bottom: 10px;
  • padding-left: 25px;
  • border-radius: 4px;
  • font-size: 14px;
  • font-weight: 700;
  • font-family: Arial;
  • line-height: 12.8px;
⬅️ Same as this.

#5- The Footer Section

This section is a little more detailed so I’ve annotated specific elements below.
Element Tablet, Laptop & Desktop Mobile
Footer Section Padding
  • padding-top: 56px;
  • padding-right: 56px;
  • padding-bottom: 0px;
  • padding-left: 56px;
  • border-top: 1px solid #5c5e6
  • padding-top: 56px;
  • padding-right: 24px;
  • padding-bottom: 0px;
  • padding-left: 24px;
(#a) Tesla Logo
  • width: 125px;
  • height: 10px;
  • padding-top: 16px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
⬅️ Same as this.
(#b) Company Info Text Line 1
  • color: #5c5e62;
  • font-weight: 700;
  • line-height: 22px;
  • font-family: 'Arial';
  • font-size: 16px;
  • padding-top: 15px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
⬅️ Same as this.
(#c) Company Info Text Line 2
  • color: #5c5e62;
  • font-weight: 700;
  • font-family: 'Arial';
  • line-height: 20px;
  • font-size: 16px;
  • padding-top: 4px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
⬅️ Same as this.
(#d) Company Info Text Line 3
  • font-size: 12px;
  • line-height: 18px;
  • font-family: 'Arial';
  • color: #5c5e62;
  • padding-top: 16px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
⬅️ Same as this.
(#e) Company Info Text Line 4
  • font-size: 12px;
  • line-height: 18px;
  • font-family: 'Arial';
  • color: #5c5e62;
  • padding-top: 16px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
⬅️ Same as this.

#6 - Disclaimer Section

Element Tablet, Laptop & Desktop Mobile
Disclaimer Section Padding
  • padding-top: 32px;
  • padding-right: 56px;
  • padding-bottom: 32px;
  • padding-left: 56px;
  • padding-top: 32px;
  • padding-right: 24px;
  • padding-bottom: 32px;
  • padding-left: 24px;
Disclaimer Text
  • font-family: Arial;
  • font-size: 10px;
  • text-align: left;
  • color: #5c5e62;
  • line-height: 20px;
⬅️ Same as this.

Conclusion

This Tesla newsletter is designed mobile first, and all information is presented in a single column format. Most elements on the page are sized in a multiple of 2px.

Require advice with designing your newsletter? We can help