Skip to main content

Rules of Thumb

  • Application State (when present) should be visible at all times. Developers should configure menu placements to ensure the app state is not occluded.
  • Use short names for application states when possible to reduce crowding in the Global Status Bar.
  • Make an explicit decision on whether labeling the live/production version of the application is appropriate for your application. Depending on the use case, this additional indicator can be helpful or distracting and unnecessary.
  • If the application is in more than one state at a time, for example a training state that is still being created in the development environment, then show all relevant state names within the same App State component, but with a textual divider such as a slash or comma.
  • If the user needs to swap between application states within the user interface, then provide that option in the application menu. This functionality should only be added if research has shown that easy access to other application states is beneficial to your users since the consequences of making changes in the wrong application state can often be quite large.

Appearance and Behavior

Background

  • The background rectangle does not change height, but will change width with longer text content.
  • It is suggested that the background color for the application state component uses Astro 7.0 palettes Purple, Hot Orange, Pink, and Teal (commonly used for Tags).

Only use Tag colors when necessary as overuse of colors may reduce efficacy of monitoring icon, classification marking, and notification banner component colors.

Text

  • Text within the component uses the Body 2 style and sentence casing.
  • The default font color is the Dark Theme’s default body text color ( --color-palette-neutral-000 ) for use with the default, dark background color.
  • When a lighter Tag background color is used, the font color changes to --color-palette-darkblue-950 for better color contrast and legibility.
  • Text does not wrap within the component in order to keep the height of the Global Status Bar consistent across application states which improves muscle memory and faster recognition time.

Location

  • The App State component is placed below the application title text in the Global Status Bar .
  • The App State should be left-aligned to the application title text, not the menu.
  • If a left-aligned username is present, add space between the App State and the username to ensure legibility of both elements.
  • When the App State is present, the application title, menu, state, and username section should be vertically centered in the allotted space within the Global Status Bar .

Examples

Do: Place the indicator below the application title.
Do: Place the indicator below the application title.
Don’t: Place the indicator below the application menu.
Don’t: Place the indicator below the application menu.
Do: Show all relevant state names if more than one application state is ongoing at the time.
Do: Show all relevant state names if more than one application state is ongoing at the time.
Don’t: Allow text wrapping in the component.
Don’t: Allow text wrapping in the component.
Do: Use short names to avoid overcrowding of the Global Status Bar.
Do: Use short names to avoid overcrowding of the Global Status Bar.
Don’t: Allow other elements of the user interface like the app menu to obscure the Application State.
Don’t: Allow other elements of the user interface like the app menu to obscure the Application State.
Do: Use the application menu to enable state switching when necessary.
Do: Use the application menu to enable state switching when necessary.
Don’t: Implement state switching in the UI without confirming that this functionality is approved by your client or security expert.
Don’t: Implement state switching in the UI without confirming that this functionality is approved by your client or security expert.
Do: Change text color to --color-palette-grey-800 if the background color makes the original text color hard to read.
Do: Change text color to --color-palette-grey-800 if the background color makes the original text color hard to read.
Don’t: Use non-default or non-tag colors for background colors.
Don’t: Use non-default or non-tag colors for background colors.
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel

Request Access to Source Code Repository

The source code Git repository and other useful documentation for Astro’s apps are hosted on Github.com. Please fill out the form below to request access.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like Access to?
Successfully submitted request for source code