Courier Language

Glanceable scale, practical radius, high-contrast. The Courier language is optimized for movement, quick glances, and immediate action while driving or biking.

Language Characteristics

Context: Couriers navigating, accepting orders, completing deliveries

Behavior: Moving quickly, glancing at device, making split-second decisions

Design Response:

  • Larger type scale (1.25× multiplier) for glanceability
  • Practical radius (8px) for clarity
  • High contrast for outdoor visibility
  • Minimal complexity, maximum clarity

Type Scale

Courier uses an enlarged type scale (1.25× multiplier) for at-a-glance readability.

Body Text:

  • ui.100: 15px (labels, metadata)
  • ui.200: 17.5px (secondary text)
  • ui.300: 20px (body text)
  • ui.400: 25px (large body, subheadings)

Display Text:

  • ui.500: 30px (small headlines)
  • ui.600: 40px (medium headlines)
  • ui.800: 55px (large headlines)
  • ui.1000: 75px (hero headlines)

Spacing & Layout

Spacing Scale: Base 4px grid (same as Consumer, but less dense)

Common Patterns:

  • Card padding: 20-24px (more generous)
  • Section spacing: 24-32px
  • Button padding: 16px 32px (larger tap targets)
  • List item height: 80-96px (taller for easier tapping)

Grid:

  • Mobile: 16px margins, 16px gutters
  • Focus on single-column layouts

Radius

Card Radius: 8px (practical, balanced)

Button Radius: 6-8px (clear definition)

Avatar Radius: Full rounded

Color & Contrast

High Contrast Mode:

  • Increased contrast ratios for outdoor visibility
  • Bolder borders and dividers
  • Stronger shadows

Status Colors:

  • Prominent use of green (complete), yellow (in progress), red (issue)
  • Large color blocks for instant recognition

Interaction

Large Tap Targets:

  • Minimum 48×48px
  • Generous spacing between interactive elements
  • Full-width buttons where possible

Haptic Feedback:

  • Prominent haptic feedback for all actions
  • Confirmation vibrations
  • Error alerts

Motion

Simplified Animations:

  • Faster durations (reduced by 20%)
  • Simple, clear transitions
  • Minimal decorative motion

Component Examples

[Interactive component examples showing Courier language in action - to be added]

Usage Guidelines

When to use Courier language:

  • Courier/driver apps
  • Delivery tracking
  • Navigation interfaces
  • Time-critical tasks

Key Principles:

  • Optimize for glanceability
  • Maximize tap target size
  • Use high contrast
  • Minimize visual complexity
  • Support one-handed operation

Was this page helpful?