automotive Color System
Tesla's website is an exercise in radical subtraction — a digital showroom where the product is ever...
Tesla's website is an exercise in radical subtraction — a digital showroom where...
Tesla uses #3E6AE1 as the primary accent for interactive elements
Carefully selected 8 colors for automotive applications
Uses gradient, monochrome and more
#3E6AE1
Primary CTA button background — a confident, mid-saturation blue (rgb 62, 106, 225) that stands alone as the only chromatic color in the entire interface. Used exclusively for "Order Now" and other primary action buttons
#FFFFFF
Dominant background color for all surfaces, panels, navigation, and secondary button fills — the canvas that lets photography breathe
#3E6AE1
Blue also serves for promotional text ("0% APR Available") displayed over hero imagery in the same hue as the CTA — creating a visual link between incentive messaging and action
#FFFFFF
Page background, navigation panel, dropdown menus, and all surface containers
#F4F4F4
Subtle alternate surface for section differentiation — barely perceptible shift from pure white (rgb 244, 244, 244)
#171A20
Dark surface color for hero text overlays and potential dark-mode contexts (rgb 23, 26, 32) — a warm near-black with a blue undertone
rgba(255, 255, 255, 0.75)
Semi-transparent white for navigation backdrop-filter effects on scroll
#171A20
Primary heading and navigation text — the darkest text value (rgb 23, 26, 32), used for model names, nav labels, and hero titles on light backgrounds
/* Tesla Color System */
:root {
--tesla-electric-blue: #3E6AE1;
--tesla-pure-white: #FFFFFF;
--tesla-promo-blue: #3E6AE1;
--tesla-white-canvas: #FFFFFF;
--tesla-light-ash: #F4F4F4;
--tesla-carbon-dark: #171A20;
--tesla-frosted-glass: rgba(255, 255, 255, 0.75);
--tesla-carbon-dark: #171A20;
}
/* Example usage */
.tesla-button-primary {
background-color: var(--tesla-electric-blue);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}BMW's website is automotive engineering made visual — a design system that commu...
Ferrari's website is a digital editorial — a curated magazine where the Prancing...
Lamborghini's website is a cathedral of darkness — a digital stage where jet-bla...
Renault's website is a vibrant digital showroom that balances French automotive ...