Design System Creation

[kirillakovalenko]

Description

To ensure visual consistency and accelerate development across the Delivery Optimizer PWA, we need to establish a foundational Design System. This system will serve as the single source of truth for our UI components, ensuring the application feels cohesive, modern, and accessible. Given our target audience (small business Route Managers operating on the go) and our strict stateless architecture, the design language must communicate trust, reliability, and ease of use. It must also incorporate the "B2 with love for humanity" brand identity.

Scope

• In Scope: * Defining the core color palette (brand, semantic/status, and distinct route-coding colors).
  • Establishing a typography scale (headings, body, captions, labels).
  • Designing button components with all interactive states.
  • Curating or designing a standardized icon set for UI and map elements.
  • Ensuring mobile-first sizing and touch-target accessibility.
• Out of Scope: * High-fidelity page layouts (handled in separate Edit/Result page tasks).
  • Marketing materials or logos outside of the core UI requirements.

Goal

To create a reusable, scalable library of design tokens and components in Figma that the design team can use for high-fidelity mockups and the engineering team can translate directly into a front-end component library.

Acceptance Criteria

• Typography: A clear typographic scale is defined, including font families, weights, and sizes for Headings (H1-H6), Body text, Buttons, and Captions.

• Color Palette: Hex codes and usage guidelines are documented for:

  • Primary and secondary brand colors.
  • Neutral colors (backgrounds, borders, text variations).
  • Semantic colors (Error/Invalid address, Success, Warning).
  • Map/Route Colors: A high-contrast set of at least 10 distinct colors for color-coding multiple routes.

• Buttons: Components are designed with specific styling for:

  • Primary Button (e.g., "Optimize", "Save")
  • Secondary Button (e.g., "Export", "Add New Address")
  • Tertiary/Ghost Button (e.g., "Cancel", "Clear All")
  • Note: All buttons must include designs for Default, Hover, Active/Pressed, and Disabled states.

• Icons: A cohesive icon set is provided, including at minimum: Edit, Delete/Trash, Save, Export, Add/Plus, Close/X, Chevron/Dropdown, Search, Map Pins (various states), and User/Driver.

• Accessibility: All text and button color combinations pass WCAG AA contrast ratio standards.

• Attach Figma Link and Screenshots

Assignee

@katherinyuh and @eltouami