Turnpike Haul

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

Color

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.

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.

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.

Elevation

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.

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.

Do

• Use one primary button per view (for example 'Book shipment' or 'Dispatch'). Use secondary or ghost variants for every other button.
• Show focus with a 2px ring token at 2px offset on buttons, inputs and table rows, in both modes.
• 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).
• Render shipment IDs, tracking numbers, container codes and timestamps with typography.code (DM Mono 14px/400).
• 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.
• Keep table rows at least 48px tall. Right-align numeric columns with font-feature-settings: 'tnum'.
• Separate cards with a 1px border token and shadow.sm. Reserve shadow.md for menus and popovers, and shadow.lg for dialogs.
• 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 use DM Serif Display below 36px (heading-lg), with synthetic bold, or in buttons, labels, inputs or table cells.
• Don't use destructive for anything except errors and irreversible actions such as 'Cancel shipment'. Primary amber must never signal failure.
• 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 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 place more than one amber-filled element in the same toolbar, card footer or dialog.
• Don't use pure black (#000), cool greys or untinted shadows. Take every surface, border and text color from the neutral ramp.