EVIP

Design system

Tokens and components

Everything in app/globals.css and components/ui, shown in both themes. Use the header toggle to switch the page chrome.

light

.light

Colour

  • --background
  • --foreground
  • --card
  • --popover
  • --primary
  • --secondary
  • --muted
  • --accent
  • --destructive
  • --success
  • --warning
  • --info
  • --border
  • --input
  • --ring

Radius

  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-xl
  • --radius-2xl

Type scale

  • text-display · 72 / 1 / −0.03emBattery: Tesla estimates 91% health
  • text-h1 · 48 / 1.05 / −0.025emBattery: Tesla estimates 91% health
  • text-h2 · 32 / 1.15 / −0.02emBattery: Tesla estimates 91% health
  • text-h3 · 24 / 1.25 / −0.015emBattery: Tesla estimates 91% health
  • text-lead · 20 / 1.6Battery: Tesla estimates 91% health
  • text-body · 16 / 1.6Battery: Tesla estimates 91% health
  • text-small · 14 / 1.5Battery: Tesla estimates 91% health
  • text-caption · 12 / 1.4 / +0.02emMEASURED · TESLA-REPORTED · OUR ESTIMATE

Button

Badge

DefaultSecondaryOutlineDestructiveMeasuredTesla-reportedOur estimate

Input

Card

Battery
Tesla-estimated health and usable capacity
Tesla-reported
91%Placeholder value for layout only
Snapshot · placeholder date
Loading
Skeleton state

Separator

Battery
Warranty
Alerts

Tabs

For buyers checking a used Tesla before paying.

Tooltip, Dialog, Sheet

Skeleton

dark

.dark

Colour

  • --background
  • --foreground
  • --card
  • --popover
  • --primary
  • --secondary
  • --muted
  • --accent
  • --destructive
  • --success
  • --warning
  • --info
  • --border
  • --input
  • --ring

Radius

  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-xl
  • --radius-2xl

Type scale

  • text-display · 72 / 1 / −0.03emBattery: Tesla estimates 91% health
  • text-h1 · 48 / 1.05 / −0.025emBattery: Tesla estimates 91% health
  • text-h2 · 32 / 1.15 / −0.02emBattery: Tesla estimates 91% health
  • text-h3 · 24 / 1.25 / −0.015emBattery: Tesla estimates 91% health
  • text-lead · 20 / 1.6Battery: Tesla estimates 91% health
  • text-body · 16 / 1.6Battery: Tesla estimates 91% health
  • text-small · 14 / 1.5Battery: Tesla estimates 91% health
  • text-caption · 12 / 1.4 / +0.02emMEASURED · TESLA-REPORTED · OUR ESTIMATE

Button

Badge

DefaultSecondaryOutlineDestructiveMeasuredTesla-reportedOur estimate

Input

Card

Battery
Tesla-estimated health and usable capacity
Tesla-reported
91%Placeholder value for layout only
Snapshot · placeholder date
Loading
Skeleton state

Separator

Battery
Warranty
Alerts

Tabs

For buyers checking a used Tesla before paying.

Tooltip, Dialog, Sheet

Skeleton