---
version: alpha
name: Turnpike Haul
description: Logistics UI with burnt-amber actions, oversized DM Serif Display headlines and warm-stone neutrals for dispatch and ops teams.
colors:
  background: "#faf7f2"
  foreground: "#1a1714"
  card: "#ffffff"
  card-foreground: "#1a1714"
  popover: "#ffffff"
  popover-foreground: "#1a1714"
  primary: "#a35800"
  primary-foreground: "#ffffff"
  secondary: "#f1ece4"
  secondary-foreground: "#2b2723"
  muted: "#f1ece4"
  muted-foreground: "#585148"
  accent: "#ffefc7"
  accent-foreground: "#482400"
  destructive: "#c02d56"
  destructive-foreground: "#ffffff"
  success: "#1a6437"
  success-foreground: "#ffffff"
  warning: "#fbe372"
  warning-foreground: "#392b00"
  border: "#e0d9cf"
  input: "#c8c0b4"
  ring: "#a35800"
  dark-background: "#1a1714"
  dark-foreground: "#faf7f2"
  dark-card: "#2b2723"
  dark-card-foreground: "#faf7f2"
  dark-popover: "#2b2723"
  dark-popover-foreground: "#faf7f2"
  dark-primary: "#f7ab26"
  dark-primary-foreground: "#2d1400"
  dark-secondary: "#403a33"
  dark-secondary-foreground: "#f1ece4"
  dark-muted: "#403a33"
  dark-muted-foreground: "#c8c0b4"
  dark-accent: "#482400"
  dark-accent-foreground: "#ffefc7"
  dark-destructive: "#f66e89"
  dark-destructive-foreground: "#390011"
  dark-success: "#5cb374"
  dark-success-foreground: "#031f10"
  dark-warning: "#d4ad12"
  dark-warning-foreground: "#221900"
  dark-border: "#403a33"
  dark-input: "#585148"
  dark-ring: "#f7ab26"
typography:
  display-lg:
    fontFamily: DM Serif Display
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.03em
  display-md:
    fontFamily: DM Serif Display
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: DM Serif Display
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.015em
  heading-md:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.012em
  heading-sm:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.006em
  body-lg:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.02em
  code:
    fontFamily: DM Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  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.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    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 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    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 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Turnpike Haul

## Overview

Turnpike Haul serves logistics products whose users are dispatchers and ops staff working long shifts. The preset uses three layers. Large DM Serif Display headlines (heading-lg 36px to display-lg 72px) set the tone. One amber action color marks the single place to act, like a loading-dock marker. Underneath sits a calm warm-stone UI in DM Sans with 48px table rows and 1px borders.

Moods: bold, energetic, confident, disciplined. Built for: logistics, supply-chain, freight. 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

Amber is the only action color. It covers primary buttons, links, ring and active nav states.

In light mode, primary is brand.600 (#a35800). It gives 5.3:1 with white text and 5.0:1 against background (neutral.50). This is up from 4.75:1 in 1.0.

In dark mode, primary is brand.400 (#f7ab26) with brand.950 text, at about 9:1. The page is a deep warm neutral.950, so the amber glows without going neon.

Neutrals are stone tinted toward the brand hue (about 35–40°), so amber reads as native. Destructive is crimson-magenta (danger.600 light, danger.400 dark), roughly 120° of hue away from amber, which keeps ΔE far above 18.

The status ramps follow the same chroma curve as brand: soft 50–200, saturated 400–600, deep 800–950.
- Warning is a warm yellow (about 48°). It sits close to the brand temperature but clearly yellower than amber (about 37°).
- Success is a slightly yellow-leaning green, so it does not turn cool against the stone surfaces.

- **Primary** `#a35800` / dark `#f7ab26`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf7f2` / dark `#1a1714` on `#1a1714` / dark `#faf7f2`: page surface and body text.
- **Card** `#ffffff` / dark `#2b2723`: raised surfaces.
- **Secondary** `#f1ece4` / dark `#403a33`: secondary buttons and quiet controls.
- **Muted** `#f1ece4` / dark `#403a33` with **muted-foreground** `#585148` / dark `#c8c0b4`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffefc7` / dark `#482400`: highlights, selected rows, badges.
- **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#1a6437` / dark `#5cb374`, **Warning** `#fbe372` / dark `#d4ad12`: status only, always paired with an icon or label.
- **Border** `#e0d9cf` / dark `#403a33`, **Input** `#c8c0b4` / dark `#585148`, **Ring** `#a35800` / dark `#f7ab26`.

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

## Typography

Weights are limited to what each family ships.
- DM Serif Display ships only weight 400. It is used for heading-lg (36px), display-md (54px) and display-lg (72px). Display steps grow by about ×1.5 (24 → 36 → 54), with display-lg capped at 72. Tracking tightens with size: −0.015, −0.025 and −0.03em.
- DM Sans (400/500/600/700) runs the functional ramp: 12, 14, 16, 18, 20 and 24px. Body text uses line heights of 1.5–1.6. heading-md is 24px/700 and heading-sm is 20px/600.
- DM Mono (400/500) is used for typography.code at 14px. It renders shipment IDs, container codes and timestamps.

- Display: **DM Serif Display** (fallback Georgia, serif)
- Interface: **DM Sans** (fallback system-ui, sans-serif)
- Mono: **DM Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | DM Serif Display | 72px | 1.02 | 400 |
| display-md | DM Serif Display | 54px | 1.05 | 400 |
| heading-lg | DM Serif Display | 36px | 1.12 | 400 |
| heading-md | DM Sans | 24px | 1.25 | 700 |
| heading-sm | DM Sans | 20px | 1.35 | 600 |
| body-lg | DM Sans | 18px | 1.6 | 400 |
| body-md | DM Sans | 16px | 1.55 | 400 |
| body-sm | DM Sans | 14px | 1.5 | 400 |
| label | DM Sans | 14px | 1.3 | 600 |
| caption | DM Sans | 12px | 1.45 | 500 |
| code | DM Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid. Content max-width is 1280px. Data tables use 48px rows with 16px (space.4) cell padding. Dashboard cards sit on a 24px (space.6) gutter and use 24px internal padding, so KPI numbers set in display-md have room.

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

## Elevation & Depth

Mostly flat with borders doing the separation work.
- Cards use a 1px border token and shadow.sm.
- shadow.md is reserved for menus and popovers, and shadow.lg for dialogs.
- All shadows are tinted with neutral.900 (rgba 43, 39, 35) instead of pure black.
- In dark mode, card (neutral.900) is one step lifter than background (neutral.950). That lift stands in for shadow.

- sm: `0 1px 2px rgba(43, 39, 35, 0.08)`
- md: `0 6px 16px -4px rgba(43, 39, 35, 0.16)`
- lg: `0 20px 44px -10px rgba(43, 39, 35, 0.28)`

## Shapes

Radii are tight to read as engineered: radius.md (8px) on buttons and inputs, radius.lg (12px) on cards, radius.xl (16px) on dialogs. radius.full is reserved for status badges such as In transit, Delayed and Delivered.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, 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 one primary button per view (for example 'Book shipment' or 'Dispatch'). Use secondary or ghost variants for every other button.
- **Do:** Show focus with a 2px ring token at 2px offset on buttons, inputs and table rows, in both modes.
- **Do:** Set display-lg (72px), display-md (54px) and heading-lg (36px) in DM Serif Display at weight 400, with the token letterSpacing (−0.03, −0.025 and −0.015em).
- **Do:** Render shipment IDs, tracking numbers, container codes and timestamps with typography.code (DM Mono 14px/400).
- **Do:** Build status badges from components.badge (24px tall, radius.full, caption type). Pair each with an icon and a text label: success = Delivered, warning = Delayed, destructive = Failed or Exception.
- **Do:** Keep table rows at least 48px tall. Right-align numeric columns with font-feature-settings: 'tnum'.
- **Do:** Separate cards with a 1px border token and shadow.sm. Reserve shadow.md for menus and popovers, and shadow.lg for dialogs.
- **Do:** In dark mode, place cards on card (neutral.900) over background (neutral.950). Don't add shadows for lift.
- **Don't:** Don't use brand.400 or brand.500 for text or icons on light surfaces. Their contrast is about 2.5:1 on neutral.50. Use brand.600 or darker.
- **Don't:** Don't use DM Serif Display below 36px (heading-lg), with synthetic bold, or in buttons, labels, inputs or table cells.
- **Don't:** Don't use destructive for anything except errors and irreversible actions such as 'Cancel shipment'. Primary amber must never signal failure.
- **Don't:** Don't use warning yellow as a brand accent or as a primary button fill. It marks Delayed and at-risk states only.
- **Don't:** Don't put white text on brand.400 or brand.500. Use brand.950 text on those bright amber fills, and white only on brand.600 and darker.
- **Don't:** Don't place more than one amber-filled element in the same toolbar, card footer or dialog.
- **Don't:** Don't use pure black (#000), cool greys or untinted shadows. Take every surface, border and text color from the neutral ramp.