Merchant Language

Compact scale, efficient radius, data-dense. The Merchant language is optimized for professional use, high information density, and efficient task completion.

Language Characteristics

Context: Restaurant staff, managers managing orders, inventory, analytics

Behavior: Rapid task switching, scanning data, bulk operations

Design Response:

  • Compact type scale (0.875× multiplier) for density
  • Efficient radius (4-6px) for professional feel
  • Dense layouts with clear hierarchy
  • Table-heavy interfaces

Type Scale

Merchant uses a reduced type scale (0.875× multiplier) for information density.

Body Text:

  • ui.100: 10.5px (labels, metadata)
  • ui.200: 12.25px (secondary text)
  • ui.300: 14px (body text)
  • ui.400: 17.5px (large body, subheadings)

Display Text:

  • ui.500: 21px (small headlines)
  • ui.600: 28px (medium headlines)
  • ui.800: 38.5px (large headlines)
  • ui.1000: 52.5px (hero headlines)

Spacing & Layout

Spacing Scale: Base 4px grid (more compact application)

Common Patterns:

  • Card padding: 12-16px (compact)
  • Section spacing: 16-24px
  • Button padding: 8px 16px (efficient)
  • List item height: 48-56px (dense)

Grid:

  • Desktop-first: 24px margins, 16px gutters
  • Multi-column layouts common
  • Dense data tables

Radius

Card Radius: 4-6px (efficient, professional)

Button Radius: 4px (subtle, structured)

Avatar Radius: 4px or full rounded

Color & Elevation

Minimal Elevation:

  • Prefer borders over shadows
  • Elevation 0-1 most common
  • Flat, efficient aesthetic

Status Colors:

  • Clear status indicators
  • Color-coded categories
  • Data visualization colors

Tables & Data

Table Design:

  • Compact row height (40-48px)
  • Clear column headers
  • Sortable columns
  • Inline actions
  • Sticky headers for long lists

Data Visualization:

  • Clear, functional charts
  • Tabular data preferred
  • Scanning-optimized layouts

Interaction

Keyboard Shortcuts:

  • Extensive keyboard support
  • Quick actions (⌘K, shortcuts)
  • Tab navigation optimized

Bulk Operations:

  • Multi-select patterns
  • Batch actions
  • Efficient workflows

Motion

Minimal Motion:

  • Functional animations only
  • Faster durations
  • Reduced decorative motion
  • Focus on efficiency

Component Examples

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

Usage Guidelines

When to use Merchant language:

  • Merchant/restaurant dashboards
  • Analytics interfaces
  • Inventory management
  • Administrative tools
  • Data-heavy interfaces

Key Principles:

  • Maximize information density
  • Optimize for scanning
  • Support keyboard workflows
  • Minimize visual decoration
  • Enable bulk operations
  • Professional, efficient aesthetic

Was this page helpful?