---
name: "Tesla"
mode: "light"
---
# Tesla
## Visual theme and atmosphere
Cinematic, photography-first, ultra-minimal, engineering-precise.
Automotive showroom on screen — full-bleed product visuals, minimal functional interface.
## Color palette and roles
- **Pure White (#ffffff)**: Primary page backgrounds and card surfaces.
- **Onyx (#171a20)**: Primary heading text, dark button backgrounds.
- **Charcoal (#393c41)**: Primary body text, header navigation.
- **Tesla Blue (#3e6ae1)**: Primary CTAs — the single saturated color.
- **Steel (#5c5e62)**: Secondary text, footer links.
- **Off-White (#eeeeee)**: Secondary content cards, subtle dividers.
## Typography rules
- **Display**: Universal Sans Display, 500, 48px. Product titles and major headings.
- **Body**: Universal Sans Text, 400, 14px. Body copy, buttons, navigation, UI text.
- **Label**: Universal Sans Text, 500, 12px. Fine print and labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 4px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 300ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Lead every section with full-bleed high-quality product photography.
- Use Tesla Blue #3e6ae1 exclusively for primary actions like 'Order Now'.
- Maintain strict achromatic palette for all UI outside the CTA.
- Do not introduce saturated colors beyond the single blue.
---
name: "Tesla"
mode: "light"
---
# Tesla
## Visual theme and atmosphere
Cinematic, photography-first, ultra-minimal, engineering-precise.
Automotive showroom on screen — full-bleed product visuals, minimal functional interface.
## Color palette and roles
- **Pure White (#ffffff)**: Primary page backgrounds and card surfaces.
- **Onyx (#171a20)**: Primary heading text, dark button backgrounds.
- **Charcoal (#393c41)**: Primary body text, header navigation.
- **Tesla Blue (#3e6ae1)**: Primary CTAs — the single saturated color.
- **Steel (#5c5e62)**: Secondary text, footer links.
- **Off-White (#eeeeee)**: Secondary content cards, subtle dividers.
## Typography rules
- **Display**: Universal Sans Display, 500, 48px. Product titles and major headings.
- **Body**: Universal Sans Text, 400, 14px. Body copy, buttons, navigation, UI text.
- **Label**: Universal Sans Text, 500, 12px. Fine print and labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 4px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 300ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Lead every section with full-bleed high-quality product photography.
- Use Tesla Blue #3e6ae1 exclusively for primary actions like 'Order Now'.
- Maintain strict achromatic palette for all UI outside the CTA.
- Do not introduce saturated colors beyond the single blue.
---
name: "Tesla"
mode: "light"
---
# Tesla
## Visual theme and atmosphere
Cinematic, photography-first, ultra-minimal, engineering-precise.
Automotive showroom on screen — full-bleed product visuals, minimal functional interface.
## Color palette and roles
- **Pure White (#ffffff)**: Primary page backgrounds and card surfaces.
- **Onyx (#171a20)**: Primary heading text, dark button backgrounds.
- **Charcoal (#393c41)**: Primary body text, header navigation.
- **Tesla Blue (#3e6ae1)**: Primary CTAs — the single saturated color.
- **Steel (#5c5e62)**: Secondary text, footer links.
- **Off-White (#eeeeee)**: Secondary content cards, subtle dividers.
## Typography rules
- **Display**: Universal Sans Display, 500, 48px. Product titles and major headings.
- **Body**: Universal Sans Text, 400, 14px. Body copy, buttons, navigation, UI text.
- **Label**: Universal Sans Text, 500, 12px. Fine print and labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 4px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 300ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Lead every section with full-bleed high-quality product photography.
- Use Tesla Blue #3e6ae1 exclusively for primary actions like 'Order Now'.
- Maintain strict achromatic palette for all UI outside the CTA.
- Do not introduce saturated colors beyond the single blue.
---
name: "Tesla"
mode: "light"
---
# Tesla
## Visual theme and atmosphere
Cinematic, photography-first, ultra-minimal, engineering-precise.
Automotive showroom on screen — full-bleed product visuals, minimal functional interface.
## Color palette and roles
- **Pure White (#ffffff)**: Primary page backgrounds and card surfaces.
- **Onyx (#171a20)**: Primary heading text, dark button backgrounds.
- **Charcoal (#393c41)**: Primary body text, header navigation.
- **Tesla Blue (#3e6ae1)**: Primary CTAs — the single saturated color.
- **Steel (#5c5e62)**: Secondary text, footer links.
- **Off-White (#eeeeee)**: Secondary content cards, subtle dividers.
## Typography rules
- **Display**: Universal Sans Display, 500, 48px. Product titles and major headings.
- **Body**: Universal Sans Text, 400, 14px. Body copy, buttons, navigation, UI text.
- **Label**: Universal Sans Text, 500, 12px. Fine print and labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 4px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 300ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Lead every section with full-bleed high-quality product photography.
- Use Tesla Blue #3e6ae1 exclusively for primary actions like 'Order Now'.
- Maintain strict achromatic palette for all UI outside the CTA.
- Do not introduce saturated colors beyond the single blue.
---
name: "Tesla"
mode: "light"
---
# Tesla
## Visual theme and atmosphere
Cinematic, photography-first, ultra-minimal, engineering-precise.
Automotive showroom on screen — full-bleed product visuals, minimal functional interface.
## Color palette and roles
- **Pure White (#ffffff)**: Primary page backgrounds and card surfaces.
- **Onyx (#171a20)**: Primary heading text, dark button backgrounds.
- **Charcoal (#393c41)**: Primary body text, header navigation.
- **Tesla Blue (#3e6ae1)**: Primary CTAs — the single saturated color.
- **Steel (#5c5e62)**: Secondary text, footer links.
- **Off-White (#eeeeee)**: Secondary content cards, subtle dividers.
## Typography rules
- **Display**: Universal Sans Display, 500, 48px. Product titles and major headings.
- **Body**: Universal Sans Text, 400, 14px. Body copy, buttons, navigation, UI text.
- **Label**: Universal Sans Text, 500, 12px. Fine print and labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 4px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 300ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Lead every section with full-bleed high-quality product photography.
- Use Tesla Blue #3e6ae1 exclusively for primary actions like 'Order Now'.
- Maintain strict achromatic palette for all UI outside the CTA.
- Do not introduce saturated colors beyond the single blue.
