Sherbet Courier

About Sherbet Courier

Overview

Sherbet Courier is for logistics products used by ordinary people: parcel tracking, courier apps, local delivery and returns. It replaces the usual navy-and-orange utility look with rounded shapes, saturated raspberry and rose-tinted paper. Status, timing and addresses stay legible: every text pairing clears 4.5:1 in both modes, and most clear 5:1.

Color

Raspberry (brand, hue ~350) is the only action color. It is used for primary buttons, links, focus rings (ring = brand.500 light, brand.400 dark) and the active tracking step. Neutrals carry a deliberate rose tint in light steps that deepens to plum in neutral.900/950, so dark surfaces read as plum-ink, not grey. Status scales follow the same curve as brand: pale 50–200 tints, peak chroma at 400–600, and dark steps that stay saturated rather than going brown. Danger is shifted to a clear vermilion-orange (danger.600 #c4450c light, danger.400 #fb7a3c dark), well apart from raspberry in hue in both modes, so errors and primary actions are never confused. Success is a warm mint and warning is honey amber. The muddy olive mid-steps were removed from warning 400–600. Light contrast: primary/white ≈5.7:1, destructive/white ≈5.0:1, success.700/white ≈6.6:1, muted-foreground (neutral.700) on muted ≈6.8:1. Dark mode uses a neutral.950 plum background, neutral.900 cards one step lifted, and brand.400 primary with brand.950 text ≈5.7:1.

Typography

The scale is built on roughly a 1.25 ratio (major third) from a 16px body: 20, 24, 30, 38, 48. Literata (600–700) covers display-lg 48, display-md 38 and heading-lg 30. Its sturdy serif gives the bright palette a bookish, trustworthy voice. Tracking tightens as size grows, from -0.025em at 48px to -0.005em at 20px. Nunito Sans (400/600/700/800) handles all functional UI: heading-md 24/800, heading-sm 20/700, body at 1.5–1.6 line height, label 14/700 and caption 12/600. Fira Code 400/500 is reserved for tracking numbers, order IDs and API snippets.

Layout

Comfortable density on a 4px grid. Cards use 24px padding (space.6). Buttons and inputs are 44px tall for thumb taps, with at least 8px (space.2) between adjacent targets. Content columns are capped at 1200px. Tracking timelines use space.6 (24px) between steps and space.3 (12px) between a step title and its timestamp.

Elevation

Cards sit just above the page: a 1px border (neutral.200 light, neutral.800 dark) plus shadow.sm, tinted with brand.900 plum. Floating layers get more lift: shadow.md for menus and popovers, shadow.lg for dialogs and bottom sheets. In dark mode, cards are lifted by a lighter surface (neutral.900 on neutral.950) rather than by shadow.

Shapes

Large, friendly rounding: radius.md 12px on inputs, radius.lg 20px on cards, radius.xl 28px on dialogs and bottom sheets, and radius.full on buttons, badges and tracking-step chips. radius.sm 8px is for small inner elements such as checkboxes and tooltips. radius.none is only for full-bleed images and dividers.

Do

• Use primary (brand.600 light, brand.400 dark) for exactly one main button per view, such as 'Track parcel' or 'Schedule pickup'. Render other actions as secondary (neutral.100 / neutral.800) or ghost buttons.
• Use radius.full on buttons, badges and tracking-step chips, radius.md (12px) on inputs, radius.lg (20px) on cards and radius.xl (28px) on dialogs and bottom sheets.
• Set tracking numbers, order IDs and API keys in typography.code (Fira Code 14/400) so 0/O and 1/l are unambiguous. Use weight 500 when an ID appears inside a 14px label row.
• Use Literata only for display-lg (48), display-md (38) and heading-lg (30). Use Nunito Sans for heading-md (24/800) and below, including table cells, form labels and button text.
• Show the focus state as a 2px ring token outline with a 2px offset on every interactive element. Ring contrast is about 4.1:1 on the light background and above 5:1 on the dark background.
• Pair every delivery status (success = delivered, warning = delayed, destructive = failed) with an icon and a text label in the badge so meaning never relies on color alone.
• Lift dark-mode cards with the card surface (neutral.900 on neutral.950 background) plus a neutral.800 border. Keep shadow.md and shadow.lg for menus and dialogs only.

Don’t

• Don't use primary raspberry for failed deliveries or form errors. Use destructive (danger.600 light, danger.400 dark) with destructive-foreground text.
• Don't use radius.none on cards, buttons or inputs. Reserve it for full-bleed images and dividers.
• Don't set Literata below 30px, in all caps, or in button labels, badges and table text.
• Don't use pure black text, pure white page backgrounds or untinted grey. Use neutral.50 for the page, white for cards, and neutral.950 for text.
• Don't set body text longer than one line on the accent surface (brand.100 light, brand.900 dark). It is only for selected rows, highlights and the active tracking chip.
• Don't place more than one saturated fill (primary, destructive, success) in the same card. Combine raspberry with neutrals, not with success or warning fills.
• Don't use warning.400–600 as text on light surfaces. Use warning-foreground (warning.900) on the warning (warning.200) surface, and use muted-foreground (neutral.700) for secondary text, never neutral.500.