Consumer Language

Generous spacing, friendly radius, comfortable type. The Consumer language is optimized for browsing, discovery, and leisurely decision-making.

Language Characteristics

Context: Customers browsing restaurants, placing orders, tracking deliveries

Behavior: Leisurely browsing, comparing options, making decisions

Design Response:

  • Generous spacing for comfortable scanning
  • Friendly radius (12-16px) for approachable feel
  • Larger type scale (1.0× base)
  • Rich imagery and visual hierarchy

Type Scale

Consumer uses the base type scale (1.0× multiplier) with comfortable line heights and spacing.

Body Text:

  • ui.100: 12px (labels, metadata)
  • ui.200: 14px (secondary text)
  • ui.300: 16px (body text)
  • ui.400: 20px (large body, subheadings)

Display Text:

  • ui.500: 24px (small headlines)
  • ui.600: 32px (medium headlines)
  • ui.800: 44px (large headlines)
  • ui.1000: 60px (hero headlines)

Spacing & Layout

Spacing Scale: Base 4px grid

Common Patterns:

  • Card padding: 16-24px
  • Section spacing: 32-48px
  • Button padding: 12px 24px
  • List item height: 72-88px

Grid:

  • Mobile: 16px margins, 16px gutters
  • Tablet: 24px margins, 24px gutters
  • Desktop: 32px margins, 24px gutters

Radius

Card Radius: 12-16px (friendly, approachable)

Button Radius: 8-12px (balanced)

Avatar Radius: Full rounded (pills)

Color & Elevation

Background Hierarchy:

  • Level 0: Page background
  • Level 1: Card surface (+1 shade)
  • Level 2: Nested elements (+2 shades)

Elevation:

  • Cards at rest: Elevation 1
  • Cards on hover: Elevation 2
  • Modals: Elevation 4

Imagery

Restaurant Photos:

  • Large hero images (16:9 or 4:3)
  • High quality, appetizing
  • Natural lighting preferred

Product Images:

  • Square format (1:1)
  • Clean backgrounds
  • Consistent styling

Component Examples

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

Usage Guidelines

When to use Consumer language:

  • Customer-facing apps (ordering, browsing)
  • Marketing pages
  • Discovery experiences
  • Lifestyle content

Key Principles:

  • Prioritize visual appeal over density
  • Use imagery generously
  • Create comfortable breathing room
  • Make CTAs prominent and friendly

Was this page helpful?