admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/tesla/DESIGN.md
+289
View File
@@ -0,0 +1,289 @@
# Design System Inspired by Tesla
> Category: Automotive
> Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.
## 1. Visual Theme & Atmosphere
Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing. The page opens with a full-viewport hero that fills the entire screen with cinematic car photography: three vehicles arranged on polished concrete against a hazy cityscape sky, with a single model name floating above in translucent white type. There are no decorative borders, no gradients, no patterns, no shadows. The UI exists only to provide just enough navigational structure to get out of the way. Every pixel that isn't product imagery is white space, and that restraint is the design system's most powerful statement.
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. The entire emotional weight is carried by photography — sprawling landscape shots, studio-lit vehicle profiles, and atmospheric environmental compositions that stretch edge-to-edge across each viewport-height section. The UI chrome dissolves into the imagery. The navigation bar floats above the hero with no visible background, border, or shadow — the TESLA wordmark and five navigation labels simply exist in the space, trusting the content beneath them to provide sufficient contrast.
Typography recently transitioned from Gotham to Universal Sans — a custom family split into "Display" for headlines and "Text" for body/UI elements — unifying the website, mobile app, and in-car software into a single typographic voice. The Display variant renders hero titles at 40px weight 500, while the Text variant handles everything from navigation (14px/500) to body copy (14px/400). The font carries a geometric precision with slightly humanist terminals that feels engineered rather than designed — exactly matching Tesla's brand identity of technology that doesn't need to announce itself. There are no text shadows, no text gradients, no decorative type treatments. Every letterform earns its place through clarity alone.
**Key Characteristics:**
- Full-viewport hero sections (100vh) dominated by cinematic car photography with minimal overlay UI
- Near-zero UI decoration: no shadows, no gradients, no borders, no patterns anywhere on the page
- Single accent color — Electric Blue (`#3E6AE1`) — used exclusively for primary CTA buttons
- Universal Sans font family (Display + Text) unifying web, app, and in-car interfaces
- Photography-first presentation where product imagery carries all emotional weight
- Frosted-glass navigation concept with transparent/white nav that floats over hero content
- 0.33s cubic-bezier transitions as the universal timing for all interactive state changes
- Carousel-driven hero with dot indicators and edge arrow navigation for multiple vehicle showcases
- "Ask a Question" persistent chatbot bar anchored to the viewport bottom
## 2. Color Palette & Roles
### Primary
- **Electric Blue** (`#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
- **Pure White** (`#FFFFFF`): Dominant background color for all surfaces, panels, navigation, and secondary button fills — the canvas that lets photography breathe
### Secondary & Accent
- **Promo Blue** (`#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
- No secondary accent colors exist. Tesla deliberately avoids color variety to maintain extreme visual discipline
### Surface & Background
- **White Canvas** (`#FFFFFF`): Page background, navigation panel, dropdown menus, and all surface containers
- **Light Ash** (`#F4F4F4`): Subtle alternate surface for section differentiation — barely perceptible shift from pure white (rgb 244, 244, 244)
- **Carbon Dark** (`#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
- **Frosted Glass** (`rgba(255, 255, 255, 0.75)`): Semi-transparent white for navigation backdrop-filter effects on scroll
### Neutrals & Text
- **Carbon Dark** (`#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
- **Graphite** (`#393C41`): Body text and secondary content (rgb 57, 60, 65) — the default paragraph color, slightly warmer than pure gray
- **Pewter** (`#5C5E62`): Tertiary text for sub-links, secondary navigation links like "Learn" and "Order" (rgb 92, 94, 98)
- **Silver Fog** (`#8E8E8E`): Placeholder text in input fields and disabled states (rgb 142, 142, 142)
- **Cloud Gray** (`#EEEEEE`): Light borders and divider lines (rgb 238, 238, 238)
- **Pale Silver** (`#D0D1D2`): Subtle UI borders and delineation (rgb 208, 209, 210)
### Semantic & Accent
- Tesla's marketing site avoids semantic color coding (no green/red/yellow status indicators). Error, success, and warning states follow standard browser defaults in form contexts
- The blue CTA (`#3E6AE1`) serves as the sole interactive color signal
### Gradient System
- No gradients are used anywhere in the interface
- Depth is achieved entirely through photography, whitespace, and the binary contrast between full-bleed imagery and clean white surfaces
- The navigation achieves layering through opacity (frosted glass effect) rather than gradient or shadow
## 3. Typography Rules
### Font Family
- **Display**: `Universal Sans Display`, -apple-system, Arial, sans-serif — used for hero titles and large model names. A geometric sans-serif with precisely engineered proportions, recently replacing Gotham to unify Tesla's digital ecosystem (website, mobile app, vehicle interface)
- **Text/UI**: `Universal Sans Text`, -apple-system, Arial, sans-serif — used for navigation, body copy, buttons, and all UI text. Optimized for legibility at smaller sizes with slightly wider proportions than the Display variant
- **No OpenType features** detected — typography is completely unembellished
- **No italic variants** observed on the marketing site
### Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| Hero Title | 40px (2.50rem) | 500 | 48px (1.20) | normal | Universal Sans Display, white on dark hero imagery |
| Product Name | 17px (1.06rem) | 500 | 20px (1.18) | normal | Universal Sans Text, model names in nav panel and cards |
| Nav Item | 14px (0.88rem) | 500 | 16.8px (1.20) | normal | Universal Sans Text, primary navigation labels |
| Body Text | 14px (0.88rem) | 400 | 20px (1.43) | normal | Universal Sans Text, paragraph and descriptive content |
| Button Label | 14px (0.88rem) | 500 | 16.8px (1.20) | normal | Universal Sans Text, CTA button text |
| Sub-link | 14px (0.88rem) | 400 | 20px (1.43) | normal | Tertiary links (Learn, Order, Experience) |
| Promo Text | 22px (1.38rem) | 400 | 20px (0.91) | normal | White promotional text on hero ("0% APR Available") |
| Category Label | 16px (est.) | 500 | — | normal | White text labels on category cards ("Sport Sedan") |
### Principles
- **"Normal" letter-spacing everywhere**: Unlike most modern tech brands that use negative tracking for headlines, Tesla uses default letter-spacing at every level. This reflects a philosophy that the typeface should speak for itself without manipulation
- **Weight restraint**: Only two weights appear — 500 (medium) for headings/UI and 400 (regular) for body. No bold (700), no light (300). The system avoids typographic drama
- **Unified font sizing**: Most UI text clusters at 14px with only hero titles (40px) and promo text (22px) breaking away. This extreme uniformity creates a sense of engineered consistency
- **Display vs Text split**: The two-variant system (Display for hero, Text for UI) creates subtle optical correction without visible stylistic difference — they appear as the same typeface at different sizes
- **No text transforms**: No uppercase text appears in the main navigation or CTAs — the lowercase approach reinforces Tesla's understated confidence
## 4. Component Stylings
### Buttons
All buttons use barely-rounded rectangles (4px border-radius) — creating a sharp, technical aesthetic that mirrors the precision of the vehicles.
**Primary CTA** — The main action button:
- Default: bg `#3E6AE1` (Electric Blue), text `#FFFFFF`, fontSize 14px, fontWeight 500, padding 4px with inner content centering, borderRadius 4px, minHeight 40px, width 200px
- Border: 3px solid transparent (reserves space for focus/active border animation)
- Box Shadow: `rgba(0,0,0,0) 0px 0px 0px 2px inset` (invisible at rest, animates to visible on focus)
- Transition: `border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s`
- Hover: subtle darkening of blue background
- Used for: "Order Now" calls to action
**Secondary CTA** — The alternative action button:
- Default: bg `#FFFFFF`, text `#393C41` (Graphite), same dimensions and border pattern as primary
- Transition: identical timing to primary (0.33s)
- Used for: "View Inventory" alongside primary CTA
**Nav Button** — Top navigation items:
- Default: bg transparent, text `#171A20` (Carbon Dark), fontSize 14px, fontWeight 500, borderRadius 4px, padding 4px 16px, minHeight 32px
- Transition: `color 0.33s, background-color 0.33s`
- Active/expanded: subtle background highlight
- Used for: "Vehicles", "Energy", "Charging", "Discover", "Shop"
**Text Link** — In-content actions:
- Default: text `#5C5E62` (Pewter), fontSize 14px, fontWeight 400, no background, no border
- Hover: underline decoration with box-shadow transition
- Transition: `box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75), color 0.33s`
- Used for: "Learn", "Order", "Experience", "New", "Pre-Owned" links in dropdown panel
### Cards & Containers
**Vehicle Card** (Navigation panel):
- Background: transparent (inherits panel white)
- Border: none
- Shadow: none
- Content: vehicle image (transparent PNG) + model name centered below + two text links
- Layout: 3-column grid within the dropdown panel
- No hover animation on the card itself — interaction is via the text links beneath
**Category Card** (Homepage lower section):
- Background: full-bleed landscape photography
- Border radius: approximately 12px (subtly rounded)
- Overflow: hidden (clips image to rounded corners)
- Text: white label in top-left corner ("Sport Sedan", "Midsize SUV")
- Size: large format, approximately 2:1 aspect ratio
- No shadow, no border, no overlay gradient — text relies on image darkness for contrast
### Inputs & Forms
- Background: transparent
- Text color: `#171A20` (Carbon Dark)
- Placeholder color: `#8E8E8E` (Silver Fog)
- Border: minimal, inherits from browser defaults
- Font: Universal Sans Text, 14px
- The "Ask a Question" chatbot input bar sits at the viewport bottom with a clean white background and subtle border
### Navigation
- **Desktop**: Centered horizontal nav with TESLA wordmark (spaced uppercase letters) on the left, five category buttons center-aligned, and three icon buttons (help, globe/language, account) on the right
- **Background**: White (transitions from transparent over dark hero to opaque white on scroll via class toggle `tds-site-header--white-background`)
- **Dropdown panel**: Full-width white panel with 3-column vehicle grid + right sidebar text links, no shadow, no border — appears seamlessly below the nav
- **Sticky behavior**: `sticky-without-slide` class — stays at top without slide-in animation
- **Mobile**: Hamburger collapse pattern
- **No visible separator** between nav and content — the nav blends with the hero
### Image Treatment
- **Hero**: Full-viewport (100vh) sections with cinematic photography — edge-to-edge, no padding, no margin
- **Vehicle images**: Transparent PNG renders on white background in dropdown panel, studio-quality 3/4 angle shots
- **Category cards**: Landscape photography with approximately 2:1 ratio, rounded corners (12px)
- **Carousel**: Auto-advancing with dot indicators (3 dots) and left/right arrow navigation on edges
- **Lazy loading**: Below-fold sections use lazy loading, rendering as blank white until scrolled into view
### Persistent Chat Bar
- Anchored to viewport bottom, visible across all sections
- White background with subtle border
- Contains: chat icon + "Ask a Question" label + placeholder text ("What's Dog Mode?") + send icon + "Schedule a Drive Today" secondary CTA
- Schedule CTA has a teal/blue icon accent
## 5. Layout Principles
### Spacing System
- **Base unit**: 8px
- **Common values**: 8px (0.5rem), 16px (1rem), 21.44px (1.34rem)
- **Button padding**: 4px (minimal outer) with content centering via flexbox, 4px 16px for nav items
- **Section padding**: Full-viewport sections with content centered vertically
- **Card gap**: approximately 16px between category cards
### Grid & Container
- **Max width**: approximately 1383px (full viewport width used for most content)
- **Hero**: Full-bleed, edge-to-edge, 100vh sections
- **Navigation panel**: 3-column grid for vehicle cards with right-aligned text sidebar (~70/30 split)
- **Category cards**: 2-up horizontal layout (large left card + smaller right card)
### Whitespace Philosophy
Tesla uses whitespace as a luxury signal. The generous vertical spacing between sections (each section is a full viewport height) means you can only see one "message" at a time — one car, one model name, one CTA pair. This creates a gallery-like browsing experience where each scroll is a deliberate transition, not a continuous feed. White space is not empty — it's the frame that elevates each vehicle to the status of art piece.
### Border Radius Scale
| Value | Context |
|-------|---------|
| 0px | Most elements — sharp edges are the default |
| 4px | Buttons (primary, secondary, nav items) — barely perceptible rounding |
| ~12px | Category cards — noticeable but restrained rounding on larger surfaces |
| 50% | Carousel dot indicators — perfect circles |
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Level 0 (Flat) | No shadow, no border | Default state for all elements — cards, panels, buttons at rest |
| Level 1 (Frost) | `rgba(255,255,255,0.75)` backdrop | Navigation bar on scroll — frosted glass transparency |
| Level 2 (Overlay) | `rgba(128,128,128,0.65)` | Modal overlays and region/cookie popups |
| Level 3 (Subtle) | `rgba(0,0,0,0.05)` | Minimal shadow hints on rare hover states |
### Shadow Philosophy
Tesla's approach to elevation is essentially "none." The site avoids box-shadows entirely in its primary interface. Depth is communicated through three alternative strategies:
1. **Z-index layering**: The sticky navigation sits above hero content through positioning, not shadow
2. **Opacity-based transparency**: The frosted glass nav and overlay modals use background-color opacity rather than shadow to indicate layering
3. **Photography-as-depth**: The full-bleed images create their own visual depth through perspective, lighting, and composition — making UI shadows redundant
### Decorative Depth
- No gradients, glows, or atmospheric effects on UI elements
- The hero imagery itself provides all visual richness — sunset skies, reflected light on car surfaces, ground shadows from studio lighting
- The carousel arrow buttons use a semi-transparent white background to float above the hero imagery without disrupting it
## 7. Do's and Don'ts
### Do
- Let photography dominate every screen — the product IS the design
- Use Electric Blue (`#3E6AE1`) exclusively for primary CTAs — never for decorative purposes
- Maintain viewport-height sections for major content blocks — one message per screen
- Keep typography at weight 400-500 only — no bold, no light, no extremes
- Use 4px border-radius for all interactive elements — precision over playfulness
- Trust whitespace as a luxury signal — never fill available space just because it's empty
- Keep all transitions at 0.33s — consistency in motion is as important as consistency in color
- Use transparent PNG vehicle imagery on white backgrounds for product showcases
- Center CTAs horizontally below model names — the vertical rhythm is model → subtitle → buttons
- Maintain the Display/Text font split — Display for hero-scale text only, Text for everything else
### Don't
- Add shadows to any element — elevation through shadow contradicts the flat, gallery aesthetic
- Use more than one chromatic color besides the blue CTA — the palette is intentionally monochrome-plus-one
- Apply gradients, patterns, or decorative backgrounds to surfaces — white and photography are the only backgrounds
- Use text larger than 40px on the web — the typography is deliberately restrained even at hero scale
- Add borders to cards or containers — separation is achieved through spacing, not lines
- Use uppercase text transforms — Tesla's confidence is expressed through lowercase calm
- Introduce rounded-pill buttons or large border-radii — the 4px radius is deliberate and precise
- Override the Universal Sans family with other typefaces — cross-platform consistency is a core brand value
- Add hover animations with scale/translate transforms — Tesla's interactions are color-only (background and border transitions)
- Clutter the viewport with multiple CTAs — every screen should have at most two action buttons
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | Single-column layout, hamburger nav replaces horizontal labels, hero text scales to ~28px, CTA buttons stack vertically, category cards become full-width |
| Tablet | 768-1024px | 2-column nav panel, hero maintains full-viewport height, CTAs remain side-by-side, reduced horizontal padding |
| Desktop | 1024-1440px | Full horizontal nav, 3-column vehicle grid in dropdown, hero at 40px, side-by-side CTAs at 200px/160px width |
| Large Desktop | >1440px | Content remains centered, hero photography scales to fill wider viewports, max-width container for nav panel content |
### Touch Targets
- Primary CTA buttons: 200px × 40px minimum (well above 44×44px WCAG requirement)
- Nav buttons: minimum 32px height with 4px 16px padding — adequate touch targets
- Carousel arrows: ~44px square white semi-transparent buttons at viewport edges
- Text links ("Learn", "Order"): 14px text with adequate line-height spacing for touch
### Collapsing Strategy
- **Navigation**: Horizontal category buttons (Vehicles, Energy, Charging, Discover, Shop) collapse to a hamburger/drawer menu on mobile
- **Hero CTA pair**: Side-by-side buttons on desktop stack vertically on mobile
- **Category cards**: 2-up horizontal layout collapses to single-column full-width on mobile
- **Vehicle grid**: 3-column grid in desktop nav panel becomes 2-column on tablet, single-column on mobile
- **Spacing**: Section vertical padding remains generous (viewport-height sections) but horizontal padding reduces
### Image Behavior
- Hero images are fully responsive and fill the entire viewport at every breakpoint
- Vehicle carousel images use `object-fit: cover` to maintain cinematic composition across widths
- Transparent PNG vehicle images in the nav panel scale proportionally within their grid cells
- Category card images maintain their landscape ratio and clip via `overflow: hidden` with border-radius
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: "Electric Blue (#3E6AE1)"
- Background: "Pure White (#FFFFFF)"
- Heading text: "Carbon Dark (#171A20)"
- Body text: "Graphite (#393C41)"
- Tertiary text: "Pewter (#5C5E62)"
- Placeholder: "Silver Fog (#8E8E8E)"
- Alternate surface: "Light Ash (#F4F4F4)"
- Dark surface: "Carbon Dark (#171A20)"
### Example Component Prompts
- "Create a hero section with a full-viewport background image, centered 'Model Y' title in Universal Sans Display at 40px weight 500 in white, a subtitle line below, and two buttons side by side: a primary Electric Blue (#3E6AE1) 'Order Now' button and a secondary white 'View Inventory' button, both with 4px border-radius and 40px height"
- "Design a navigation bar with a spaced-letter wordmark on the left, five text buttons (14px, weight 500, Carbon Dark #171A20) centered, and three icon buttons on the right, all on a white background with no shadow or border"
- "Build a vehicle card grid with 3 columns, each card showing a transparent-background car image above a model name (17px, weight 500, Carbon Dark) and two text links (14px, weight 400, Pewter #5C5E62) labeled 'Learn' and 'Order', on a pure white surface with no borders or shadows"
- "Create a category card with full-bleed landscape photography, 12px border-radius, overflow hidden, and a white text label ('Sport Sedan') positioned in the top-left corner with no overlay gradient"
- "Design a persistent bottom bar with a chat input ('Ask a Question' placeholder), a send icon, and a secondary CTA ('Schedule a Drive Today') with a teal icon, anchored to the viewport bottom on a white background"
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time — Tesla's system is so minimal that each element must be pixel-perfect
2. Reference specific color names and hex codes from this document — there are only 6-7 colors in the entire system
3. Use natural language descriptions, not CSS values — "barely rounded corners" not "border-radius: 4px"
4. Describe the desired "feel" alongside specific measurements — "gallery-like silence between sections" communicates the whitespace philosophy better than "margin-bottom: 100vh"
5. Always verify that photography is doing the emotional heavy-lifting — if the UI itself feels "designed," it's too much
open-design/design-systems/tesla/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Tesla Usage
Design System 2.0 package guide for OpenDesign agents and reviewers.
## Read Order
1. Read this file first to understand the package contract.
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
5. Inspect `preview/` pages when a visual sanity check is useful.
## Design Highlights
- Full-viewport hero sections (100vh) dominated by cinematic car photography with minimal overlay UI
- Near-zero UI decoration: no shadows, no gradients, no borders, no patterns anywhere on the page
- Single accent color — Electric Blue (`#3E6AE1`) — used exclusively for primary CTA buttons
- Universal Sans font family (Display + Text) unifying web, app, and in-car interfaces
## Do
- Preserve the schema token names exactly so cross-brand switching stays reliable.
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
- Reuse component groups from `components.manifest.json` before inventing new controls.
- Treat `source/` files as audit evidence for the bundled fixture backfill.
## Avoid
- Avoid raw hex values outside the copied `:root` token block.
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
open-design/design-systems/tesla/components.html
+724
View File
@@ -0,0 +1,724 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/tesla. Radical
subtraction: pure-white canvas, single Electric Blue accent,
Universal Sans typography capped at 40px, 0.33s universal
transitions, and viewport-scale whitespace as the dominant
composition device."
/>
<style>
:root {
--bg: #ffffff;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--fg: #171a20;
--fg-2: #393c41;
--muted: #5c5e62;
--meta: #8e8e8e;
--border: #d0d1d2;
--border-soft: #eeeeee;
--accent: #3e6ae1;
--accent-on: #ffffff;
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--success: #16a34a;
--warn: #eab308;
--danger: #dc2626;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px;
--text-lg: 16px;
--text-xl: 17px;
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--leading-body: 1.43;
--leading-tight: 1.20;
--tracking-display: normal;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--section-y-desktop: 120px;
--section-y-tablet: 72px;
--section-y-phone: 48px;
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 12px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--motion-fast: 250ms;
--motion-base: 330ms;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--container-max: 1383px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}
/* ─── Reset (minimal) ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg-2);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Layout primitives ─────────────────────────────────────── */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-gutter-desktop);
}
section { padding-block: var(--section-y-desktop); }
/* Tesla separates chapters by surface change, not borders
(DESIGN.md §7 — "Don't add borders to cards or containers"). */
.band-light { background: var(--bg); color: var(--fg-2); }
.band-soft { background: var(--surface); color: var(--fg-2); }
@media (max-width: 1023px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 639px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography — weight 400/500 only; no bold ever ──────── */
h1, h2, h3 {
font-family: var(--font-display);
margin: 0;
color: var(--fg);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-xl); font-weight: 500; }
p { margin: 0; }
.lead {
font-size: var(--text-2xl);
line-height: 1.35;
color: var(--fg);
font-weight: 400;
max-width: 52ch;
}
.body-muted { color: var(--muted); }
.body-meta { color: var(--meta); font-size: var(--text-sm); }
.body-sm { font-size: var(--text-sm); }
/* `.eyebrow` — tiny uppercase label. Tesla's marketing site
avoids text-transforms in the main nav and CTAs (DESIGN.md §3
Principles + §7 "Don't use uppercase text transforms"), so
the eyebrow is reserved exclusively for the small "Reference
fixture · tesla" stage-label above hero / section titles —
not a recurring component. */
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.stack-8 > * + * { margin-block-start: var(--space-8); }
/* ─── Buttons ─────────────────────────────────────────────────
* Tesla's CTA family is uniform: 200×40 minimum, 4px radius,
* weight 500 14px label, content centered via flexbox. The
* primary fills with Electric Blue; the secondary is a white
* fill on white surfaces (high-contrast against hero
* photography). DESIGN.md §4 documents the precise transition
* string `border-color 0.33s, background-color 0.33s, color
* 0.33s, box-shadow 0.25s` — we map that to var(--motion-base)
* / var(--motion-fast) so the timing is bound to tokens. No
* scale or translate on interaction (DESIGN.md §7). */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 40px;
min-width: 200px;
padding: 4px 16px;
border: 3px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition:
background-color var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn-primary {
background: var(--accent);
color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary {
background: var(--bg);
color: var(--fg-2);
border-color: var(--border);
}
.btn-secondary:hover {
background: var(--surface);
border-color: var(--meta);
}
/* ─── Nav link / text link ───────────────────────────────────
* Tertiary "Learn / Order / Experience" tier from DESIGN.md §4
* — 14px Pewter, no decoration at rest, underline on hover via
* the documented box-shadow transition. */
.text-link {
color: var(--muted);
font-size: var(--text-base);
font-weight: 400;
text-decoration: none;
transition:
box-shadow var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard);
}
.text-link:hover {
color: var(--fg);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ─── Inputs ────────────────────────────────────────────────
* DESIGN.md §4: transparent background, Carbon Dark text,
* Silver Fog placeholder. The fixture binds a faint --border
* box so the input is visible against the pale section
* background; focus tightens to --accent and adds the soft blue
* halo. Density is quiet — photography is supposed to dominate
* the page, not form chrome. */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field label {
font-size: var(--text-base);
font-weight: 500;
color: var(--fg);
}
.field input {
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.4;
outline: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input::placeholder { color: var(--meta); }
.field input:hover { border-color: var(--muted); }
.field input:focus-visible {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.field-help {
font-size: var(--text-sm);
color: var(--muted);
}
/* ─── Cards ─────────────────────────────────────────────────
* Vehicle card mirrors DESIGN.md §4: transparent background, no
* border, no shadow, content top-aligned. Categorically the
* "no chrome" card — interaction lives in the text links
* beneath the model name. */
.vehicle-card {
background: transparent;
border: none;
box-shadow: var(--elev-flat);
padding: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.vehicle-card .vehicle-image {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--radius-md);
background:
radial-gradient(80% 50% at 50% 75%, color-mix(in oklab, var(--accent), transparent 70%), transparent 70%),
var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.vehicle-card .vehicle-image svg { width: 56%; height: auto; }
.vehicle-card .vehicle-name {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
color: var(--fg);
margin: 0;
}
.vehicle-card .vehicle-links {
display: flex;
gap: var(--space-6);
}
/* ─── Badges ────────────────────────────────────────────────
* Used sparingly. Tesla's marketing site has no semantic chips,
* so we keep .badge present in the fixture for completeness
* (system-status indicator on the hero side panel) but bind it
* to the muted neutral tier by default. */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px var(--space-3);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.4;
}
.badge-success {
color: var(--success);
background: color-mix(in oklab, var(--success), transparent 90%);
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ─── Links (inline) ────────────────────────────────────────
* Tesla's body links lean on the muted Pewter tier with the
* same hover treatment as .text-link — there's no separate
* "inline" tone. We keep the global `a` rule pointed at
* --muted so inline reading copy matches DESIGN.md §4. */
a {
color: var(--muted);
text-decoration: none;
transition: color var(--motion-base) var(--ease-standard);
}
a:hover {
color: var(--fg);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ─── Kbd ─────────────────────────────────────────────────── */
kbd {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
}
/* ─── Distinctive: floating nav strip ───────────────────────
* DESIGN.md §4 — Tesla nav is "TESLA wordmark (spaced uppercase)
* on the left, five category buttons center-aligned" floating
* above the hero with no shadow, no border. The frosted-glass
* scroll state uses rgba(255,255,255,0.75) backdrop (DESIGN.md
* §6 Level 1 "Frost"); we implement that as the resting state
* so the fixture documents the canonical chrome. */
.nav {
position: sticky;
top: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.nav-inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-gutter-desktop);
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.nav-brand {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 500;
color: var(--fg);
letter-spacing: 0.4em;
}
.nav-links {
display: flex;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
}
.nav-links a {
display: inline-flex;
align-items: center;
height: 32px;
padding: 4px 16px;
border-radius: var(--radius-sm);
font-size: var(--text-base);
font-weight: 500;
color: var(--fg);
transition:
color var(--motion-base) var(--ease-standard),
background-color var(--motion-base) var(--ease-standard);
}
.nav-links a:hover {
text-decoration: none;
background: var(--surface);
}
@media (max-width: 639px) {
.nav-inner { gap: var(--space-3); padding-inline: var(--container-gutter-phone); height: 48px; }
.nav-links { gap: var(--space-1); }
.nav-links a { padding: 4px 8px; }
}
/* ─── Section-specific layout ───────────────────────────────
* Tesla heroes are full-viewport gallery moments — we lean into
* a 1:1 stacked composition with model name → subtitle → CTA
* pair (DESIGN.md §7 Do: "Center CTAs horizontally below model
* names — the vertical rhythm is model → subtitle → buttons").
* The right column is a quiet status card so the fixture
* exercises the secondary surface tier and badge. */
.hero-stage {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-12);
align-items: center;
min-height: 60vh;
}
@media (max-width: 1023px) {
.hero-stage { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; }
}
.hero-canvas {
position: relative;
border-radius: var(--radius-md);
aspect-ratio: 16 / 10;
overflow: hidden;
background:
radial-gradient(70% 50% at 70% 30%, color-mix(in oklab, var(--fg), transparent 70%), transparent 60%),
linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--surface), var(--accent) 6%) 100%);
}
.hero-canvas-label {
position: absolute;
top: var(--space-4);
left: var(--space-4);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--muted);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-start: var(--space-6);
}
.hero-meta {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg);
}
/* Features: three centered "vehicle" cards. Tesla's nav-panel
pattern from DESIGN.md §4 — 3 columns, transparent cards,
model name + text-link pair. */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
@media (max-width: 1023px) {
.features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
.features-grid { grid-template-columns: 1fr; }
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: start;
}
@media (max-width: 1023px) {
.form-row { grid-template-columns: 1fr; gap: var(--space-8); }
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 420px;
}
.form-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-start: var(--space-2);
}
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
</style>
</head>
<body>
<!-- ════════════════════════════════════════════════════════════
NAV — TESLA wordmark left (spaced letters), five centered
category buttons, three icon-like links right. Floats over
the hero with a frosted-glass backdrop (DESIGN.md §4 §6).
═══════════════════════════════════════════════════════════════ -->
<header class="nav" data-od-id="nav">
<div class="nav-inner">
<span class="nav-brand">TESLA</span>
<nav aria-label="Primary">
<ul class="nav-links">
<li><a href="#hero">Vehicles</a></li>
<li><a href="#features">Energy</a></li>
<li><a href="#form">Charging</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- ════════════════════════════════════════════════════════════
HERO — exercises: h1 (40px display, normal tracking),
.lead (22px promo tier), .btn-primary (Electric Blue) paired
with .btn-secondary (white), kbd, .badge-success. Stacked
composition with the rhythm DESIGN.md §7 prescribes:
model name → subtitle → CTA pair. Right column carries the
system-status card so the fixture exercises --surface,
--border, and the badge tier without polluting the hero
with chrome.
═══════════════════════════════════════════════════════════════ -->
<section class="band-light" data-od-id="hero" id="hero">
<div class="container">
<div class="hero-stage">
<div class="stack-6">
<p class="eyebrow">Reference fixture · tesla</p>
<h1>Model Reference</h1>
<p class="lead">
Accelerating the world's transition to sustainable
energy — distilled into fifty-six tokens, one accent
color, and the white space between every section.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">Order Now</a>
<a href="./DESIGN.md" class="btn btn-secondary">View Inventory</a>
</div>
</div>
<aside class="hero-canvas" aria-label="Hero photography placeholder">
<span class="hero-canvas-label">Photography canvas · 100vh</span>
</aside>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
FEATURES — band switches to Light Ash (--surface), three
transparent "vehicle" cards that mirror the DESIGN.md §4
nav-panel pattern: image placeholder, centered model name
in Universal Sans Display, two text links beneath. No
shadow, no border, no card background — interaction lives
in the .text-link tier only.
═══════════════════════════════════════════════════════════════ -->
<section class="band-soft" data-od-id="features" id="features">
<div class="container">
<div class="stack-3" style="max-width: 640px">
<p class="eyebrow">The lineup</p>
<h2>Three vehicles. One typography stack. Zero shadows.</h2>
</div>
<div class="features-grid" style="margin-block-start: var(--space-12)">
<article class="vehicle-card">
<div class="vehicle-image" aria-hidden="true">
<svg viewBox="0 0 200 80" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M14 56h172l-14-22-26-12H46l-22 14L14 56z" />
<circle cx="58" cy="60" r="10" fill="var(--bg)" />
<circle cx="148" cy="60" r="10" fill="var(--bg)" />
</svg>
</div>
<h3 class="vehicle-name">Model S</h3>
<div class="vehicle-links">
<a href="./tokens.css" class="text-link">Learn</a>
<a href="./DESIGN.md" class="text-link">Order</a>
</div>
</article>
<article class="vehicle-card">
<div class="vehicle-image" aria-hidden="true">
<svg viewBox="0 0 200 80" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M14 56h172l-12-28-30-14H50l-24 18L14 56z" />
<circle cx="58" cy="60" r="10" fill="var(--bg)" />
<circle cx="148" cy="60" r="10" fill="var(--bg)" />
</svg>
</div>
<h3 class="vehicle-name">Model 3</h3>
<div class="vehicle-links">
<a href="./tokens.css" class="text-link">Learn</a>
<a href="./DESIGN.md" class="text-link">Order</a>
</div>
</article>
<article class="vehicle-card">
<div class="vehicle-image" aria-hidden="true">
<svg viewBox="0 0 200 80" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M14 56h172l-10-26-28-16H48l-22 18L14 56z" />
<circle cx="58" cy="60" r="10" fill="var(--bg)" />
<circle cx="148" cy="60" r="10" fill="var(--bg)" />
</svg>
</div>
<h3 class="vehicle-name">Model Y</h3>
<div class="vehicle-links">
<a href="./tokens.css" class="text-link">Learn</a>
<a href="./DESIGN.md" class="text-link">Order</a>
</div>
</article>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
FORM — exercises: .field, input :focus-visible (border
tightens to --accent + the soft Electric Blue halo),
.btn-primary (the same 200×40 CTA from the hero — no new
token introduced), .btn-secondary, .field-help. Band
returns to white so the form reads as a calm transactional
moment rather than a hero.
═══════════════════════════════════════════════════════════════ -->
<section class="band-light" data-od-id="form" id="form">
<div class="container">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Schedule a drive</p>
<h2>Quiet form. Loud product.</h2>
<p class="body-muted" style="max-width: 52ch">
Inputs inherit the same token block — a hairline Pale
Silver edge, Carbon Dark text, the focus halo at three
pixels of soft Electric Blue. Press
<kbd>↵</kbd> to confirm; the rest of the page stays
out of the way.
</p>
<div class="row-between" style="max-width: 360px">
<span class="body-sm">Test-drive availability</span>
<span class="badge badge-success">
<span class="badge-dot" aria-hidden="true"></span>
Open
</span>
</div>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Work email</label>
<input
id="email"
type="email"
placeholder="[email protected]"
autocomplete="email"
required
/>
<p class="field-help">
We'll only contact you to confirm the appointment.
</p>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
Schedule a Drive
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
<button type="button" class="btn btn-secondary">
View Inventory
</button>
</div>
</form>
</div>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/components.manifest.json
+515
View File
@@ -0,0 +1,515 @@
{
"schemaVersion": 1,
"brandId": "tesla",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Tesla — reference components",
"description": "Reference fixture for design-systems/tesla. Radical subtraction: pure-white canvas, single Electric Blue accent, Universal Sans typography capped at 40px, 0.33s universal transitions, and viewport-scale whitespace as the dominant composition device.",
"styleBlockCount": 1,
"selectorCount": 66,
"classCount": 37,
"elementCount": 29
},
"tokens": {
"declared": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--danger",
"--ease-standard",
"--elev-flat",
"--elev-raised",
"--elev-ring",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-1",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--surface-warm",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display",
"--warn"
],
"referenced": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--ease-standard",
"--elev-flat",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-1",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display"
],
"unusedDeclared": [
"--border-soft",
"--danger",
"--elev-raised",
"--elev-ring",
"--radius-lg",
"--surface-warm",
"--text-lg",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".badge",
".badge-dot",
".badge-success",
".band-light",
".band-soft",
".body-meta",
".body-muted",
".body-sm",
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".container",
".eyebrow",
".features-grid",
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field input:hover",
".field label",
".field-help",
".form",
".form-actions",
".form-row",
".hero-actions",
".hero-canvas",
".hero-canvas-label",
".hero-meta",
".hero-stage",
".icon",
".lead",
".nav",
".nav-brand",
".nav-inner",
".nav-links",
".nav-links a",
".nav-links a:hover",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
".stack-8 > * + *",
".text-link",
".text-link:hover",
".vehicle-card",
".vehicle-card .vehicle-image",
".vehicle-card .vehicle-image svg",
".vehicle-card .vehicle-links",
".vehicle-card .vehicle-name",
"*",
"*::after",
"*::before",
"a",
"a:hover",
"body",
"h1",
"h2",
"h3",
"html",
"kbd",
"p",
"section"
],
"classes": [
"badge",
"badge-dot",
"badge-success",
"band-light",
"band-soft",
"body-muted",
"body-sm",
"btn",
"btn-primary",
"btn-secondary",
"container",
"eyebrow",
"features-grid",
"field",
"field-help",
"form",
"form-actions",
"form-row",
"hero-actions",
"hero-canvas",
"hero-canvas-label",
"hero-stage",
"icon",
"lead",
"nav",
"nav-brand",
"nav-inner",
"nav-links",
"row-between",
"stack-3",
"stack-4",
"stack-6",
"text-link",
"vehicle-card",
"vehicle-image",
"vehicle-links",
"vehicle-name"
],
"elements": [
"a",
"article",
"aside",
"body",
"button",
"circle",
"div",
"form",
"h1",
"h2",
"h3",
"head",
"header",
"html",
"input",
"kbd",
"label",
"li",
"main",
"meta",
"nav",
"p",
"path",
"section",
"span",
"style",
"svg",
"title",
"ul"
],
"groups": [
{
"id": "buttons",
"label": "Buttons and calls to action",
"present": true,
"selectors": [
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible"
],
"classes": [
"btn",
"btn-primary",
"btn-secondary"
],
"elements": [
"button"
],
"tokenReferences": [
"--accent",
"--accent-active",
"--accent-on",
"--ease-standard",
"--font-body",
"--meta",
"--motion-base",
"--motion-fast",
"--radius-sm",
"--space-2",
"--surface",
"--text-base"
]
},
{
"id": "inputs",
"label": "Form fields and controls",
"present": true,
"selectors": [
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field input:hover",
".field label",
".field-help",
".hero-canvas-label"
],
"classes": [
"field",
"field-help",
"form",
"form-actions",
"form-row"
],
"elements": [
"form",
"input",
"label"
],
"tokenReferences": [
"--accent",
"--fg",
"--focus-ring",
"--meta",
"--text-base"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": false,
"selectors": [],
"classes": [],
"elements": [],
"tokenReferences": []
},
{
"id": "badges",
"label": "Badges, chips, and status labels",
"present": true,
"selectors": [
".badge",
".badge-dot",
".badge-success"
],
"classes": [
"badge",
"badge-dot",
"badge-success"
],
"elements": [],
"tokenReferences": [
"--success"
]
},
{
"id": "links",
"label": "Links and inline actions",
"present": true,
"selectors": [
".nav-links a",
".nav-links a:hover",
"a",
"a:hover"
],
"classes": [],
"elements": [
"a"
],
"tokenReferences": [
"--ease-standard",
"--motion-base",
"--muted",
"--surface"
]
},
{
"id": "keyboard",
"label": "Keyboard hints",
"present": true,
"selectors": [
"kbd"
],
"classes": [],
"elements": [
"kbd"
],
"tokenReferences": [
"--bg",
"--border",
"--fg",
"--font-mono",
"--radius-sm",
"--text-xs"
]
},
{
"id": "icons",
"label": "Icon slots",
"present": true,
"selectors": [
".icon"
],
"classes": [
"icon"
],
"elements": [
"svg"
],
"tokenReferences": []
},
{
"id": "typography",
"label": "Typography scale and text utilities",
"present": true,
"selectors": [
".body-muted",
".body-sm",
".eyebrow",
".lead",
"h1",
"h2",
"h3"
],
"classes": [
"body-muted",
"body-sm",
"eyebrow",
"lead"
],
"elements": [
"h1",
"h2",
"h3",
"p"
],
"tokenReferences": [
"--fg",
"--font-display",
"--leading-tight",
"--muted",
"--text-3xl",
"--text-sm",
"--tracking-display"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".nav",
".nav-brand",
".nav-inner",
".nav-links",
".nav-links a",
".nav-links a:hover",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
".stack-8 > * + *",
"section"
],
"classes": [
"container",
"features-grid",
"row-between",
"stack-3",
"stack-4",
"stack-6"
],
"elements": [
"header",
"main",
"nav",
"section"
],
"tokenReferences": [
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--space-2",
"--space-3",
"--space-6",
"--surface"
]
}
],
"literals": {
"colorExpressions": 5,
"pixelValues": 36,
"hardcodedFontFamilies": 10
}
}
open-design/design-systems/tesla/design-tokens.json
+701
View File
@@ -0,0 +1,701 @@
{
"schemaVersion": 1,
"format": "od-design-tokens/v1",
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"source": {
"tokensCss": "tokens.css",
"tokenContractReport": "source/token-contract.report.json"
},
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 1,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:108"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"value": "#f4f4f4",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:109"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:110"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"value": "#171a20",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:119"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"value": "#393c41",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"value": "#5c5e62",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:121"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"value": "#8e8e8e",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--meta"
},
{
"name": "--border",
"value": "#d0d1d2",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:131"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"value": "#eeeeee",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:132"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"value": "#3e6ae1",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"value": "#ffffff",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:142"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"value": "#16a34a",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:158"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#eab308",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:159"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#dc2626",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:160"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"Universal Sans Display\", -apple-system, Arial, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:168"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "\"Universal Sans Text\", -apple-system, Arial, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"type": "fontFamily",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--font-mono"
},
{
"name": "--text-xs",
"value": "11px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:179"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"value": "12px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:180"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"value": "14px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:181"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "17px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:183"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "22px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:184"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"value": "28px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:185"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "40px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:186"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"value": "1.43",
"type": "number",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:191"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.20",
"type": "number",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:192"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"value": "normal",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:199"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:204"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"value": "8px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:205"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"value": "16px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:207"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"value": "20px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:208"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"value": "24px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:209"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"value": "32px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:210"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"value": "48px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:211"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"value": "120px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"value": "72px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:220"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"value": "48px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:221"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:234"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:235"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:236"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"value": "9999px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:237"
],
"sourceName": "--radius-pill"
},
{
"name": "--elev-flat",
"value": "none",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:250"
],
"sourceName": "--elev-flat"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:251"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "0 2px 8px rgba(0, 0, 0, 0.05)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:252"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:258"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"value": "250ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:271"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"value": "330ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:272"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.5, 0, 0, 0.75)",
"type": "cubicBezier",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:273"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"value": "1383px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:281"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:282"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:283"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:284"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/tesla/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "tesla",
"name": "Tesla",
"category": "Automotive",
"description": "Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
"source": {
"type": "bundled",
"origin": "OpenDesign curated bundled fixture"
},
"files": {
"design": "DESIGN.md",
"tokens": "tokens.css",
"designTokens": "design-tokens.json",
"tailwind": "tailwind-v4.css",
"components": "components.html"
},
"usage": "USAGE.md",
"componentsManifest": "components.manifest.json",
"importMode": "normalized",
"craft": {
"applies": [],
"suggested": [
"color",
"accessibility-baseline"
],
"exemptions": []
},
"preview": {
"dir": "preview",
"pages": [
{
"path": "preview/colors.html",
"role": "colors",
"title": "Colors"
},
{
"path": "preview/typography.html",
"role": "typography",
"title": "Typography"
},
{
"path": "preview/spacing.html",
"role": "spacing",
"title": "Spacing"
}
]
},
"sourceFiles": {
"evidence": "source/evidence.md",
"tokens": "source/tokens.source.json",
"report": "source/token-contract.report.json"
}
}
open-design/design-systems/tesla/preview/colors.html
+39
View File
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla colors</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
.color { height: 88px; background: var(--value); }
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
</style>
</head>
<body>
<main>
<h1>Color roles</h1>
<section class="grid">
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/preview/spacing.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla spacing</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
</style>
</head>
<body>
<main>
<h1>Spacing and radius</h1>
<section class="stack">
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
</section>
<section class="radii">
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
<article style="border-radius: var(--radius-md)">--radius-md</article>
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/preview/typography.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla typography</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
</style>
</head>
<body>
<main>
<h1>Typography</h1>
<section class="type-stack">
<p class="eyebrow">Automotive</p>
<h2>Display sample for Tesla</h2>
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Tesla Source Evidence
## Source Scope
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
It does not claim a fresh crawl of the original upstream brand repository or website.
## Included Fixture Files
- design-systems/tesla/DESIGN.md
- design-systems/tesla/tokens.css
- design-systems/tesla/components.html
## Token Contract
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
open-design/design-systems/tesla/source/token-contract.report.json
+641
View File
@@ -0,0 +1,641 @@
{
"schemaVersion": 1,
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"sourceScope": "open-design-bundled-fixture",
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 1,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:108"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"layer": "A1-identity",
"value": "#f4f4f4",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:109"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"layer": "B-slot",
"value": "var(--surface)",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:110"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"layer": "A1-identity",
"value": "#171a20",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:119"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"layer": "B-slot",
"value": "#393c41",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"layer": "A1-identity",
"value": "#5c5e62",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:121"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"layer": "B-slot",
"value": "#8e8e8e",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--meta"
},
{
"name": "--border",
"layer": "A1-identity",
"value": "#d0d1d2",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:131"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"layer": "B-slot",
"value": "#eeeeee",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:132"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"layer": "A1-identity",
"value": "#3e6ae1",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"layer": "A2",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:142"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"layer": "A2",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"layer": "A2",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"layer": "A2",
"value": "#16a34a",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:158"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#eab308",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:159"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#dc2626",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:160"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"Universal Sans Display\", -apple-system, Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:168"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "\"Universal Sans Text\", -apple-system, Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"layer": "A2",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--font-mono"
},
{
"name": "--text-xs",
"layer": "A1-structure",
"value": "11px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:179"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"layer": "A1-structure",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:180"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"layer": "A1-structure",
"value": "14px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:181"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "17px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:183"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "22px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:184"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"layer": "A1-structure",
"value": "28px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:185"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "40px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:186"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"layer": "A1-structure",
"value": "1.43",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:191"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.20",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:192"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"layer": "A1-structure",
"value": "normal",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:199"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:204"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"layer": "A2",
"value": "8px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:205"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"layer": "A2",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:207"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"layer": "A2",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:208"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"layer": "A2",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:209"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"layer": "A2",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:210"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"layer": "A2",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:211"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"layer": "A1-structure",
"value": "120px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"layer": "A1-structure",
"value": "72px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:220"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:221"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:234"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:235"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:236"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"layer": "A2",
"value": "9999px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:237"
],
"sourceName": "--radius-pill"
},
{
"name": "--elev-flat",
"layer": "A2",
"value": "none",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:250"
],
"sourceName": "--elev-flat"
},
{
"name": "--elev-ring",
"layer": "A2",
"value": "0 0 0 1px var(--border)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:251"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "0 2px 8px rgba(0, 0, 0, 0.05)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:252"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"layer": "A2",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:258"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"layer": "A2",
"value": "250ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:271"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"layer": "A2",
"value": "330ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:272"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"layer": "A2",
"value": "cubic-bezier(0.5, 0, 0, 0.75)",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:273"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"layer": "A1-structure",
"value": "1383px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:281"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:282"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:283"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"layer": "A1-structure",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:284"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/tesla/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "tesla",
"files": [
"DESIGN.md",
"tokens.css",
"components.html"
],
"generatedAt": "2026-06-06T00:00:00.000Z",
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"layer": "A1-identity",
"source": "tokens.css:108"
},
{
"name": "--surface",
"value": "#f4f4f4",
"layer": "A1-identity",
"source": "tokens.css:109"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"layer": "B-slot",
"source": "tokens.css:110"
},
{
"name": "--fg",
"value": "#171a20",
"layer": "A1-identity",
"source": "tokens.css:119"
},
{
"name": "--fg-2",
"value": "#393c41",
"layer": "B-slot",
"source": "tokens.css:120"
},
{
"name": "--muted",
"value": "#5c5e62",
"layer": "A1-identity",
"source": "tokens.css:121"
},
{
"name": "--meta",
"value": "#8e8e8e",
"layer": "B-slot",
"source": "tokens.css:122"
},
{
"name": "--border",
"value": "#d0d1d2",
"layer": "A1-identity",
"source": "tokens.css:131"
},
{
"name": "--border-soft",
"value": "#eeeeee",
"layer": "B-slot",
"source": "tokens.css:132"
},
{
"name": "--accent",
"value": "#3e6ae1",
"layer": "A1-identity",
"source": "tokens.css:141"
},
{
"name": "--accent-on",
"value": "#ffffff",
"layer": "A2",
"source": "tokens.css:142"
},
{
"name": "--accent-hover",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"layer": "A2",
"source": "tokens.css:149"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"layer": "A2",
"source": "tokens.css:150"
},
{
"name": "--success",
"value": "#16a34a",
"layer": "A2",
"source": "tokens.css:158"
},
{
"name": "--warn",
"value": "#eab308",
"layer": "A2",
"source": "tokens.css:159"
},
{
"name": "--danger",
"value": "#dc2626",
"layer": "A2",
"source": "tokens.css:160"
},
{
"name": "--font-display",
"value": "\"Universal Sans Display\", -apple-system, Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:168"
},
{
"name": "--font-body",
"value": "\"Universal Sans Text\", -apple-system, Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:169"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"layer": "A2",
"source": "tokens.css:170"
},
{
"name": "--text-xs",
"value": "11px",
"layer": "A1-structure",
"source": "tokens.css:179"
},
{
"name": "--text-sm",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:180"
},
{
"name": "--text-base",
"value": "14px",
"layer": "A1-structure",
"source": "tokens.css:181"
},
{
"name": "--text-lg",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:182"
},
{
"name": "--text-xl",
"value": "17px",
"layer": "A1-structure",
"source": "tokens.css:183"
},
{
"name": "--text-2xl",
"value": "22px",
"layer": "A1-structure",
"source": "tokens.css:184"
},
{
"name": "--text-3xl",
"value": "28px",
"layer": "A1-structure",
"source": "tokens.css:185"
},
{
"name": "--text-4xl",
"value": "40px",
"layer": "A1-structure",
"source": "tokens.css:186"
},
{
"name": "--leading-body",
"value": "1.43",
"layer": "A1-structure",
"source": "tokens.css:191"
},
{
"name": "--leading-tight",
"value": "1.20",
"layer": "A1-structure",
"source": "tokens.css:192"
},
{
"name": "--tracking-display",
"value": "normal",
"layer": "A1-structure",
"source": "tokens.css:199"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:204"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:205"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:206"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:207"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:208"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:209"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:210"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:211"
},
{
"name": "--section-y-desktop",
"value": "120px",
"layer": "A1-structure",
"source": "tokens.css:219"
},
{
"name": "--section-y-tablet",
"value": "72px",
"layer": "A1-structure",
"source": "tokens.css:220"
},
{
"name": "--section-y-phone",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:221"
},
{
"name": "--radius-sm",
"value": "4px",
"layer": "A2",
"source": "tokens.css:234"
},
{
"name": "--radius-md",
"value": "12px",
"layer": "A2",
"source": "tokens.css:235"
},
{
"name": "--radius-lg",
"value": "12px",
"layer": "A2",
"source": "tokens.css:236"
},
{
"name": "--radius-pill",
"value": "9999px",
"layer": "A2",
"source": "tokens.css:237"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:250"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:251"
},
{
"name": "--elev-raised",
"value": "0 2px 8px rgba(0, 0, 0, 0.05)",
"layer": "A2",
"source": "tokens.css:252"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"layer": "A2",
"source": "tokens.css:258"
},
{
"name": "--motion-fast",
"value": "250ms",
"layer": "A2",
"source": "tokens.css:271"
},
{
"name": "--motion-base",
"value": "330ms",
"layer": "A2",
"source": "tokens.css:272"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.5, 0, 0, 0.75)",
"layer": "A2",
"source": "tokens.css:273"
},
{
"name": "--container-max",
"value": "1383px",
"layer": "A1-structure",
"source": "tokens.css:281"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:282"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:283"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:284"
}
]
}
open-design/design-systems/tesla/system/artifacts/deck.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Pitch deck</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Deck module</p>
<h1>Tesla Executive deck</h1>
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Pitch deck</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/artifacts/email.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Email</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Email module</p>
<h1>Tesla Email module</h1>
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Email</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/artifacts/form.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Form page</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Form module</p>
<h1>Tesla Capture form</h1>
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Form page</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/artifacts/landing.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Landing page</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Landing module</p>
<h1>Tesla Launch narrative</h1>
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Landing page</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/artifacts/newsletter.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Newsletter</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Newsletter module</p>
<h1>Tesla Editorial issue</h1>
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Newsletter</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/artifacts/poster.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - Poster</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Poster module</p>
<h1>Tesla Campaign poster</h1>
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Poster</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Tesla" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/index.html
+128
View File
@@ -0,0 +1,128 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - system assets</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<p class="eyebrow">Automotive</p>
<h1>Tesla system assets</h1>
<p class="lead">Generated preview modules for bundled official presets.</p>
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/kit.dark.html
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - dark component kit</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Automotive system</p>
<h1>Tesla component kit</h1>
<p class="lead">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/kit.html
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tesla - component kit</title>
<style>
:root {
--accent: #3e6ae1;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d0d1d2;
--border-soft: #eeeeee;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1383px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
--elev-flat: none;
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
--elev-ring: 0 0 0 1px var(--border);
--fg: #171a20;
--fg-2: #393c41;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.43;
--leading-tight: 1.20;
--meta: #8e8e8e;
--motion-base: 330ms;
--motion-fast: 250ms;
--muted: #5c5e62;
--radius-lg: 12px;
--radius-md: 12px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 120px;
--section-y-phone: 48px;
--section-y-tablet: 72px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #16a34a;
--surface: #f4f4f4;
--surface-warm: var(--surface);
--text-2xl: 22px;
--text-3xl: 28px;
--text-4xl: 40px;
--text-base: 14px;
--text-lg: 16px;
--text-sm: 12px;
--text-xl: 17px;
--text-xs: 11px;
--tracking-display: normal;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f4f4f4;
--od-text: #171a20;
--od-muted: #5c5e62;
--od-border: #d0d1d2;
--od-accent: #3e6ae1;
--od-radius: 12px;
--od-font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--od-font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Automotive system</p>
<h1>Tesla component kit</h1>
<p class="lead">Bundled OpenDesign package for Tesla, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/tesla/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#3e6ae1",
"colorPrimaryBg": "var(--surface)",
"colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)",
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
"fontSize": 14,
"borderRadius": 12
}
open-design/design-systems/tesla/tailwind-v4.css
+63
View File
@@ -0,0 +1,63 @@
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
@import "tailwindcss";
@import "./tokens.css";
@theme {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-warm: var(--surface-warm);
--color-fg: var(--fg);
--color-fg-2: var(--fg-2);
--color-muted: var(--muted);
--color-meta: var(--meta);
--color-border: var(--border);
--color-border-soft: var(--border-soft);
--color-accent: var(--accent);
--color-accent-on: var(--accent-on);
--color-accent-hover: var(--accent-hover);
--color-accent-active: var(--accent-active);
--color-success: var(--success);
--color-warn: var(--warn);
--color-danger: var(--danger);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-sans: var(--font-body);
--font-mono: var(--font-mono);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--leading-body: var(--leading-body);
--leading-tight: var(--leading-tight);
--tracking-display: var(--tracking-display);
--spacing-1: var(--space-1);
--spacing-2: var(--space-2);
--spacing-3: var(--space-3);
--spacing-4: var(--space-4);
--spacing-5: var(--space-5);
--spacing-6: var(--space-6);
--spacing-8: var(--space-8);
--spacing-12: var(--space-12);
--spacing-section-desktop: var(--section-y-desktop);
--spacing-section-tablet: var(--section-y-tablet);
--spacing-section-phone: var(--section-y-phone);
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-pill: var(--radius-pill);
--shadow-flat: var(--elev-flat);
--shadow-ring: var(--elev-ring);
--shadow-raised: var(--elev-raised);
--shadow-focus-ring: var(--focus-ring);
--duration-fast: var(--motion-fast);
--duration-base: var(--motion-base);
--ease-standard: var(--ease-standard);
--container-max: var(--container-max);
--spacing-container-desktop: var(--container-gutter-desktop);
--spacing-container-tablet: var(--container-gutter-tablet);
--spacing-container-phone: var(--container-gutter-phone);
}
open-design/design-systems/tesla/tokens.css
+285
View File
@@ -0,0 +1,285 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/tesla/tokens.css
*
* Structured token bindings for "Design System Inspired by Tesla" —
* radical subtraction, full-viewport photography, near-zero UI. This
* file is the *machine-readable* form of the values described in
* `DESIGN.md`. Agents are expected to paste the `:root { … }` block
* verbatim into the first `<style>` of every artifact they generate
* against this design system, then reference everything via
* var(--name) from then on.
*
* Why this file exists:
* DESIGN.md tells humans that Tesla uses "Pure White (#FFFFFF) as the
* canvas that lets photography breathe" and "Electric Blue (#3E6AE1)
* as the only chromatic color in the entire interface", but agents
* have to translate those prose names into the standard token names
* the lint enforces (`--bg`, `--accent`). That translation step is
* where token misuse happens. This file pre-translates the brand
* once, so agents copy structure instead of inventing it.
*
* Brand-specific schema decisions (non-obvious bindings worth flagging
* for reviewers and downstream brand authors):
* 1. --bg is pure #ffffff and --surface is Light Ash #f4f4f4 — the
* "barely perceptible shift from pure white" Tesla uses to
* differentiate alternate feature bands. --surface-warm aliases
* to var(--surface): Tesla deliberately has only two light tiers
* because photography (not surface) carries the visual richness.
* 2. The four-stop foreground ramp is real and worth keeping
* independent — Carbon Dark → Graphite → Pewter → Silver Fog map
* cleanly onto --fg / --fg-2 / --muted / --meta. DESIGN.md §2
* names every stop; collapsing any of them would flatten the
* hierarchy of headings → body → tertiary links → placeholders.
* 3. --border is bound to Pale Silver (#d0d1d2) for the rare strong
* border, --border-soft to Cloud Gray (#eeeeee) for the more
* common hairline divider. Tesla uses borders sparingly but the
* two-stop split exists in DESIGN.md §2.
* 4. --accent-hover / --accent-active use the schema black-mix
* formulas. DESIGN.md §4 says "subtle darkening of blue
* background" without pinning a hex; the schema defaults satisfy
* "subtle" without inventing a brand-specific value.
* 5. Semantic --success / --warn / --danger inherit schema defaults
* verbatim. DESIGN.md §2: "Tesla's marketing site avoids semantic
* color coding... Error, success, and warning states follow
* standard browser defaults in form contexts."
* 6. --font-display and --font-body are split across the Universal
* Sans Display / Universal Sans Text families with -apple-system
* and Arial as the published Tesla fallback chain (DESIGN.md §3).
* 7. --text-base is 14px (NOT the 16px web norm). Tesla's UI
* explicitly clusters at 14 for nav, body, button, and link —
* DESIGN.md §3 lists six rows at 14px and only two breakaway
* tiers (22px promo, 40px hero). Rebinding --text-base to 16
* would lose the brand's engineered uniformity.
* 8. --text-4xl is 40px — Tesla's hard display ceiling. DESIGN.md §7
* ("Don't use text larger than 40px on the web") makes this not
* a soft cap but an identity rule.
* 9. --tracking-display is `normal`. DESIGN.md §3 Principles:
* "'Normal' letter-spacing everywhere... Unlike most modern tech
* brands that use negative tracking for headlines, Tesla uses
* default letter-spacing at every level." Most brands in the
* schema bind a negative em value here; Tesla deliberately does
* not.
* 10. --section-y-desktop is 120px (vs schema default 80, Apple 100).
* DESIGN.md §1 + §5 — "viewport-height sections" and "whitespace
* as a luxury signal" mean Tesla's chapter breathing room is the
* most generous in the schema after the dedicated print brands.
* 11. --radius-sm / --radius-md / --radius-lg are 4 / 12 / 12 (vs
* schema 8 / 12 / 16). DESIGN.md §5 defines a deliberate Tesla
* radius scale: 0 default, 4 buttons, 12 category cards, and
* "no larger tier" — we bind --radius-lg to the same 12 because
* Tesla has no softer card silhouette to address.
* 12. --elev-raised is the lightest in the schema (rgba 0.05).
* DESIGN.md §6: "Tesla's approach to elevation is essentially
* 'none.'... Subtle shadow hints on rare hover states use
* rgba(0,0,0,0.05)." The schema default (oklab fg-mix) reads as
* Material weight by comparison; we hand-pick a flatter value.
* 13. --motion-fast / --motion-base / --ease-standard override the
* schema. DESIGN.md §1 + §4 — "0.33s cubic-bezier transitions as
* the universal timing for all interactive state changes" and a
* documented `box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75)`
* curve. We bind base to 330ms (Tesla's universal duration),
* fast to 250ms (the box-shadow micro-state), and easing to the
* published Tesla text-link curve.
* 14. --container-max is 1383px. DESIGN.md §5: "Max width:
* approximately 1383px". The number itself is a brand-specific
* detail (most marketing sites round to 1280 / 1440); we keep
* the literal value rather than collapse to the nearest round
* number.
*
* Contract sources:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* (TOKEN_SCHEMA — every name below appears there or as an
* explicit B-slot alias.)
* - A2 fallback values: design-systems/_schema/defaults.css
* (We override --motion-fast, --motion-base, --ease-standard,
* --elev-raised, --radius-sm, --radius-lg; the rest match
* defaults.)
*
* Keep this file additive: never invent token names not also documented
* in DESIGN.md or the shared schema.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (2 levels) ──────────────────────────────────────────
* Pure white retail canvas with a single "barely perceptible" Light
* Ash tier for alternate bands. --surface-warm aliases to surface
* because Tesla has no third light tier — photography, not surface,
* carries the visual richness. */
--bg: #ffffff; /* Pure White — the canvas that lets photography breathe */
--surface: #f4f4f4; /* Light Ash — alternate feature band, barely a shift */
--surface-warm: var(--surface); /* alias — Tesla has only two light tiers */
/* ─── Foreground ramp (4 levels) ─────────────────────────────────
* Tesla's neutrals are explicitly named in DESIGN.md §2: Carbon Dark
* → Graphite → Pewter → Silver Fog. We bind all four — the ramp is
* genuinely walked across model names (Carbon Dark), body copy
* (Graphite), tertiary "Learn / Order" links (Pewter), and form
* placeholders / disabled (Silver Fog). Collapsing any stop would
* flatten the hierarchy. */
--fg: #171a20; /* Carbon Dark — headings, nav, model names */
--fg-2: #393c41; /* Graphite — default body / paragraph color */
--muted: #5c5e62; /* Pewter — tertiary links (Learn, Order, Experience) */
--meta: #8e8e8e; /* Silver Fog — placeholders, disabled states */
/* ─── Border (2 levels) ──────────────────────────────────────────
* Tesla uses borders sparingly — containers are usually defined by
* spacing, not lines (DESIGN.md §7: "Don't add borders to cards or
* containers"). When borders appear, --border is the stronger
* delineation (Pale Silver, used on rare hairlines and field
* outlines) and --border-soft is the lighter divider (Cloud Gray,
* used between dense rows). */
--border: #d0d1d2; /* Pale Silver — strong border, field outline */
--border-soft: #eeeeee; /* Cloud Gray — light divider between rows */
/* ─── Accent ──────────────────────────────────────────────────────
* Electric Blue — Tesla's only chromatic move. DESIGN.md §2: "stands
* alone as the only chromatic color in the entire interface" and §7
* "Don't use more than one chromatic color besides the blue CTA"
* make this a strict one-color brand. The schema's ≤2-visible-uses
* cap aligns naturally with Tesla's "Use Electric Blue exclusively
* for primary CTAs". */
--accent: #3e6ae1; /* Electric Blue — sole CTA color, sole accent */
--accent-on: #ffffff; /* white label on the blue fill */
/* ─── Accent states ───────────────────────────────────────────────
* DESIGN.md §4 documents "subtle darkening of blue background" on
* hover without pinning specific hex values. We inherit the schema
* black-mix formulas — subtle darkening is exactly what these
* formulas produce. */
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ────────────────────────────────────────────────────
* DESIGN.md §2: "Tesla's marketing site avoids semantic color coding
* (no green/red/yellow status indicators). Error, success, and
* warning states follow standard browser defaults in form contexts."
* Inherit the schema defaults; reserve under 5% of any surface area
* regardless. */
--success: #16a34a;
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ──────────────────────────────────────────────────
* Universal Sans Display / Universal Sans Text — the custom family
* that replaced Gotham to unify Tesla's website, mobile app, and
* vehicle interface. We mirror the published Tesla fallback chain
* (-apple-system, Arial) so artifacts rendered on non-Tesla clients
* land on the closest practical substitute. */
--font-display: "Universal Sans Display", -apple-system, Arial, sans-serif;
--font-body: "Universal Sans Text", -apple-system, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
* Tesla's reading baseline is 14px (NOT the 16px web norm); nav,
* body, button, sub-link all sit at 14. Only two tiers break away
* upward — 22px promo and 40px hero — and DESIGN.md §7 hard-caps
* web text at 40px ("Don't use text larger than 40px on the web").
* The 28px mid-display tier honors the §8 mobile hero scale
* ("hero text scales to ~28px"). */
--text-xs: 11px; /* micro — fine print below the 14px baseline */
--text-sm: 12px; /* small UI labels */
--text-base: 14px; /* Tesla's reading baseline (nav, body, button, link) */
--text-lg: 16px; /* Category Label — white text on category cards */
--text-xl: 17px; /* Product Name — model names in nav panel and cards */
--text-2xl: 22px; /* Promo Text — "0% APR Available" on hero */
--text-3xl: 28px; /* mid display — mobile hero scale */
--text-4xl: 40px; /* Hero Title — Tesla's hard display ceiling */
/* DESIGN.md §3 hierarchy table: hero 40/48 (1.20), body 14/20
* (1.43). Two values for the whole system — Tesla's leading
* envelope is as restrained as its weight set. */
--leading-body: 1.43; /* SF Pro Text body, 17px */
--leading-tight: 1.20; /* Hero Title 40/48 */
/* DESIGN.md §3 Principles: "'Normal' letter-spacing everywhere.
* Unlike most modern tech brands that use negative tracking for
* headlines, Tesla uses default letter-spacing at every level."
* Most schema brands bind a negative em value here; Tesla
* deliberately does not. */
--tracking-display: normal;
/* ─── Spacing ─────────────────────────────────────────────────────
* 8px base grid (DESIGN.md §5). Schema defaults match Tesla's scale
* exactly — no overrides needed. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* ─── Section rhythm ──────────────────────────────────────────────
* Tesla uses viewport-height sections (DESIGN.md §1 §5) and
* whitespace as a luxury signal. Token-level padding is the most
* generous in the schema — 120 desktop is 50% wider than the schema
* default (80) and 20% wider than Apple's 100. The full-viewport
* 100vh rhythm itself lives in components. */
--section-y-desktop: 120px;
--section-y-tablet: 72px;
--section-y-phone: 48px;
/* ─── Radius ──────────────────────────────────────────────────────
* DESIGN.md §5 documents Tesla's deliberate three-stop scale:
* 0px most elements (sharp default)
* 4px buttons (primary, secondary, nav items)
* ~12px category cards (the largest sanctioned rounding)
* 50% carousel dots
*
* We bind --radius-sm to 4 (buttons), --radius-md to 12 (category
* cards), and --radius-lg to 12 as well — Tesla has no softer card
* tier beyond category. The schema's 16px lg default would invent a
* silhouette Tesla never uses. Pill stays at 9999 for dots / chips. */
--radius-sm: 4px; /* buttons — "barely perceptible rounding" */
--radius-md: 12px; /* category cards — the largest sanctioned */
--radius-lg: 12px; /* same — Tesla has no third radius tier */
--radius-pill: 9999px; /* carousel dots, badges */
/* ─── Elevation ───────────────────────────────────────────────────
* DESIGN.md §6: "Tesla's approach to elevation is essentially
* 'none.'" Three sanctioned levels but flatter than any other
* schema brand:
* - flat → none (the default; photography carries depth)
* - ring → 0 0 0 1px var(--border) (rare border-led containment)
* - raised → 0 2px 8px rgba(0,0,0,0.05) (DESIGN.md §6 Level 3
* "Subtle" — minimal shadow hints on rare hover states)
*
* The schema default oklab-mix raised reads as Material weight by
* comparison; Tesla flattens it to the lightest credible value. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 2px 8px rgba(0, 0, 0, 0.05);
/* ─── Focus ring ──────────────────────────────────────────────────
* Electric Blue ring at the accent — Tesla's single chromatic
* signal doubles as the focus halo. Schema default formula is
* already the correct color through var(--accent). */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
/* ─── Motion ──────────────────────────────────────────────────────
* DESIGN.md §1 §4 — "0.33s cubic-bezier transitions as the
* universal timing for all interactive state changes." The
* documented Tesla Text Link curve is cubic-bezier(0.5, 0, 0,
* 0.75); we bind that as --ease-standard.
* - fast → 250ms (the box-shadow micro-state from §4)
* - base → 330ms (Tesla's universal 0.33s)
*
* No brand in the schema runs base this slow; Tesla's "consistency
* in motion is as important as consistency in color" (DESIGN.md §7)
* earns the override. */
--motion-fast: 250ms;
--motion-base: 330ms;
--ease-standard: cubic-bezier(0.5, 0, 0, 0.75);
/* ─── Layout ──────────────────────────────────────────────────────
* DESIGN.md §5: "Max width: approximately 1383px (full viewport
* width used for most content)." We keep the literal value rather
* than collapse to a rounder number — the figure itself is a Tesla
* artifact. Gutters step 24 → 16 → 12 on a clean 8px scale; mobile
* keeps horizontal padding tight so photography stays full-bleed. */
--container-max: 1383px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}