# Design language

Source: https://design.ritchiebros.com/design/design-language/

Efficiency, intuition, and style combined to empower people with data-rich views, action-driven interfaces, and dynamic interactions.

## What is it

Orbit’s design language prioritizes efficiency and intuitive interactions, catering to the daily tasks people perform in a product interface.

It involves using space efficiently so people can view more data at once. It’s about avoiding being verbose and making the interface action-driven, with intuitive icons for swift navigation.

It also means combining motion, color, and depth to create a responsive, dynamic interface with clear affordances that enable intuitive interaction without confusion about what’s interactive.

## Assign meaning

Visual language should be clear. Strong meaning is associated when using color: red means danger, green means go. Color roles are heightened in the interface and add a layer of detail people can quickly understand and master.

Leveraging established symbols to identify key functionality helps people understand the interface at first glance. Using clear, widely recognized icons creates a clear and predictable experience.

**Do:** Tie every use of color to a specific, consistent meaning.

**Don’t:** Use color purely as decoration where it competes with meaningful color.

## Increase density

Space is optimized while maintaining high usability. Density adapts to the task: high density in data-rich environments, low density in focused, detailed areas.

Information is structured in a clear visual hierarchy, emphasizing important details through size, weight, and color. Space is used to create groups of related information so the interface is easier to scan and decisions are faster.

**Do:** Adapt density to the task — dense for data, roomy for focused work.

**Don’t:** Apply one fixed density everywhere regardless of the content.

## Craft considered interactions

Interfaces incorporate a sense of realness. Primary interaction points provide a clear visual response: position and lighting change to mimic how physical controls react. A hover transition is smooth and unobtrusive, while feedback from a click feels more definite.

Interactions are quick and provide instant feedback. Transitions are seamless and help create an intuitive navigation experience, making the interface feel dynamic and building confidence.

## Make it predictable

Objects with a similar appearance share a common behavior. Elements that look alike behave consistently throughout the interface, which reduces confusion and cognitive load.

By using consistent signifiers throughout the experience, people can apply what they learn as they navigate. This enables a smoother learning curve and makes the interface progressively easier to use.

**Do:** Give visually similar elements consistent, predictable behavior.

**Don’t:** Make elements that look the same behave differently.