Tesla

Overview

Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.

The color philosophy is almost ascetic: a single blue (#3E6AE1) for primary calls to action, three shades of dark gray for text hierarchy, and white for everything else.

Key Characteristics

• Full-viewport hero sections dominated by cinematic car photography
• Near-zero UI decoration: no shadows, no gradients, no borders
• Single accent color — Electric Blue (#3E6AE1)
• Universal Sans font family (Display + Text)
• Photography-first presentation

Do's and Don'ts

Let photography dominate every screen. Use Electric Blue (#3E6AE1) exclusively for primary CTAs. Maintain viewport-height sections. Keep typography at weight 400-500 only.

개요

Tesla의 웹사이트는 제품이 전부이고 인터페이스는 거의 아무것도 아닌 디지털 쇼룸입니다.

색상 철학은 거의 금욕적입니다. 기본 클릭 유도 문구에는 단일 파란색(#3E6AE1), 텍스트 계층 구조에는 세 가지 진한 회색 음영, 기타 모든 항목에는 흰색입니다.

주요 특징

• 영화 같은 자동차 사진이 지배하는 전체 뷰포트 히어로 섹션
• 거의 0에 가까운 UI 장식: 그림자 없음, 그라데이션 없음, 테두리 없음
• 단일 액센트 색상 — 일렉트릭 블루(#3E6AE1)
• Universal Sans 글꼴 모음(디스플레이 + 텍스트)
• 사진 우선 프리젠테이션

해야 할 일과 하지 말아야 할 일

사진이 모든 화면을 지배하게 하세요. 기본 CTA에만 일렉트릭 블루(#3E6AE1)를 사용하세요. 뷰포트 높이 섹션을 유지합니다. 서체의 무게는 400-500으로만 유지하세요.

概要

Tesla の Web サイトは、徹底的な引き算の実践です。製品がすべてであり、インターフェースはほとんど何もないデジタル ショールームです。

色の哲学はほとんど禁欲的です。主要な行動喚起には単一の青 (#3E6AE1)、テキスト階層には 3 つの濃い灰色、その他すべてには白が使用されます。

主な特徴

• 映画のような車の写真が大半を占めるフルビューポートのヒーロー セクション
• ほぼゼロの UI 装飾: 影、グラデーション、境界線なし
• 単一のアクセント カラー — エレクトリック ブルー (#3E6AE1)
• Universal Sans フォント ファミリー (ディスプレイ + テキスト)
• 写真ファーストのプレゼンテーション_

推奨事項と禁止事項

すべての画面を写真で占めましょう。エレクトリック ブルー (#3E6AE1) はプライマリ CTA のみに使用してください。ビューポートの高さのセクションを維持します。タイポグラフィのウェイトは 400 ～ 500 のみにしてください。

Accessibility Considerations

Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Ferrari Design System
• Rivian Design System
• Nissan Design System
• Porsche Design System