Start

New to Modus? Get started with this introduction to our guidelines, components, and key concepts.

Introduction

The Modus design system is part of the evolving Trimble Operating System. To create an environment in which we can improve our customer’s work and productivity through innovative and connected products and services, the Trimble OS offers a number of initiatives that help scale and standardize our offerings. Our customers’ needs are at the center of this, as it aims at making interacting with our company and products easy and effective. Modus aims at creating standardized user interface components that enable product development to innovate and connect new services more seamlessly and faster.

Modus is a shared source of truth–a place to reference official Trimble patterns and styles. It includes components and guidelines. It serves product managers, designers, and developers as a repository of everything they need to plan, prototype, and develop better products. Modus resources include

The main goal of the design system is to create a cohesive brand experience. It also aims at increased scalability, better management of debt, design consistency, rapid prototyping, quick iteration, and improved user experience. Modus establishes a shared vocabulary between designers and developers and provides guidelines for better branded user interfaces and development resources.

Need help with implementation and prioritization? Learn about the incremental adoption process here.

Designers

Designers

Rapidly build beautiful and accessible experiences. The Modus kit contains all assets you need to get started.

Developers

Developers

The frontend framework is an HTML/CSS library developed as a common, open-source platform for all of Trimble’s web applications.

Modular Approach

At Trimble, there are hundreds of products being developed worldwide. In order to be flexible enough to account for the heterogeneity of Trimble offerings, Modus is aiming towards a modularity in its approach. Modular approach can adapt to different requirements and can support flexibility of design in a variety of interfaces. Other advantages include

  • It supports agile methodologies, since multiple teams can design and build modules in parallel.
  • It’s cost-effective, because all modules can be reused.
  • It’s relatively easy to maintain: fixing a problem in one module doesn’t affect the others.
  • It’s adaptable, because modules can be assembled in the ways that meet different user needs.
  • It promotes and encourages innovation, since you can create entirely new outcomes by introducing new combinations of components and patterns.

As the design system matures, you can expect to see an increased emphasis on modularity and atomic design methodology in order for the system to be more sustainable.

Elements are our most basic elements (buttons, cards, spinners, tables, etc.). Soon, we will be adding patterns (headers, footers, splash pages, etc.). And finally templates that will include layouts for pages (search results page, gallery page, etc.)

Who Can Benefit from Modus

Product owners, designers, and developers are the primary audience for this system. The result of this alignment is consistency for the end user.

  • Designers have a library of components at their disposal.
  • Designers have confidence that components are well tested.
  • Developers have a rulebook to follow.
  • Developers have access to the central library if their team lacks a dedicated designer.
  • PMs can quickly put together prototypes using existing components.

Goals and Objectives

With Modus Design System we are aiming to accomplish two main goals in line with Trimble business strategy of standardization and scale:

1. Systematize the Trimble product interfaces

  • Define guiding design principles and foundations.
  • Define and standardize reusable design components.
  • Establish a pattern library.
  • Establish a culture of inclusive design and development with building accessible components and patterns.
  • Set up master design files with up-to-date patterns in Sketch, Figma, and Adobe XD.
  • Refactor code and frontend architecture to support the modular approach for Bootstrap, Angular Material, and React.

2. Establish shared processes and governance

  • Set up knowledge-sharing processes through conversations, collaboration, pairing, and training.
  • Encourage contribution and collaboration with the Tiger Team approach.
  • Promote the component and pattern library and encourage its use across the company.
  • Promote shared design language across teams and disciplines.
  • Promote and share best research-based usability practices
  • Transition from a centralized to a distributed model with a dedicated design systems team to curate content and support from an open source contributions.

Governance

Modus is maintained and supported by product teams across Trimble. Although the system initially was created by a small, dedicated group, our mission is to have it open to the entire community where everyone is welcomed to contribute. Modus is managed and maintained by a core team and governed by the UX Board. The UX Board and the Trimble leadership encourage contributions and adoption of the design system, and the core team is dedicated to providing training and guidance for design and implementation.

How to Contribute

Trimble Modus Design System is the result of community contributions, and we are constantly working to make it better. We welcome your feedback as well as design patterns, code, ideas, articles, and user research. Explore some ways to contribute to Modus!

Interested in contributing?

Join a Tiger Team Submit a UI pattern Ask a question