EGS Design Compliance

Version 3.1.0

  1. 1.0 General
    1. 1.1 ASTRO UXDS provides developers with guidance to develop user interfaces. User interfaces must compy 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's” and “Don'ts” as described on individual component pages.
  2. 2.0 Design Guidelines
    1. 2.1.0 Color
      1. 2.1.1 Components and backgrounds shall conform to the colors specified in the Primary, Secondary, Tertiary, and Quaternary palettes.
      2. 2.1.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.2.0 Typography
      1. 2.2.1 The Roboto font shall be used for content and components.
      2. 2.2.2 The Roboto Mono font shall be used when monospace digits are required.
      3. 2.2.3 Text shall conform to the specified typography for Heading, Body, and Inline Text.
      4. 2.2.4 Text within Astro components will use sentence case capitalization unless otherwise stated.
  3. 3.0 Patterns
    1. 3.1.0 Status System
      1. 3.1.1 Elements indicating state or status shall use only the specified Status Symbols.
      2. Elements indicating state or status shall use only the specified Status Symbols.
      3. 3.1.2 Elements indicating state or status shall use only the specified Status Colors.
    2. 3.2.0 Data Visualization
      1. 3.2.1 Data visualizations shall have no more than 8 colors per data set.
      2. 3.2.2 Data visualizations shall use sentence case capitalization for titles, labels, and legends.
    3. 3.3.0 Tables
      1. 3.3.1 Table titles, legends, and column labels shall use sentence case capitalization.
    4. 3.4.0 Forms and Validation
      1. 3.4.1 Form controls shall not use placeholder text in place of help text.
      2. 3.4.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. 3.4.3 Required fields shall be marked with an asterisk to the right of the label when the majority of a form is optional.
      4. 3.4.4 Optional fields shall be marked with an asterisk to the right of the label when the majority of a form is required.
      5. 3.4.5 Help Text shall use sentence case capitalization.
      6. 3.4.6 Validation Text shall use sentence case capitalization.
      7. 3.4.7 Inline Validation Text shall be left-aligned under the relevant form element or group, regardless of location of the form element’s label.
      8. 3.4.8 Inline Validation Text shall replace Help Text when Help Text is present under a form element and an error state is triggered.
  4. 4.0 Components
    1. 4.1.0 Button
      1. 4.1.1 Buttons shall act as actionable elements, not as state indicators.
      2. 4.1.2 Buttons shall not activate Pop Up Menus.
      3. 4.1.3 Grouped Buttons shall have the same width and even spacing.
      4. 4.1.4 Button titles shall be verbs that describe the action performed.
      5. 4.1.5 Button widths shall accommodate the full title without truncating or abbreviating.
      6. 4.1.6 Buttons shall be clearly titled, with no outside label.
      7. 4.1.7 An ellipsis (…) shall follow the Button title when further action is required to complete the command.
      8. 4.1.8 Outline Button style shall indicate the less preferred option in grouped Buttons.
      9. 4.1.9 Primary Buttons indicating preferred user actions shall be placed to the right of buttons used for secondary user actions when in Button groups.
      10. 4.1.10 Button text shall use sentence case capitalization.
    2. 4.2.0 Checkbox
      1. 4.2.1 Checkboxes shall set values, not initiate actions.
      2. 4.2.2 Checkboxes shall act independently of others in a group.
      3. 4.2.3 Checkboxes shall align vertically when in a group.
      4. 4.2.4 Checkboxes shall have a corresponding label.
      5. 4.2.5 Checkbox labels shall use sentence case capitalization.
      6. 4.2.6 Checkbox list item Help Text shall be left-aligned to the item’s text and not its icon.
      7. 4.2.7 Inline Validation Text shall be left-aligned under the relevant checkbox list, regardless of location of the label.
    3. 4.3.0 Dialog Box
      1. 4.3.1 Dialog Boxes shall use text Buttons for confirm or cancel actions, not links or other components.
      2. 4.3.2 The confirm Button shall be to the right of the cancel Button, and right aligned within the Dialog Box.
      3. 4.3.3 Dialog Boxes shall be closed only with confirm or cancel Buttons.
      4. 4.3.4 Button titles shall be verbs that describe their actions, or the generic titles “OK” and “Cancel”.
      5. 4.3.5 Dialog Box text shall be clear, brief, and actionable.
      6. 4.3.6 Dialog title and button labels shall use sentence case capitalization.
    4. 4.4.0 Select
      1. 4.4.1 Menu items shall use sentence case capitalization.
      2. 4.4.2 An ellipsis (…) shall follow a menu item when further action is required to complete the command.
      3. 4.4.3 Select menus shall not exceed 25 menu items. For longer lists, use a Table instead.
      4. 4.4.4 Help Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
      5. 4.4.5 Inline Validation Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
    5. 4.5.0 Global Status Bar
      1. 4.5.1 The Global Status Bar shall be reserved for global elements that appear on every screen.
      2. 4.5.2 The Global Status Bar shall include the application name. Other elements are optional.
      3. 4.5.3 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. 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.
      5. 4.5.4 Global Status Bar shall use dark theme styling even when the application is light themed.
    6. 4.6.0 Icons and Symbols
      1. 4.6.1 Monitoring Icons shall include a label and a status symbol.
      2. 4.6.2 Monitoring Icons shall be colored with one of the six standard status colors.
      3. 4.6.3 Percentage Monitoring Icons shall depict a value between 0 and 100 as both an arc and numeric display.
      4. Percentage Monitoring Icons shall depict a value between 0 and 100 as both an arc and numeric display.
      5. 4.6.4 Status Symbols shall not be altered. They are required for ADA 508 and WCAG 2.0 compliance.
      6. 4.6.5 Icon labels shall identify the item represented, and shall not change. A Sub-Label may provide dynamic information.
      7. 4.6.6 Grouped icons shall be equally sized.
      8. Grouped icons shall be equally sized.
      9. 4.6.7 Icon labels shall use sentence case capitalization.
    7. 4.7.0 Input Field
      1. 4.7.1 Stacked Input Fields shall be left-aligned.
      2. 4.7.2 Input Fields shall use the mimimum text size defined in the CSS.
      3. 4.7.3 Input Field labels shall be aligned to the top left, or to the left, of the field.
      4. Input Field labels shall be aligned to the top left, or to the left, of the field.
      5. 4.7.4 Input Fields shall have a corresponding label.
      6. 4.7.4 Help Text shall be left-aligned under the relevant Input Field, regardless of location of the label.
      7. 4.7.5 Input Fields shall use sentence case capitalization.
      8. 4.7.6 Input Field labels shall not use placeholder text in place of labels.
      9. 4.7.7 Automatically formatted Input Fields shall use consistent, recognizable formatting.
    8. 4.8.0 Link
      1. 4.8.1 Links shall use the color defined in the CSS.
      2. 4.8.2 Links shall not use underlined text.
      3. 4.8.3 Linked text shall indicated what will happen when the link is clicked, not "Click Here" or "Link".
    9. 4.9.0 Log
      1. 4.9.1 Log entries shall include a timestamp.
      2. 4.9.2 When Log is scrolled to the top, it shall remain locked to the top, allowing users to always see the latest event.
      3. 4.9.3 When Log is scrolled to view older events, incoming events shall not change the scrolling position.
      4. 4.9.4 Log component text shall use sentence case capitalization.
    10. 4.10.0 Pagination
      1. 4.10.1 Pagination shall not use underlined text.
      2. 4.10.2 Pagination shall display Prev and Next links when the entire page range cannot be displayed.
      3. Pagination shall display Prev and Next links when the entire page range cannot be displayed.
      4. 4.10.3 Pagination shall remove the Prev link when there are no more pages before the first numeral displayed.
      5. 4.10.4 Pagination shall remove the Next link when there are no more pages after the last numeral displayed.
    11. 4.11.0 Pop Up
      1. 4.11.1 Menu items shall use sentence case capitalization.
      2. 4.11.2 An ellipsis (…) shall follow a menu item when further action is required to complete the command.
      3. 4.11.3 Related groups of menu items shall be indicated by separator lines.
      4. 4.11.4 Pop Ups shall not exceed 25 menu items.
    12. 4.12.0 Progress
      1. 4.12.1 A determinate Progress indicator shall indicate an operation that has a well-defined duration.
      2. A determinate Progress indicator shall indicate an operation that has a well-defined duration.
      3. 4.12.2 An indeterminate Progress indicator shall indicate an operation that has unknown duration.
      4. An indeterminate Progress indicator shall indicate an operation that has unknown duration.
      5. 4.12.3 A Progress indicator shall be displayed when a operation takes longer than one second to complete.
    13. 4.13.0 Radio Button
      1. 4.13.1 Radio Buttons shall be used for mutually exclusive choices.
      2. 4.13.2 A Radio Button group shall always have one option selected.
      3. 4.13.3 A Radio Button group shall not exceed 6 items. For longer lists, use a Select Menu.
      4. 4.13.4 A Radio Button shall not initiate an action.
      5. 4.13.5 Radio Button labels shall use sentence case capitalization.
      6. 4.13.6 Radio Buttons shall have a corresponding label.
      7. Radio Buttons shall have a corresponding label.
      8. 4.13.7 A Radio Button shall not initiate an immediate state change.
      9. 4.13.8 Radio Button list item Help Text shall be left-aligned to the item’s text and not its icon.
    14. 4.14.0 Search
      1. 4.14.1 Search Fields shall contain placeholder text, defaulting to "Search ... "
      2. 4.14.2 When a Search Field has keyboard focus, the clear button shall be enabled.
      3. When a Search Field has keyboard focus, the clear button shall be enabled.
      4. 4.14.3 Search text shall use sentence case capitalization.
      5. 4.14.4 Help Text shall be left-aligned under the relevant Search field, regardless of location of the label.
      6. 4.14.5 Inline Validation Text shall be left-aligned under the relevant Search field, regardless of location of the label.
    15. 4.15.0 Segmented Button
      1. 4.15.1 Segmented Buttons shall be used for mutually exclusive choices.
      2. 4.15.2 A Segmented Button shall always have one option selected.
      3. 4.15.3 Segmented Buttons shall be limited to two to four choices.
      4. 4.15.4 Segmented Buttons shall use sentence case capitalization.
      5. 4.15.5 Help Text shall be left-aligned under the relevant Segmented Button, regardless of location of the label.
    16. 4.16.0 Status Symbol
      1. 4.16.1 Status Symbols shall be displayed with the specified shapes.
      2. 4.16.2 Status Symbols shall be displayed with the specified colors.
      3. 4.16.3 Switch labels shall use sentence case capitalization.
    17. 4.17.0 Tabs
      1. 4.17.1 Tabs shall be arranged in a single row or column.
      2. 4.17.2 Tabs shall use sentence case capitalization.
      3. 4.17.3 Large Tabs shall be used within the Global Status Bar, or top of the content area, for top level navigation.
      4. 4.17.4 Small Tabs shall be used within the content area, for sub level navigation or view switching.
    18. 4.18.0 Switch
      1. 4.18.1 Switch shall be used when the action takes immediate effect, without further user confirmation.
      2. 4.18.2 Switches shall have a corresponding label.
      3. 4.18.3 Switch labels shall use sentence case capitalization.
      4. 4.18.4 Help Text shall be left-aligned under the relevant Switch, regardless of location of the label.
    19. 4.19.0 Accordion
      1. 4.19.1 Accordion titles shall use sentence case capitalization.
    20. 4.20.0 Classification & Control Markings
      1. 4.20.1 Classification and control markings shall follow all applicable laws and government standards.
      2. 4.20.2 If classified or controlled information is present on a screen, the screen shall include a fixed Overall Marking banner at the top.
      3. 4.20.3 Only government-approved control or classification text shall be included in Overall Marking banners and Portion Markings.
      4. 4.20.4 Only Astro's defined background and text colors shall be used for classification and control markings.
      5. 4.20.5 No other UI elements shall occlude the Overall Marking banner.
      6. 4.20.6 Marking text shall follow the standard marking structure with bold, centered text in all capital letters.
      7. 4.20.7 Portion Markings shall be placed at the top or top-left of the classified or controlled portion.
      8. 4.20.8 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.
      9. 4.20.9 The classification level itself (excepting CUI) in Overall Marking banners must be spelled out completely.
    21. 4.21.0 Slider
      1. 4.21.1 Slider labels shall use sentence case capitalization.
      2. 4.21.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.
      3. 4.21.3 Sliders shall have a visual indicator of the currently selected value.
      4. 4.21.4 Sliders shall have a corresponding label.
    22. 4.22.0 Clock
      1. 4.22.1 Clock labels shall use sentence case capitalization.
    23. 4.23.0 Notification Banner
      1. 4.23.1 Notification Banner titles shall use sentence case capitalization.
    24. 4.24.0 Timeline
      1. 4.24.1 Timeline header and track titles shall use sentence case capitalization.
    25. 4.25.0 Tree
      1. 4.25.1 Tree labels shall use sentence case capitalization.
    26. 4.26.0 Application State
      1. 4.26.1 Application State shall be visible at all times when present.
      2. 4.26.2 Application State shall only use the default background color or a color from the Astro Tag palettes.
      3. 4.26.3 Application State text shall meet WCAG AA color compliance for contrast against the component’s background color.
      4. 4.26.4 Application State text shall use sentence casing.
      5. 4.26.5 Application State text shall not wrap within the component.