EGS Compliance

  1. General

    1. All designs should follow the guidance marked as "Rules of Thumb", "Do's" and "Don'ts".
  2. Color

    1. Ordinary User Interface elements and backgrounds shall be designed with the colors identified in the Primary, Secondary, Tertiary, and Quaternary palettes.
    2. User Interface elements that require distinct colors shall be designed with the colors identified in the Tag 1, Tag 2, Tag 3, and Tag 4 palettes.
  3. Typography

    1. Applications shall be designed using the Open Sans and Roboto Mono fonts.
    2. Applications should follow the typeface size guidelines for Heading and Body elements.
  4. Status System

    1. User Interface elements indicating state or status shall be designed with the six shapes specified.
    2. User Interface elements indicating state or status shall be designed with the six colors specified.
  5. Data Visualization

    1. Data visualizations shall have no more than 8 colors per data set to manage cognitive load.
  6. Components

    1. Button

      1. Buttons shall be used for actionable controls only, not as state indicators.
    2. Checkbox

      1. Checkboxes shall be used for setting values only, not to initiate actions.
    3. Dialog Box

      1. Dialog Boxes shall use Buttons for for confirm or cancel actions.
      2. Dialog Boxes shall be closed only with confirm or cancel Buttons.
      3. Dialog Box confirmation Button shall be to the right of the cancel Button.
    4. Drop Down

      1. Menu items shall use title-style capitalization.
      2. Menu items shall use an ellipsis (…) to indicate that further action is required to complete the command.
    5. Global Status Bar

      1. The Global Status Bar shall be reserved for global elements that appear on every screen.
      2. Global Status Bar elements shall be arranged left to right as shown in the "Most Complex Global Status Bar"illustration.
    6. Icons and Symbols

      1. Monitoring Icons shall include a label and a status symbol as illustrated.
      2. Monitoring Icons shall be rendered with the standard status colors.
    7. Input Field

      1. Stacked Input Fields shall be left aligned.
      2. Input Fields shall use the text size defined in the CSS.
    8. Link

      1. Links shall use the color defined in the CSS.
      2. Links shall use a text style that is without an underline.
    9. Log

      1. Custom Log implementations shall perform all of the scrolling and filtering interactions described.
    10. Pagination

      1. Pagination shall use a text style that is without an underline.
    11. Pop Up

      1. Menu items shall use title-style capitalization.
      2. Menu items shall use an ellipsis (…) to indicate that further action is required to complete the command.
    12. Progress

      1. Progress indicator shall indicate the precise completion time for an operation.
    13. Radio Button

      1. Radio Buttons shall be used only for mutually exclusive choices.
    14. Search

      1. Search Fields shall contain prompt text.
    15. Segmented Button

      1. Segmented Buttons shall be used only for mutually exclusive selections.
    16. Status Symbol

      1. Status Symbols shall always be rendered with the specified shapes.
      2. Status Symbols shall always be rendered with the specified colors.
    17. Tabs

      1. Tabs shall be arranged in a single row.
      2. Tabs shall use title-style capitalization.
    18. Toggle

      1. Toggle shall be used when the action takes immediate effect.
×