---
version: alpha
name: Polish Pitstop
description: "Friendly, bouncy automotive UI: teal actions on cool green-grey neutrals, pill controls, round cards and Epilogue headlines."
colors:
  background: "#f3f8f6"
  foreground: "#111a18"
  card: "#ffffff"
  card-foreground: "#111a18"
  popover: "#ffffff"
  popover-foreground: "#111a18"
  primary: "#007d66"
  primary-foreground: "#ffffff"
  secondary: "#e4eeea"
  secondary-foreground: "#1f2a27"
  muted: "#e4eeea"
  muted-foreground: "#465853"
  accent: "#c8f5e6"
  accent-foreground: "#0a3f36"
  destructive: "#c2284f"
  destructive-foreground: "#ffffff"
  success: "#2a6b1a"
  success-foreground: "#ffffff"
  warning: "#ffe085"
  warning-foreground: "#4b3200"
  border: "#cfdcd7"
  input: "#b3c4be"
  ring: "#007d66"
  dark-background: "#111a18"
  dark-foreground: "#f3f8f6"
  dark-card: "#1f2a27"
  dark-card-foreground: "#f3f8f6"
  dark-popover: "#1f2a27"
  dark-popover-foreground: "#f3f8f6"
  dark-primary: "#2ec4a0"
  dark-primary-foreground: "#052a24"
  dark-secondary: "#33423e"
  dark-secondary-foreground: "#e4eeea"
  dark-muted: "#33423e"
  dark-muted-foreground: "#b3c4be"
  dark-accent: "#0a3f36"
  dark-accent-foreground: "#c8f5e6"
  dark-destructive: "#f76a85"
  dark-destructive-foreground: "#3a0014"
  dark-success: "#5fbd45"
  dark-success-foreground: "#0d2708"
  dark-warning: "#f2b01c"
  dark-warning-foreground: "#2d1d00"
  dark-border: "#33423e"
  dark-input: "#465853"
  dark-ring: "#2ec4a0"
typography:
  display-lg:
    fontFamily: Epilogue
    fontSize: 49px
    fontWeight: 800
    lineHeight: 1.04
    letterSpacing: -0.03em
  display-md:
    fontFamily: Epilogue
    fontSize: 39px
    fontWeight: 800
    lineHeight: 1.08
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Epilogue
    fontSize: 31px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Karla
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Karla
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Karla
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Karla
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Karla
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Karla
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Karla
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
---

# Polish Pitstop

## Overview

Polish Pitstop serves car sharing, EV charging, service booking and driver-companion apps. It avoids the black, chrome and red defaults of automotive UI. Instead it uses a teal action color (brand.600 light, brand.400 dark), green-grey neutrals at hue ~170, pill buttons and Epilogue headlines. Every text pair in both modes meets WCAG AA at 4.5:1 or higher, and most pairs exceed 5:1.

Moods: playful, friendly, energetic, approachable. Built for: automotive, ev-charging, car-sharing, mobility. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

All scales share a single chroma curve. Chroma peaks at step 400–500, tapers toward 50 and 950, and drops evenly between 600 and 900 with no flat mid-steps. Brand teal sits at OKLCH hue ~170. Neutrals use the same hue at low chroma, so surfaces read as tinted on purpose rather than grey. Success sits at a yellow-green hue (~140) with the same chroma curve, so it relates to teal but never matches it. Warning is a warm amber and destructive is a raspberry crimson (~10). Both are far from teal in hue, with ΔE00 ≥ 18 in both modes. Light-mode contrast: white on primary (brand.600 #007d66) is 5.1:1, primary vs background is 4.8:1, and muted-foreground (neutral.700) on muted (neutral.100) is 6.4:1. Dark-mode contrast: primary brand.400 on background neutral.950 is 8.5:1, and muted-foreground neutral.300 on muted neutral.800 is 5.8:1.

- **Primary** `#007d66` / dark `#2ec4a0`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f3f8f6` / dark `#111a18` on `#111a18` / dark `#f3f8f6`: page surface and body text.
- **Card** `#ffffff` / dark `#1f2a27`: raised surfaces.
- **Secondary** `#e4eeea` / dark `#33423e`: secondary buttons and quiet controls.
- **Muted** `#e4eeea` / dark `#33423e` with **muted-foreground** `#465853` / dark `#b3c4be`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#c8f5e6` / dark `#0a3f36`: highlights, selected rows, badges.
- **Destructive** `#c2284f` / dark `#f76a85`, **Success** `#2a6b1a` / dark `#5fbd45`, **Warning** `#ffe085` / dark `#f2b01c`: status only, always paired with an icon or label.
- **Border** `#cfdcd7` / dark `#33423e`, **Input** `#b3c4be` / dark `#465853`, **Ring** `#007d66` / dark `#2ec4a0`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The type scale is a Major Third (1.25) built on 16px: 12, 14, 16, 20, 25, 31, 39, 49. Body-lg is 18 and label is 16, both off-scale for reading comfort. Epilogue at 700/800 sets display-lg (49), display-md (39) and heading-lg (31). Tracking tightens as size grows: -0.03em at 49px, -0.025em at 39px, -0.02em at 31px. Karla at 400–700 sets everything functional: headings md/sm, body, labels, captions, buttons, forms and tables. Body line heights are 1.5–1.6. IBM Plex Mono at 400/500 is reserved for plates, VINs, charger IDs and telemetry values.

- Display: **Epilogue** (fallback system-ui, sans-serif)
- Interface: **Karla** (fallback system-ui, sans-serif)
- Mono: **IBM Plex Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Epilogue | 49px | 1.04 | 800 |
| display-md | Epilogue | 39px | 1.08 | 800 |
| heading-lg | Epilogue | 31px | 1.15 | 700 |
| heading-md | Karla | 25px | 1.25 | 700 |
| heading-sm | Karla | 20px | 1.3 | 700 |
| body-lg | Karla | 18px | 1.6 | 400 |
| body-md | Karla | 16px | 1.55 | 400 |
| body-sm | Karla | 14px | 1.5 | 400 |
| label | Karla | 16px | 1.25 | 700 |
| caption | Karla | 12px | 1.4 | 600 |
| code | IBM Plex Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Buttons and inputs are 44px tall for gloved or one-handed use. Gaps between cards are space.4 (16px) to space.6 (24px), and card padding is space.6. Content columns max out at 1120px.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Shadows are tinted with deep teal (rgba 8,52,43), so lifted elements stay in the palette. Cards use shadow.sm plus a 1px border token, popovers use shadow.md, and dialogs and bottom sheets use shadow.lg. In dark mode, lift comes mainly from surface steps: card and popover use neutral.900 on a neutral.950 background, and borders use neutral.800.

- sm: `0 1px 3px rgba(8, 52, 43, 0.10)`
- md: `0 6px 16px -4px rgba(8, 52, 43, 0.16)`
- lg: `0 20px 44px -10px rgba(8, 52, 43, 0.24)`

## Shapes

Radii are large and round. Inputs use radius.md (14px), cards radius.lg (20px), and dialogs and sheets radius.xl (28px). Buttons and badges use radius.full. Only full-bleed images and dividers use radius.none.

Radius scale: sm 8px, md 14px, lg 20px, xl 28px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary token for exactly one main action per view, such as Book, Start charging or Unlock. Primary is brand.600 #007d66 in light mode (white text, 5.1:1) and brand.400 in dark mode (brand.950 text). Render all other buttons as secondary or ghost.
- **Do:** Use radius.full for buttons and badges, radius.md (14px) for inputs, radius.lg (20px) for cards, and radius.xl (28px) for dialogs and bottom sheets.
- **Do:** Set display-lg (49px), display-md (39px) and heading-lg (31px) in Epilogue 700/800. Set heading-md (25px), heading-sm (20px) and all UI text in Karla.
- **Do:** Set plates, VINs, charger IDs and telemetry values in typography.code (IBM Plex Mono 14px) with font-variant-numeric: tabular-nums.
- **Do:** Keep buttons and inputs at 44px height and leave at least space.2 (8px) between adjacent tappable controls.
- **Do:** Pair success, warning and destructive fills with an icon or text label so status never relies on color alone.
- **Do:** Use the accent token for selected list rows, the chosen vehicle card and active filter chips, with accent-foreground for their text. Accent is brand.100 in light mode and brand.900 in dark mode.
- **Do:** Show focus as a 2px ring token outline with a 2px offset on every interactive element, in both modes.
- **Don't:** Don't use brand teal for errors or confirmations; use the destructive (danger) and success (green) tokens.
- **Don't:** Don't use black or untinted grey shadows; use only shadow.sm, shadow.md and shadow.lg, which are teal-tinted.
- **Don't:** Don't use brand.500 or lighter for ring or text in light mode; it falls toward 3:1 against background.
- **Don't:** Don't set Epilogue below 31px (heading-lg) or for body paragraphs; use Karla heading-md or heading-sm instead.
- **Don't:** Don't apply radius.none or radius.sm to buttons, inputs or cards.
- **Don't:** Don't place muted-foreground text on primary or accent fills; use primary-foreground or accent-foreground.
- **Don't:** Don't use a card shadow above shadow.sm; reserve shadow.md for popovers and shadow.lg for dialogs and sheets.
- **Don't:** Don't use neutral.600 for muted text on muted surfaces; it drops to about 4.6:1. Use the muted-foreground token (neutral.700 light, neutral.300 dark).