개요

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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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)

타이포그래피 (5)

display

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

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

body

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

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

ui

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

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

mono

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

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

scale

unparsed

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

컴포넌트 (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 소스