Ben's Web Service

Menu
Menu

Tesla Newsletter Design Styling

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. There are two version of the newsletter – one for mobile devices (less than 600px width) and another one for devices that are larger (than 600px width). 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.

#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 mobile oriented in approach based 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