Skip to main content

EGS Design Compliance

Version 3.2.0

Design Compliance

Applications adopted by EGS are required to meet the Design Compliance set forth by Astro UXDS. Design Compliance improves operator efficiency, engagement and reduces training time. When applications across the Enterprise have a common and consistent user interface Guardians can focus learning the mission unique needs rather than learning new interface paradigms.

Tiered Compliance

Astro can be adopted incrementally though the tiered compliance system outlined below. Projects can achieve progressively higher levels of compliance with each iterative release. It is important to note that adherence to the EGS Design Compliance is only one factor in accomplishing a successful user interface. Be sure to employ a user centered design practice like Traditional UX or Lean UX . For assistance please contact support@astrouxds.com.

The EGS Design Compliance rules are a living document and version with the principles of Semantic Versioning. Contribution back to Astro and the Tiered Compliance model to address issues, propose new rules or contribute additional research or guidance can be made through Astro’s GitHub page.

  • Tier 1 Basic status icons, status colors, really important things for operators to quickly become familiar with the application
  • Tier 2 Tier 1 + Astro colors to make it look like an Astro application (visual)
  • Tier 3 Tier 2 + interaction patterns (behavioral)

1.0

General

1.1
ASTRO UXDS provides developers with guidance to develop user interfaces. User interfaces must comply with the guidance in this section to be EGS Design Compliant. Developers are encouraged to conform to guidance in other sections identified as “Rules of Thumb”, “Do” examples, and “Don't” examples as described on individual component pages.
2.0

Design Guidelines

2.1.0

Color

View Color Page
2.1.1
Tier 2
Components and backgrounds shall conform to the colors specified in Astro’s color palettes. updated
2.1.2
Tier 2
The colors specified in the Tag 1, Tag 2, Tag 3, and Tag 4 palettes shall be used when distinct colors are needed to indicate data categories or groups.
2.2.0

Typography

View Typography Page
2.2.1
Tier 2
The Roboto typeface or system fonts shall be used for content and components. updated
2.2.2
Tier 2
The tabular number variant or system ui-monospace font shall be used when numeric values are intended to align vertically with content above or below updated
2.2.3
Tier 2
Text shall conform to the specified typography for Heading, Body, and Inline Text.
2.2.4
Tier 3
Text within Astro components will use sentence case capitalization unless otherwise stated. under review
3.0

Patterns

3.1.0

Status System

View Status System Page
3.1.1
Tier 1
Elements indicating state or status shall use only the specified Status Symbols.
3.1.2
Tier 1
Elements indicating state or status shall use only the specified Status Colors.
3.2.0

Data Visualization

View Data Visualization Page
3.2.1
Tier 3
Data Visualizations shall have no more than 8 colors per data set. under review
3.2.2
Tier 3
Data Visualizations shall use sentence case capitalization for titles, labels, and legends.
3.3.0

Tables

View Tables Page
3.3.1
Tier 3
Table titles, legends, and column labels shall use sentence case capitalization.
3.4.0

Forms and Validation

View Forms and Validation Page
3.4.1
Tier 3
Form controls shall not use placeholder text in place of help text.
3.4.2
Tier 2
Help Text shall be left-aligned under the relevant form element, regardless of location of the form element’s label. The only exception is for Radio Button and Checkbox list item Help Text which shall be left-aligned to the item’s text and not its icon.
3.4.3
Tier 2
Required fields shall be marked with an asterisk to the right of the label when the majority of a form is optional. under review
3.4.4
Tier 2
Optional fields shall be marked with an asterisk to the right of the label when the majority of a form is required. under review
3.4.5
Tier 3
Help Text shall use sentence case capitalization.
3.4.6
Tier 3
Validation Text shall use sentence case capitalization.
3.4.7
Tier 2
Inline Validation Text shall be left-aligned under the relevant form element or group, regardless of location of the form element’s label.
3.4.8
Tier 3
Inline Validation Text shall replace Help Text when Help Text is present under a form element and an error state is triggered.
4.0

Components

4.1.0

Button

View Button Page
4.1.1
Tier 3
Buttons shall act as actionable elements, not as state indicators.
4.1.2
Tier 3
Buttons shall not activate Pop Up Menus. under review
4.1.3
Tier 2
Grouped Buttons shall have the same width and even spacing. deprecated
4.1.4
Tier 3
Button titles shall be verbs that describe the action performed.
4.1.5
Tier 1
Button widths shall accommodate the full title without truncating or abbreviating. under review
4.1.6
Tier 1
Buttons shall be clearly titled, with no outside label.
4.1.7
Tier 2
An ellipsis (…) shall follow the Button title when further action is required to complete the command. under review
4.1.8
Tier 2
Outline Button style shall indicate the less preferred option in grouped Buttons. under review
4.1.9
Tier 3
Primary Buttons indicating preferred user actions shall be placed to the right of buttons used for secondary user actions when in Button groups.
4.1.10
Tier 3
Button text shall use sentence case capitalization.
4.2.0

Checkbox

View Checkbox Page
4.2.1
Tier 3
Checkboxes shall set values, not initiate actions.
4.2.2
Tier 3
Checkboxes shall act independently of others in a group. curent
4.2.3
Tier 2
Checkboxes shall align vertically when in a group.
4.2.4
Tier 1
Checkboxes shall have a corresponding label.
4.2.5
Tier 3
Checkbox labels shall use sentence case capitalization.
4.2.6
Tier 2
Checkbox list item Help Text shall be left-aligned to the item’s text and not its icon.
4.2.7
Tier 2
Inline Validation Text shall be left-aligned under the relevant checkbox list, regardless of location of the label.
4.3.0

Dialog

View Dialog Page
4.3.1
Tier 3
Dialogs shall use text Buttons for confirm or cancel actions, not links or other components.
4.3.2
Tier 3
The confirm Button shall be to the right of the cancel Button, and right aligned within the Dialog Box.
4.3.3
Tier 3
Dialogs shall be closed only with confirm or cancel Buttons.
4.3.4
Tier 2
Button titles shall be verbs that describe their actions, or the generic titles “OK” and “Cancel”.
4.3.5
Tier 2
Dialog text shall be clear, brief, and actionable.
4.3.6
Tier 3
Dialog title and button labels shall use sentence case capitalization.
4.4.0

Select

View Select Page
4.4.1
Tier 3
Menu items shall use sentence case capitalization.
4.4.2
Tier 3
An ellipsis (…) shall follow a menu item when further action is required to complete the command. under review
4.4.3
Tier 3
Select Menus shall not exceed 25 menu items. For longer lists, use a Table instead.
4.4.4
Tier 2
Help Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
4.4.5
Tier 2
Inline Validation Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
4.5.0

Global Status Bar

View Global Status Bar Page
4.5.1
Tier 3
The Global Status Bar shall be reserved for global elements that appear on every screen.
4.5.2
Tier 2
The Global Status Bar shall include the application name. Other elements are optional. under review
4.5.3
Tier 2
Optional Global Status Bar elements shall be arranged left to right in this order: navigation Tabs, Clock, Monitoring Icons, Action Icons, Emergency Shut Off Button.
4.5.4
Tier 2
Global Status Bar shall use dark theme styling even when the application is light themed.
4.6.0

Icons and Symbols

View Icons and Symbols Page
4.6.1
Tier 1
Monitoring Icons shall include a label and a Status Symbol.
4.6.2
Tier 1
Monitoring Icons shall be colored with one of the six standard status colors.
4.6.3
Tier 1
Percentage Monitoring Icons shall depict a value between 0 and 100 as both an arc and numeric display. under review
4.6.4
Tier 1
Status Symbols shall not be altered. They are required for ADA 508 and WCAG 2.0 compliance.
4.6.5
Tier 3
Icon labels shall identify the item represented, and shall not change. A Sub-Label may provide dynamic information. under review
4.6.6
Tier 2
Grouped Icons shall be equally sized.
4.6.7
Tier 3
Icon labels shall use sentence case capitalization.
4.7.0

Input Field

View Input Field Page
4.7.1
Tier 2
Stacked Input Fields shall be left-aligned.
4.7.2
Tier 2
Input Fields shall use the mimimum text size defined in the CSS. under review
4.7.3
Tier 2
Input Field labels shall be aligned to the top left, or to the left, of the field.
4.7.4
Tier 2
Input Fields shall have a corresponding label. under review
4.7.5
Tier 2
Help Text shall be left-aligned under the relevant Input Field, regardless of location of the label.
4.7.6
Tier 3
Input Fields shall use sentence case capitalization.
4.7.7
Tier 3
Input Field labels shall not use placeholder text in place of labels. under review
4.7.8
Tier 3
Automatically formatted Input Fields shall use consistent, recognizable formatting.
4.8.0

Link

View Link Page
4.8.1
Tier 2
Links shall use the color defined in the CSS.
4.8.2
Tier 2
Links shall not use underlined text. under review
4.8.3
Tier 2
Linked text shall indicate what will happen when the link is clicked, not “Click Here” or “Link”. under review
4.9.0

Log

View Log Page
4.9.1
Tier 3
Log entries shall include a timestamp.
4.9.2
Tier 3
When Log is scrolled to the top, it shall remain locked to the top, allowing users to always see the latest event.
4.9.3
Tier 3
When Log is scrolled to view older events, incoming events shall not change the scrolling position.
4.9.4
Tier 3
Log component text shall use sentence case capitalization.
4.10.0

Pagination

View Pagination Page
4.10.1
Tier 3
Pagination shall not use underlined text except for in hovered elements. under review
4.10.2
Tier 3
Pagination shall display Prev and Next links when the entire page range cannot be displayed.
4.10.3
Tier 3
Pagination shall remove the Prev link when there are no more pages before the first numeral displayed.
4.10.4
Tier 3
Pagination shall remove the Next link when there are no more pages after the last numeral displayed. under review
4.11.0

Pop Up

View Pop Up Page
4.11.1
Tier 3
Menu items shall use sentence case capitalization.
4.11.2
Tier 3
An ellipsis (…) shall follow a menu item when further action is required to complete the command.
4.11.3
Tier 2
Related groups of menu items shall be indicated by separator lines. under review
4.11.4
Tier 3
Pop Ups shall not exceed 25 menu items.
4.12.0

Progress

View Progress Page
4.12.1
Tier 2
A Determinate Progress indicator shall indicate an operation that has a well-defined duration.
4.12.2
Tier 2
An Indeterminate Progress indicator shall indicate an operation that has unknown duration.
4.12.3
Tier 3
A Progress indicator shall be displayed when a operation takes longer than one second to complete. under review
4.13.0

Radio Button

View Radio Button Page
4.13.1
Tier 2
Radio Buttons shall be used for mutually exclusive choices.
4.13.2
Tier 3
A Radio Button group shall always have one option selected.
4.13.3
Tier 3
A Radio Button group shall not exceed 6 items. For longer lists, use a Select Menu.
4.13.4
Tier 3
A Radio Button shall not initiate an action.
4.13.5
Tier 3
Radio Button labels shall use sentence case capitalization.
4.13.6
Tier 1
Radio Buttons shall have a corresponding label.
4.13.7
Tier 3
A Radio Button shall not initiate an immediate state change.
4.13.8
Tier 2
Radio Button list item Help Text shall be left-aligned to the item’s text and not its icon.
4.14.0

Search

View Search Page
4.14.1
Tier 2
Search Fields shall contain placeholder text, defaulting to “Search … ” under review
4.14.2
Tier 3
When a Search Field has keyboard focus, the clear button shall be enabled. under review
4.14.3
Tier 3
Search text shall use sentence case capitalization.
4.14.4
Tier 2
Help Text shall be left-aligned under the relevant Search field, regardless of location of the label.
4.14.5
Tier 2
Inline Validation Text shall be left-aligned under the relevant Search field, regardless of location of the label.
4.15.0

Segmented Button

View Segmented Button Page
4.15.1
Tier 3
Segmented Buttons shall be used for mutually exclusive choices.
4.15.2
Tier 3
A Segmented Button shall always have one option selected.
4.15.3
Tier 3
Segmented Buttons shall be limited to two to four choices.
4.15.4
Tier 3
Segmented Buttons shall use sentence case capitalization.
4.15.5
Tier 2
Help Text shall be left-aligned under the relevant Segmented Button, regardless of location of the label. under review
4.16.0

Status Symbol

View Status Symbol Page
4.16.1
Tier 1
Status Symbols shall be displayed with the specified shapes.
4.16.2
Tier 1
Status Symbols shall be displayed with the specified colors.
4.16.3
Tier 3
Switch labels shall use sentence case capitalization. under review
4.17.0

Tabs

View Tabs Page
4.17.1
Tier 3
Tabs shall be arranged in a single row or column.
4.17.2
Tier 3
Tabs shall use sentence case capitalization. deprecated
4.17.3
Tier 2
Large Tabs shall be used within the Global Status Bar, or top of the content area, for top level navigation. under review
4.17.4
Tier 2
Small Tabs shall be used within the content area, for sub level navigation or view switching. under review
4.18.0

Switch

View Switch Page
4.18.1
Tier 3
Switch shall be used when the action takes immediate effect, without further user confirmation.
4.18.2
Tier 1
Switches shall have a corresponding label.
4.18.3
Tier 3
Switch labels shall use sentence case capitalization.
4.18.4
Tier 2
Help Text shall be left-aligned under the relevant Switch, regardless of location of the label. under review
4.19.0

Accordion

View Accordion Page
4.19.1
Tier 3
Accordion titles shall use sentence case capitalization.
4.20.0

Classification & Control Markings

View Classification & Control Markings Page
4.20.1
Tier 1
Classification and control markings shall follow all applicable laws and government standards.
4.20.2
Tier 1
If classified or controlled information is present on a screen, the screen shall include a fixed Overall Marking banner at the top.
4.20.3
Tier 1
Only government-approved control or classification text shall be included in Overall Marking banners and Portion Markings. curent
4.20.4
Tier 1
Only Astro’s defined background and text colors shall be used for classification and control markings. under review
4.20.5
Tier 1
No other UI elements shall occlude the Overall Marking banner.
4.20.6
Tier 1
Marking text shall follow the standard marking structure with bold, centered text in all capital letters.
4.20.7
Tier 1
Portion Markings shall be placed at the top or top-left of the classified or controlled portion.
4.20.8
Tier 1
Text in the Overall Marking banner shall be as specific as possible to the highest level of classified information contained in that system or view.
4.20.9
Tier 1
The classification level itself (excepting CUI) in Overall Marking banners must be spelled out completely.
4.21.0

Slider

View Slider Page
4.21.1
Tier 3
Slider labels shall use sentence case capitalization.
4.21.2
Tier 2
Slider labels shall be aligned to the top left of the Slider’s track or vertically centered with the track to the left of the Slider. under review
4.21.3
Tier 2
Sliders shall have a visual indicator of the currently selected value. under review
4.21.4
Tier 2
Sliders shall have a corresponding label. under review
4.22.0

Clock

View Clock Page
4.22.1
Tier 3
Clock labels shall use sentence case capitalization.
4.23.0

Notification Banner

View Notification Banner Page
4.23.1
Tier 3
Notification Banner titles shall use sentence case capitalization.
4.24.0

Timeline

View Timeline Page
4.24.1
Tier 3
Timeline header and track titles shall use sentence case capitalization.
4.25.0

Tree

View Tree Page
4.25.1
Tier 3
Tree labels shall use sentence case capitalization.
4.26.0

Application State

View Application State Page
4.26.1
Tier 3
Application State shall be visible at all times when present.
4.26.2
Tier 2
Application State shall only use the default background color or a color from the Astro Tag palettes. under review
4.26.3
Tier 2
Application State text shall meet WCAG AA color compliance for contrast against the component’s background color.
4.26.4
Tier 3
Application State text shall use sentence casing.
4.26.5
Tier 3
Application State text shall not wrap within the component.