Overview

Tesla Showroom System

Principles

The product is the design. Photography fills entire viewports; the UI exists only to step out of the way.
One chromatic color: Electric Blue (#3E6AE1). Reserve it for primary CTAs and the rare promo badge — never decoration.
Pure White (#FFFFFF) is the canvas. Light Ash (#F4F4F4) is the only acceptable secondary surface.
Hairline borders only. Cloud Gray (#EEEEEE) and Pale Silver (#D0D1D2) draw 1px lines; box-shadows are forbidden.
Typography is restrained: Universal Sans Display for hero text, Universal Sans Text for everything else. Two weights, 400 and 500, no exceptions.

Color & Surface

Text hierarchy uses three grays: Carbon Dark (#171A20) for headlines and nav, Graphite (#393C41) for body, Pewter (#5C5E62) for tertiary links. Silver Fog (#8E8E8E) is reserved for placeholders and disabled states. Frosted Glass (rgba(255,255,255,0.75)) is the only allowed translucency, used for sticky nav over hero photography.

Typography

Hero titles render at 40px / 500 with normal letter-spacing — no negative tracking. Product names land at 17px / 500. Body and UI text cluster tightly at 14px (400 for paragraphs, 500 for labels). Promo accents reach 22px. Avoid uppercase transforms; the brand voice is lowercase calm. Numbers use tabular-nums in spec rows for clean alignment.

Layout & Motion

Lay out sections at viewport height where possible — one message per scroll. Border-radius scale is sharp: 0px default, 4px for buttons and inputs, 12px on landscape category cards, 9999px only for swatch dots and carousel indicators. The universal motion is 0.33s with cubic-bezier(0.5, 0, 0, 0.75) — apply to color, border, and box-shadow only. Never animate scale or translate.

Components

Buttons are 200×40 with sharp 4px corners and a 3px transparent reserved border (filled by focus rings). Cards have no border, no shadow — separation comes from whitespace. Stat blocks render Range / 0–60 / Top Speed at hero scale, divided by hairlines. Paint swatches sit on circular dots ringed in Electric Blue when selected. Inputs are transparent with a single Pale Silver hairline that brightens to Electric Blue on focus.

Don'ts

No gradients on UI surfaces. No drop shadows. No more than two CTAs on screen. No alternative typeface to Universal Sans. No bold weights, no italics, no uppercase. No rounded pills or playful corners. If a screen feels designed, it is too much — strip back until the vehicle leads.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (11)

electricBlue

#3E6AE1

pureWhite

#FFFFFF

lightAsh

#F4F4F4

carbonDark

#171A20

graphite

#393C41

pewter

#5C5E62

silverFog

#8E8E8E

cloudGray

#EEEEEE

paleSilver

#D0D1D2

frostedGlass

rgba(255,255,255,0.75)

modalScrim

rgba(128,128,128,0.65)

Typography (5)

display

Universal Sans Display, Gotham, Helvetica Neue, -apple-system, Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

Universal Sans Text, Helvetica Neue, -apple-system, Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

ui

Universal Sans Text, Helvetica Neue, -apple-system, Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "hero": "40px/1.2",
  "promo": "22px/0.91",
  "product": "17px/1.18",
  "body": "14px/1.43",
  "ui": "14px/1.2"
}

Components (14)

Button

Primary action. Electric Blue fill on white canvas, with white secondary alternative. Sharp 4px corners, 200x40 fixed footprint.

html

Hand-tuned CSS, no framework

1 props · 6 states · 8 tags · 2 sources

Input

Hairline-bordered text input. Carbon Dark text, Silver Fog placeholder, transparent canvas.

html

Hand-tuned CSS

1 props · 5 states · 4 tags · 2 sources

Card

Borderless white surface — relies on whitespace for separation, not lines or shadows.

html

Hand-tuned CSS

1 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Badge

Restrained promo pill. Used sparingly for promo text like '0% APR Available'.

html

Hand-tuned CSS

1 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Heading

Display headlines at 40px / weight 500, lowercase, Carbon Dark on light or white on dark hero imagery.

html

Hand-tuned CSS

1 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Link

Tertiary text links — Pewter resting color, Electric Blue on hover with underline.

html

Hand-tuned CSS

1 props · 3 states · 5 tags · 2 sources

Missing states: disabled

Hero

Full-viewport vehicle stage. Cinematic image canvas, model name centered, primary + secondary CTAs at the bottom.

html

Hand-tuned CSS

1 props · 1 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

Nav

Sticky frosted glass navigation. Spaced wordmark left, five centered category links, three icon buttons right. No border, no shadow.

html

Hand-tuned CSS

1 props · 2 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

Footer

Quiet footer. Pewter links spaced evenly, white canvas, hairline divider only.

html

Hand-tuned CSS

1 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

Stat

Oversized vehicle spec. Big numeric value at 40px, unit and label below, hairline column dividers.

html

Hand-tuned CSS

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

ProductCard

Vehicle card — transparent PNG-style render above name and two text links. Borderless on white.

html

Hand-tuned CSS

1 props · 1 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

SpecRow

Detailed spec table row. Label left, value right, hairline divider between rows.

html

Hand-tuned CSS

1 props · 1 states · 6 tags · 2 sources

Missing states: hover, focus-visible, disabled

ConfigSwatch

Paint color picker. Circular swatches with selected ring in Electric Blue and the swatch label below.

html

Hand-tuned CSS

1 props · 4 states · 6 tags · 2 sources

Missing states: disabled

OrderCTA

Conversion CTA strip. Single Electric Blue 'Order Now' anchored to a quiet white panel with model name and price.

html

Hand-tuned CSS

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled, loading

DESIGN.md

Tesla Showroom System

Principles

The product is the design. Photography fills entire viewports; the UI exists only to step out of the way.
One chromatic color: Electric Blue (#3E6AE1). Reserve it for primary CTAs and the rare promo badge — never decoration.
Pure White (#FFFFFF) is the canvas. Light Ash (#F4F4F4) is the only acceptable secondary surface.
Hairline borders only. Cloud Gray (#EEEEEE) and Pale Silver (#D0D1D2) draw 1px lines; box-shadows are forbidden.
Typography is restrained: Universal Sans Display for hero text, Universal Sans Text for everything else. Two weights, 400 and 500, no exceptions.

Color & Surface

Text hierarchy uses three grays: Carbon Dark (#171A20) for headlines and nav, Graphite (#393C41) for body, Pewter (#5C5E62) for tertiary links. Silver Fog (#8E8E8E) is reserved for placeholders and disabled states. Frosted Glass (rgba(255,255,255,0.75)) is the only allowed translucency, used for sticky nav over hero photography.

Typography

Hero titles render at 40px / 500 with normal letter-spacing — no negative tracking. Product names land at 17px / 500. Body and UI text cluster tightly at 14px (400 for paragraphs, 500 for labels). Promo accents reach 22px. Avoid uppercase transforms; the brand voice is lowercase calm. Numbers use tabular-nums in spec rows for clean alignment.

Layout & Motion

Lay out sections at viewport height where possible — one message per scroll. Border-radius scale is sharp: 0px default, 4px for buttons and inputs, 12px on landscape category cards, 9999px only for swatch dots and carousel indicators. The universal motion is 0.33s with cubic-bezier(0.5, 0, 0, 0.75) — apply to color, border, and box-shadow only. Never animate scale or translate.

Components

Buttons are 200×40 with sharp 4px corners and a 3px transparent reserved border (filled by focus rings). Cards have no border, no shadow — separation comes from whitespace. Stat blocks render Range / 0–60 / Top Speed at hero scale, divided by hairlines. Paint swatches sit on circular dots ringed in Electric Blue when selected. Inputs are transparent with a single Pale Silver hairline that brightens to Electric Blue on focus.

Don'ts

No gradients on UI surfaces. No drop shadows. No more than two CTAs on screen. No alternative typeface to Universal Sans. No bold weights, no italics, no uppercase. No rounded pills or playful corners. If a screen feels designed, it is too much — strip back until the vehicle leads.

Adapters (6)

adapters/tokens.css
text/css
Download
adapters/shadcn-registry.json
application/json
Download
adapters/tailwind.config.js
text/javascript
Download
adapters/react/index.ts
text/typescript
Download
adapters/html/index.html
text/html
Download
adapters/html/styles.css
text/css
Download

All files (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

Versions

v1.0.05/8/2026
Download