Skip to main content

Messages

Messages provide the user with contextual static information. They have a lower priority than an alert.

Specifications


This is a primary message


This is a secondary message
  • Fills the width of its container.
  • Should have an accompanying icon to the left of the message text. When the text spans multiple lines, the icon should remain aligned to the top.

Colors

Element Property Color
Primary Color Trimble Blue White
#0063a3
#ffffff
Background Pale Blue Dark Mode Blue (20%)
#dcedf9
#019aeb33
Secondary Color Trimble Gray White
#252a2e
#ffffff
Background Light Gray Gray 9
#f1f1f6
#353a40

Behaviors

  • Messages should remain static on the page. They should not be dismissible.

Editorial

  • Messages should be brief, full sentences, with proper punctuation.
  • They should provide the user with helpful, contextual information about a possible action or a set of data.
Last updated September 27, 2024.