Polish Pitstop

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• 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.
• Set plates, VINs, charger IDs and telemetry values in typography.code (IBM Plex Mono 14px) with font-variant-numeric: tabular-nums.
• Keep buttons and inputs at 44px height and leave at least space.2 (8px) between adjacent tappable controls.
• Pair success, warning and destructive fills with an icon or text label so status never relies on color alone.
• 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.
• 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 use black or untinted grey shadows; use only shadow.sm, shadow.md and shadow.lg, which are teal-tinted.
• Don't use brand.500 or lighter for ring or text in light mode; it falls toward 3:1 against background.
• Don't set Epilogue below 31px (heading-lg) or for body paragraphs; use Karla heading-md or heading-sm instead.
• Don't apply radius.none or radius.sm to buttons, inputs or cards.
• Don't place muted-foreground text on primary or accent fills; use primary-foreground or accent-foreground.
• Don't use a card shadow above shadow.sm; reserve shadow.md for popovers and shadow.lg for dialogs and sheets.
• 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).