---
version: alpha
name: Sherbet Courier
description: "Rounded logistics UI: raspberry actions, rose-tinted paper and plum-ink neutrals, and a Literata serif voice for parcel tracking."
colors:
  background: "#fcf7f8"
  foreground: "#1e1519"
  card: "#ffffff"
  card-foreground: "#1e1519"
  popover: "#ffffff"
  popover-foreground: "#1e1519"
  primary: "#c41f55"
  primary-foreground: "#ffffff"
  secondary: "#f6edf0"
  secondary-foreground: "#30242a"
  muted: "#f6edf0"
  muted-foreground: "#5c4d54"
  accent: "#ffe0e7"
  accent-foreground: "#5a0a29"
  destructive: "#c4450c"
  destructive-foreground: "#ffffff"
  success: "#106b40"
  success-foreground: "#ffffff"
  warning: "#ffe38a"
  warning-foreground: "#47300b"
  border: "#e9dde1"
  input: "#d4c5ca"
  ring: "#e03468"
  dark-background: "#1e1519"
  dark-foreground: "#fcf7f8"
  dark-card: "#30242a"
  dark-card-foreground: "#fcf7f8"
  dark-popover: "#30242a"
  dark-popover-foreground: "#fcf7f8"
  dark-primary: "#f65f88"
  dark-primary-foreground: "#3a0418"
  dark-secondary: "#45373e"
  dark-secondary-foreground: "#f6edf0"
  dark-muted: "#45373e"
  dark-muted-foreground: "#d4c5ca"
  dark-accent: "#5a0a29"
  dark-accent-foreground: "#ffe0e7"
  dark-destructive: "#fb7a3c"
  dark-destructive-foreground: "#3a1205"
  dark-success: "#45c07e"
  dark-success-foreground: "#032416"
  dark-warning: "#f0b323"
  dark-warning-foreground: "#2b1c05"
  dark-border: "#45373e"
  dark-input: "#5c4d54"
  dark-ring: "#f65f88"
typography:
  display-lg:
    fontFamily: Literata
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.025em
  display-md:
    fontFamily: Literata
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Literata
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Nunito Sans
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Nunito Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: Fira Code
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 12px
  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
---

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

Moods: playful, friendly, bouncy, warm. Built for: logistics, delivery, e-commerce. 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

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.

- **Primary** `#c41f55` / dark `#f65f88`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#fcf7f8` / dark `#1e1519` on `#1e1519` / dark `#fcf7f8`: page surface and body text.
- **Card** `#ffffff` / dark `#30242a`: raised surfaces.
- **Secondary** `#f6edf0` / dark `#45373e`: secondary buttons and quiet controls.
- **Muted** `#f6edf0` / dark `#45373e` with **muted-foreground** `#5c4d54` / dark `#d4c5ca`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe0e7` / dark `#5a0a29`: highlights, selected rows, badges.
- **Destructive** `#c4450c` / dark `#fb7a3c`, **Success** `#106b40` / dark `#45c07e`, **Warning** `#ffe38a` / dark `#f0b323`: status only, always paired with an icon or label.
- **Border** `#e9dde1` / dark `#45373e`, **Input** `#d4c5ca` / dark `#5c4d54`, **Ring** `#e03468` / dark `#f65f88`.

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

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

- Display: **Literata** (fallback Georgia, serif)
- Interface: **Nunito Sans** (fallback system-ui, sans-serif)
- Mono: **Fira Code** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Literata | 48px | 1.08 | 700 |
| display-md | Literata | 38px | 1.12 | 700 |
| heading-lg | Literata | 30px | 1.2 | 600 |
| heading-md | Nunito Sans | 24px | 1.3 | 800 |
| heading-sm | Nunito Sans | 20px | 1.35 | 700 |
| body-lg | Nunito Sans | 18px | 1.6 | 400 |
| body-md | Nunito Sans | 16px | 1.6 | 400 |
| body-sm | Nunito Sans | 14px | 1.5 | 400 |
| label | Nunito Sans | 14px | 1.25 | 700 |
| caption | Nunito Sans | 12px | 1.4 | 600 |
| code | Fira Code | 14px | 1.5 | 400 |

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

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

## Elevation & Depth

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.

- sm: `0 1px 2px rgba(90, 10, 41, 0.05), 0 2px 6px rgba(90, 10, 41, 0.06)`
- md: `0 8px 20px -4px rgba(90, 10, 41, 0.16)`
- lg: `0 20px 44px -10px rgba(90, 10, 41, 0.28)`

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

Radius scale: sm 8px, md 12px, 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 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.
- **Do:** 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.
- **Do:** 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.
- **Do:** 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.
- **Do:** 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.
- **Do:** 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.
- **Do:** 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:** Don't use radius.none on cards, buttons or inputs. Reserve it for full-bleed images and dividers.
- **Don't:** Don't set Literata below 30px, in all caps, or in button labels, badges and table text.
- **Don't:** 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:** 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:** 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:** 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.